| 1 | --- |
| 2 | name: square-1-1-layout-skill |
| 3 | description: Must be read before creating, relaying out, or repairing 1:1 square Oh My PPT pages. Defines square-card layout, centered focal hierarchy, quadrant and orbit structures, balanced margins, data-card budgeting, plus catalog and checklist references for 1200x1200 canvases. |
| 4 | --- |
| 5 | |
| 6 | # Square 1:1 Layout Skill |
| 7 | |
| 8 | This skill is the layout source of truth for `square-1-1` pages, usually 1200x1200. |
| 9 | |
| 10 | A 1:1 page is a square content card. It works best when the card has one unmistakable center of gravity and balanced margins on all four sides. The layout should feel complete as a single shareable visual, not like a cropped presentation page. |
| 11 | |
| 12 | Deep details live in the references: |
| 13 | |
| 14 | - `references/catalog.md` - named square-card patterns and 1200x1200 zone skeletons. |
| 15 | - `references/checklist.md` - P0/P1/P2 structural self-check for delivery. |
| 16 | |
| 17 | ## Preflight |
| 18 | |
| 19 | Before writing HTML, decide: |
| 20 | |
| 21 | 1. **Message** - the one sentence this card should make the viewer remember. |
| 22 | 2. **Focal anchor** - claim, quote, hero number, chart, image, concept, or matrix. |
| 23 | 3. **Support shape** - orbit chips, 2x2 cells, evidence band, stacked pair, or short explanation. |
| 24 | 4. **Reading path** - center first, then support, then takeaway/source. |
| 25 | 5. **Density** - low for quote/claim, medium for most cards, high only for compact 2x2 or ranked list. |
| 26 | 6. **Pattern** - choose one structure from `references/catalog.md` before writing HTML. |
| 27 | 7. **Balance check** - inspect top/bottom/left/right margins and corner weight. |
| 28 | |
| 29 | Use the canvas dimensions from the prompt. If custom dimensions are supplied, preserve square balance. |
| 30 | |
| 31 | ## Canvas Grammar |
| 32 | |
| 33 | - Start with one focal anchor. A square card needs a dominant center of gravity. |
| 34 | - Keep margins visually balanced on all four sides. |
| 35 | - Use at most two real columns or a 2x2 grid. |
| 36 | - Corners matter. Fill them only with meaningful support, not decorative leftovers. |
| 37 | - Use grid/flex document flow for text-bearing modules. Absolute positioning is only for background accents, connector lines, and non-text decoration. |
| 38 | - Body copy, ordinary labels, and card descriptions must be at least **24px** (Tailwind `text-2xl` is 24px, or use `style="font-size:24px"` / `text-[24px]`); headings must be at least **32px** (`text-3xl` or larger); auxiliary source/footer text must be at least **16px** (`text-base` or `text-[16px]`). These floors compensate for the smaller fit-scale a 1200h canvas gets in presentation mode — `text-lg`/`text-xl` (18px/20px) are too small here, do not use them for body copy. |
| 39 | |
| 40 | ## Pattern Quick Lookup |
| 41 | |
| 42 | | Intent | Patterns | |
| 43 | | --- | --- | |
| 44 | | hero / quote | `claim-evidence-band` · `top-center-bottom` | |
| 45 | | concept | `center-hero-orbit` · `quadrant-card` | |
| 46 | | data | `square-data-card` | |
| 47 | | comparison | `stacked-pair` | |
| 48 | |
| 49 | Use `references/catalog.md` for the full structure recipe before writing a new or heavily repaired card. |
| 50 | |
| 51 | ## Square Budget |
| 52 | |
| 53 | Calculate before writing: |
| 54 | |
| 55 | 1. Canvas: usually 1200px x 1200px. |
| 56 | 2. Outer padding: commonly 64-112px per axis. |
| 57 | 3. Title/claim wrapping. |
| 58 | 4. Gaps between zones. |
| 59 | 5. Bottom takeaway/source/reserve: 40-96px when present. |
| 60 | 6. Remaining width and height define the focal zone. |
| 61 | |
| 62 | For charts, reserve a specific frame height and keep the `@ppt-chart-height=N` marker aligned with the `h-[Npx]` class. Prefer one clear chart, hero number, compact bars, rank list, or small 2x2 data matrix. |
| 63 | |
| 64 | ## Repair And Self-check |
| 65 | |
| 66 | - If modules feel equal, promote one block to hero and compress support. |
| 67 | - If the card is top-heavy, move the focal anchor, takeaway, or evidence into the middle/lower area. |
| 68 | - If corners feel accidental, rebalance support around the focal anchor. |
| 69 | - If a table or timeline feels cramped, convert it into a 2x2, ranked list, stacked pair, or compact evidence band. |
| 70 | - If content is sparse, enlarge the core claim or visual anchor instead of adding filler. |
| 71 | - Before delivery, run `references/checklist.md`. |
| 72 |