| name | square-1-1-layout-skill |
| 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. |
Square 1:1 Layout Skill
This skill is the layout source of truth for square-1-1 pages, usually 1200x1200.
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.
Deep details live in the references:
references/catalog.md - named square-card patterns and 1200x1200 zone skeletons.references/checklist.md - P0/P1/P2 structural self-check for delivery.
Preflight
Before writing HTML, decide:
- Message - the one sentence this card should make the viewer remember.
- Focal anchor - claim, quote, hero number, chart, image, concept, or matrix.
- Support shape - orbit chips, 2x2 cells, evidence band, stacked pair, or short explanation.
- Reading path - center first, then support, then takeaway/source.
- Density - low for quote/claim, medium for most cards, high only for compact 2x2 or ranked list.
- Pattern - choose one structure from
references/catalog.md before writing HTML.
- Balance check - inspect top/bottom/left/right margins and corner weight.
Use the canvas dimensions from the prompt. If custom dimensions are supplied, preserve square balance.
Canvas Grammar
- Start with one focal anchor. A square card needs a dominant center of gravity.
- Keep margins visually balanced on all four sides.
- Use at most two real columns or a 2x2 grid.
- Corners matter. Fill them only with meaningful support, not decorative leftovers.
- Use grid/flex document flow for text-bearing modules. Absolute positioning is only for background accents, connector lines, and non-text decoration.
- 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.
Pattern Quick Lookup
| Intent | Patterns |
|---|
| hero / quote | claim-evidence-band · top-center-bottom |
| concept | center-hero-orbit · quadrant-card |
| data | square-data-card |
| comparison | stacked-pair |
Use references/catalog.md for the full structure recipe before writing a new or heavily repaired card.
Square Budget
Calculate before writing:
- Canvas: usually 1200px x 1200px.
- Outer padding: commonly 64-112px per axis.
- Title/claim wrapping.
- Gaps between zones.
- Bottom takeaway/source/reserve: 40-96px when present.
- Remaining width and height define the focal zone.
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.
Repair And Self-check
- If modules feel equal, promote one block to hero and compress support.
- If the card is top-heavy, move the focal anchor, takeaway, or evidence into the middle/lower area.
- If corners feel accidental, rebalance support around the focal anchor.
- If a table or timeline feels cramped, convert it into a 2x2, ranked list, stacked pair, or compact evidence band.
- If content is sparse, enlarge the core claim or visual anchor instead of adding filler.
- Before delivery, run
references/checklist.md.
