# Slide Craft

The design law of a slide page, canvas geometry, the text height table, the type...

- Repository: https://github.com/THU-MAIC/OpenMAIC (42385 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add THU-MAIC/OpenMAIC --skill slide-craft -g -a claude-code -y`
Codex: `npx skills add THU-MAIC/OpenMAIC --skill slide-craft -g -a codex -y`
Cursor: `npx skills add THU-MAIC/OpenMAIC --skill slide-craft -g -a cursor -y`
Gemini CLI: `npx skills add THU-MAIC/OpenMAIC --skill slide-craft -g -a gemini-cli -y`

## Description

The design law of a slide page, canvas geometry, the text height table, the type scale, contrast pairs, spacing rhythm, and which element type carries which content. Load it when patching slide elements one at a time, when a fix is about colour or contrast, when text has to grow or shrink inside a box, when a page feels crowded or empty, or when replacement content needs real rich-text structure. It is the standard `page-clone` and `pro-editing` edit against, not a procedure of its own, those two decide which pages to touch and in what order, this one decides what a good page looks like when you put it back.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# The design law of a slide page

Every slide in this runtime was drawn under a long set of rules, the canvas,
the height table, the type scale, the spacing standards. The generator that
drew the page had all of them in front of it. When you patch one element, you
have the page's numbers and nothing else, and the rules are the only way to
tell a repair from a dent.

This is that rule set, restated for editing. It is about the page, not the
process: which numbers a change has to stay consistent with, and which fields
actually reach the screen.

## The canvas you are editing inside

The canvas is **1000 × 562.5**. All elements respect a **50px margin**, so the
live area is `left ∈ [50, 950]`, `top ∈ [50, 512.5]`, and an element's right
edge (`left + width`) stays ≤ 950, its bottom edge ≤ 512.5.

The page's own alignment grid, which existing elements are already on:

- Left-aligned content sits at `left = 60` or `left = 80`.
- Centred content is `left = (1000 - width) / 2`, recomputed, never guessed.
- Right-aligned content is `left = 1000 - width - 60`.

Changing `width` on centred content changes `left` too, and they are two separate
writes. Read the neighbours' boxes first and land on the column they are already
using; a lone element 8px off the shared left edge reads as a mistake even though
nothing overflows.

**There is no alignment operation.** Every position is an explicit number you
write to that element's own `left` / `top` / `width` / `height`, one path per call,
computed from the neighbours you read. Aligning a row means giving each element the
number the row already uses, not asking the page to tidy itself.

## Text is sized by table, not by eye

A text element has **10px padding on all four sides**, so its usable area is
`(width - 20) × (height - 20)`, and heights come from one table
(line-height 1.5, padding included):

The rest: https://github.com/THU-MAIC/OpenMAIC/blob/HEAD/skills/agent-runtime/slide-craft/SKILL.md