| 1 | --- |
| 2 | name: vertical-3-4-layout-skill |
| 3 | description: Must be read before creating, relaying out, or repairing 3:4 vertical Oh My PPT pages. Defines poster-card layout, focal hierarchy, vertical section planning, evidence grouping, compact two-column pockets, chart/list budgeting, plus catalog and checklist references for 1200x1600 canvases. |
| 4 | --- |
| 5 | |
| 6 | # Vertical 3:4 Layout Skill |
| 7 | |
| 8 | This skill is the layout source of truth for `vertical-3-4` pages, usually 1200x1600. |
| 9 | |
| 10 | A 3:4 page is a vertical poster-card canvas. It has enough width for rich information cards and compact two-column pockets, but its reading path is still vertical. The layout should feel like a poster with one strong anchor and grouped evidence, not a long feed of equal blocks. |
| 11 | |
| 12 | **This canvas is a poster card, not a compressed slide.** When the source content is dense or "needs to be summarized", the model MUST summarize harder here, not cram the full outline into one page. A 3:4 poster that tries to hold a 16:9 deck's worth of content will overflow no matter how the fonts are tuned. |
| 13 | |
| 14 | Deep details live in the references: |
| 15 | |
| 16 | - `references/catalog.md` - named poster-card patterns and 1200x1600 zone skeletons. |
| 17 | - `references/checklist.md` - P0/P1/P2 structural self-check for delivery. |
| 18 | |
| 19 | ## Preflight |
| 20 | |
| 21 | Before writing HTML, decide: |
| 22 | |
| 23 | 1. **Message** - the one sentence this card should make the viewer remember. |
| 24 | 2. **Focal anchor** - title block, hero metric, chart, image/diagram, framework, or conclusion. |
| 25 | 3. **Support groups** - hard cap **3-4 support bands** (or **5-6 compact rows/chips** for grouped facts). Anything beyond MUST be cut, merged, or repackaged as one hero object — never squeezed in by shrinking fonts. |
| 26 | 4. **Reading path** - top claim -> main proof/value -> bottom synthesis/source. |
| 27 | 5. **Density** - low-medium for poster claims, medium for most information cards, high only for compact lists or matrices. Never use "high density" as a reason to exceed the 4-band cap. |
| 28 | 6. **Pattern** - choose one structure from `references/catalog.md` before writing HTML. |
| 29 | 7. **Budget** - estimate hero zone, main proof zone, bottom synthesis, gaps, and reserve. |
| 30 | |
| 31 | Use the canvas dimensions from the prompt. If custom dimensions are supplied, preserve the same vertical poster relationships. |
| 32 | |
| 33 | ## Canvas Grammar |
| 34 | |
| 35 | - Keep one visual or conceptual anchor larger than the rest. |
| 36 | - Use vertical sections, but group small facts into bands, rows, or chips so the card does not become a long list. |
| 37 | - A compact two-column pocket is allowed inside one section when each item remains readable. |
| 38 | - Let the bottom carry synthesis, implication, source, or a final evidence band. |
| 39 | - Use grid/flex document flow for text-bearing modules. Absolute positioning is only for background accents, connector lines, and non-text decoration. |
| 40 | - **Capacity ceiling (hard)**: per page = 1 focal anchor + up to 4 support bands (or 6 compact rows/chips) + 1 bottom synthesis. A "band" is a labeled section, a comparison row group, an evidence cluster, or a step group — not a single bullet. If the outline gives you more points than this ceiling, the page agent resolves overload IN-PAGE by compressing/merging/rewriting into fewer denser bands; never by shrinking font below the floors, never by splitting into multiple pages. |
| 41 | - **Vertical fill (hard)**: the page must use the full canvas height with no accidental top-stack or bottom gap. The main content wrapper MUST be `flex flex-col` with at least one `flex-1` / `flex-grow` child absorbing leftover height (typically the support group or the bottom synthesis), OR use `justify-between` to spread focal / support / synthesis across the canvas. Never set fixed top padding (`pt-[NNpx]`) and let content stack from the top while the bottom is empty. If content is shorter than the canvas, the `flex-1` block expands; if longer, you have exceeded the capacity ceiling — compress. |
| 42 | - Body copy, ordinary labels, and card descriptions must be at least **32px** (Tailwind `text-3xl` is 30px — too small, use `text-[32px]` or `style="font-size:32px"`); headings must be at least **43px** (`text-[43px]` or larger, `text-4xl`/`text-5xl`); auxiliary source/footer text must be at least **21px** (`text-[21px]` or `text-xl`). These floors compensate for the much smaller fit-scale a 1600h canvas gets on a landscape presentation screen — default `text-lg`/`text-xl` (18px/20px) will be unreadable, do not use them on this canvas. |
| 43 | |
| 44 | ## Pattern Quick Lookup |
| 45 | |
| 46 | | Intent | Patterns | |
| 47 | | --- | --- | |
| 48 | | poster claim | `poster-hero-proof` | |
| 49 | | metric / data | `hero-metric-explainer` · `data-card` | |
| 50 | | process | `vertical-process` | |
| 51 | | comparison | `comparison-rows` | |
| 52 | | evidence | `evidence-band-stack` · `two-column-pocket` | |
| 53 | |
| 54 | Use `references/catalog.md` for the full structure recipe before writing a new or heavily repaired card. |
| 55 | |
| 56 | ## Poster Budget |
| 57 | |
| 58 | Calculate before writing: |
| 59 | |
| 60 | 1. Canvas height: usually 1600px. |
| 61 | 2. Outer vertical padding: commonly 72-128px total. |
| 62 | 3. Hero/title zone: usually 240-420px depending on focal scale. |
| 63 | 4. Gaps between sections. |
| 64 | 5. Bottom conclusion/source/reserve: 80-240px when present. |
| 65 | 6. Remaining height is the main proof/value zone. |
| 66 | |
| 67 | Canvas width is usually 1200px. After horizontal padding, use one full-width column or one compact two-column pocket. |
| 68 | |
| 69 | 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 metric, compact bars, rank list, or short table. |
| 70 | |
| 71 | ## Repair And Self-check |
| 72 | |
| 73 | - If the card is just a stack of cards, introduce a hero/focal block. |
| 74 | - If the bottom is empty, add synthesis, implication, source, or a final evidence band. |
| 75 | - If there are too many small facts, group them into bands or chips under shared labels. |
| 76 | - **If the outline oversupply exceeds the 4-band ceiling, resolve overload in this priority: (1) summarize and compress — say the same information in fewer words (long descriptions become short phrases, sentences become single data points; remove water, not information), (2) merge related points into one band with a shared label, (3) rewrite a long list as one hero metric + one-line interpretation, (4) switch pattern to a denser format (e.g. comparison rows, ranked chips). Never resolve overload by going below the font floors or by exceeding the canvas height.** |
| 77 | - If a two-column pocket feels cramped, return to full-width rows. |
| 78 | - If a chart/table is hard to read, convert it to a hero metric, rank list, compact bars, or grouped rows. |
| 79 | - Before delivery, run `references/checklist.md`. |
| 80 |