| 1 | --- |
| 2 | name: standard-4-3-layout-skill |
| 3 | description: Must be read before creating, relaying out, or repairing standard 4:3 Oh My PPT pages. Defines square-ish presentation layout, two-zone and 2x2 structures, chart/table budgeting, column discipline, plus catalog and checklist references for 1600x1200 canvases. |
| 4 | --- |
| 5 | |
| 6 | # Standard 4:3 Layout Skill |
| 7 | |
| 8 | This skill is the layout source of truth for `standard-4-3` pages, usually 1600x1200. |
| 9 | |
| 10 | A 4:3 page is a square-ish presentation canvas. It supports readable talk-track slides, balanced data + insight pairs, compact matrices, and diagrams with generous margins. Its best layouts use depth through hierarchy, not by spreading many columns across the width. |
| 11 | |
| 12 | Deep details live in the references: |
| 13 | |
| 14 | - `references/catalog.md` - named 4:3 presentation patterns and 1600x1200 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 slide should make the audience remember. |
| 22 | 2. **Primary object** - chart, table, matrix, diagram, hero number, conclusion block, image, or comparison. |
| 23 | 3. **Reading path** - title/claim -> primary object -> interpretation/action. |
| 24 | 4. **Density** - low for cover/quote/hero number, medium for most slides, high only for compact tables or matrices. |
| 25 | 5. **Pattern** - choose one structure from `references/catalog.md` before writing HTML. |
| 26 | 6. **Budget** - estimate width and height together; 4:3 failures are often width pressure, not only height pressure. |
| 27 | |
| 28 | Use the canvas dimensions from the prompt. If custom dimensions are supplied, preserve the same square-ish relationships. |
| 29 | |
| 30 | ## Canvas Grammar |
| 31 | |
| 32 | - Favor one-column, two-zone, 2x2, or center + rail structures. |
| 33 | - Two real content columns are usually enough. Three columns work only for short metric chips or labels. |
| 34 | - Keep side margins and gutters generous enough for projection readability. |
| 35 | - Use row-based tables and grouped insight rows when information has several dimensions. |
| 36 | - Use grid/flex document flow for text-bearing modules. Absolute positioning is only for background accents, connector lines, and non-text decoration. |
| 37 | - 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. |
| 38 | |
| 39 | ## Pattern Quick Lookup |
| 40 | |
| 41 | | Intent | Patterns | |
| 42 | | --- | --- | |
| 43 | | main + support | `title-plus-two-zone` · `center-concept-rails` | |
| 44 | | data | `chart-insight-pair` · `compact-table-rows` | |
| 45 | | framework | `matrix-2x2` | |
| 46 | | visual | `diagram-plus-takeaways` | |
| 47 | |
| 48 | Use `references/catalog.md` for the full structure recipe before writing a new or heavily repaired page. |
| 49 | |
| 50 | ## Height And Width Budget |
| 51 | |
| 52 | Calculate before writing: |
| 53 | |
| 54 | 1. Canvas: usually 1600px wide x 1200px tall. |
| 55 | 2. Outer padding: commonly 64-112px total per axis. |
| 56 | 3. Title/subtitle: usually 80-140px after wrapping. |
| 57 | 4. Gaps between zones. |
| 58 | 5. Footer/source/reserve: 40-72px when present. |
| 59 | 6. Remaining area is the body slot. |
| 60 | |
| 61 | Then budget width: subtract horizontal padding and gaps, then check whether each column, chart label, table cell, or matrix quadrant has enough readable width. |
| 62 | |
| 63 | For charts, reserve a specific frame height and keep the `@ppt-chart-height=N` marker aligned with the `h-[Npx]` class. In a two-zone layout, columns share width, not height; each column still uses the same vertical body slot. |
| 64 | |
| 65 | ## Repair And Self-check |
| 66 | |
| 67 | - If the page feels cramped, reduce real content columns or convert to rows / 2x2. |
| 68 | - If hierarchy is flat, promote one object to primary and compress the rest into rails, chips, or rows. |
| 69 | - If a table is clipped, keep only key columns or turn dimensions into grouped insight rows. |
| 70 | - If a timeline or process lacks space, use stacked phases or compact sequence bands. |
| 71 | - If a support zone is mostly empty, shrink it or give the primary object more space. |
| 72 | - Before delivery, run `references/checklist.md`. |
| 73 |