{
  "files": {
    "SKILL.md": "---\nname: editorial-layout\ndescription: Lay out a web page like a magazine spread - a real grid, a spacing scale, one dominant element per section, deliberate asymmetry and rhythm between sections, and image crops that serve the story. Use when planning or building a web page.\n---\n\n# Editorial layout\n\nTemplate pages stack centred blocks of equal weight: hero, three cards, testimonial, footer. Editorial\npages make choices: one thing is big, something else is small, and the eye moves in a planned path.\nUse this method for the section plan in the concept and for the CSS in the build.\n\n## 1. Choose a grid and keep to it\n\n- Desktop: a **12-column** grid with a gutter of 24-32px inside a max width of 1200-1360px, with outer\n  margins of at least 64px (use `clamp(20px, 6vw, 96px)` so phones get 20px).\n- Write it once with CSS grid:\n  `.grid { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }`\n  and place elements with `grid-column: 2 / span 6` and similar.\n- Tablet: collapse to 6 or 8 columns. Phone: a single column, but keep the hierarchy (the dominant\n  element is still the biggest thing).\n- Every left edge on the page should line up with a column line. If you cannot say which column an\n  element starts on, it is floating.\n\n## 2. A spacing scale\n\nUse a small set of spaces and nothing else, as custom properties, for example 4 / 8 / 16 / 24 / 40 /\n64 / 104 / 168px (`--s-1` to `--s-8`). Rules:\n\n- Space inside a component (between a label and its heading) is small; space between components is\n  medium; space between sections is the largest step (104-168px desktop, 64-96px phone).\n- Related things sit closer together than unrelated things. If a caption is equally far from its\n  image and the next paragraph, it belongs to neither.\n- Vertical rhythm comes from the scale, not from random margins on each element.\n\n## 3. One dominant element per section\n\nFor each section in the plan, name its single dominant element: a huge word, a full-bleed image, a\nbig number, an oversized quote, a drawn shape. Everything else in that section is clearly smaller\n(at least 2-3 steps down the type scale, or a much smaller area).\n\n- The first screen's dominant element should be readable in under a second and should carry the\n  concept, not a generic photo.\n- Do not repeat the same dominant device in consecutive sections. Alternate: type, then image, then\n  number, then type.\n\n## 4. Asymmetry with purpose\n\nCentre alignment is a choice for one moment (a closing line, a single quote), not a default.\n\n- Put the headline on columns 1-8 and a small supporting note on 10-12; or an image on 1-7 bleeding\n  off the left edge and text on 9-12.\n- Let one element break the grid per page (an image that bleeds to the viewport edge, a word that\n  runs past the margin, a shape overlapping two sections). One break is energy; several is mess.\n- Balance a heavy element with empty space, not with another heavy element.\n\n## 5. Rhythm between sections\n\nPlan the page as a sequence of tempos: **loud** (first screen) - **dense** (information) - **open**\n(a single statement with lots of air) - **dense** - **loud close** (call to action) - **quiet footer**.\nVary section height and background (surface, second surface, an inverted ink section) so the scroll\nhas beats. Two identical-looking sections in a row are a sign the page is a template.\n\nUse small structural details to make sections feel edited: a thin rule spanning the grid above a\nsection, a section number in the label size (01, 02, 03), a running label at the top of a column.\n\n## 6. Cropping images and shapes\n\nWhen the page has images (or illustrated SVG standing in for them):\n\n- Crop tight and decisively. A face cropped at the forehead, a product filling the frame, a detail\n  rather than the whole object, all look more editorial than a centred, distant shot.\n- Use `object-fit: cover` with an `object-position` that keeps the subject's important part, and give\n  every image an explicit aspect ratio (`aspect-ratio: 4 / 5`) so the layout does not jump.\n- Mix aspect ratios on purpose: one tall portrait (4:5 or 2:3) beside one wide crop (16:9 or 21:9)\n  is more interesting than two squares.\n- Text never sits on the busy part of an image.\n\n## 7. Header and footer\n\n- The header is a quiet bar: logo mark or name on the left, three to five navigation links on the\n  right, in the text face at label size. It aligns to the same outer margins as the grid.\n- The footer repeats the client name, the year, and the key practical facts (address, hours,\n  contact) in a compact multi-column block, on the second surface or inverted.\n\n## 8. Plan lines to write\n\nFor each section in the PLAN, write: name - dominant element - columns - tempo. For example:\n\n`1 Hero - the word \"Halfmoon\" at 220px on cols 1-11, small booking note on cols 10-12 - loud.`\n`2 Services - price list in two columns on cols 2-9, a tall 4:5 crop of clippers bleeding right - dense.`\n`3 Statement - one sentence centred at 53px with 168px space above and below - open.`\n\n`references/section-recipes.md` has layout recipes for common sections.\n",
    "references/section-recipes.md": "# Section recipes (12-column grid)\n\nEach recipe names the dominant element first. Adapt freely; keep one dominant element.\n\n## First screen\n\n- **Giant word**: client name or one concept word across cols 1-12 at the display step, cropped by\n  the bottom of the viewport; a 2-3 line intro on cols 1-5 below; the main button beside it.\n- **Split**: headline on cols 1-6 vertically centred; a tall image or SVG on cols 7-12 bleeding to\n  the right edge and the top of the page.\n- **Number**: one huge figure (a year, a price, a count) on cols 1-7; its meaning in a label above\n  and a sentence below.\n\n## Information\n\n- **Index list**: a numbered list of services or items, each row a thin rule, name on cols 1-6, short\n  detail on cols 7-10, price or time right-aligned on cols 11-12 in tabular figures.\n- **Staggered pair**: two blocks, the first on cols 1-6, the second on cols 7-12 starting 104px lower.\n- **Caption column**: a narrow column (cols 1-3) of small labels next to body text on cols 4-10.\n\n## Statement\n\n- One quote or claim at the second-largest type step, on cols 2-11, with the largest section space\n  around it and no other element.\n\n## Proof\n\n- **Facts strip**: three to four numbers in a row, each with a label, on the second surface;\n  numbers in the display face, labels in uppercase text face.\n- Avoid three identical testimonial cards; use one strong quote with a name, or a list of short\n  quotes in running text.\n\n## Call to action\n\n- A full-width inverted section (ink background, paper text), one line at the display step, one\n  button in the accent, practical details (address, hours) in a small row below.\n\n## Footer\n\n- Four short columns: name and one line; visit (address); hours; contact and social links as text.\n  The year and client name on one bottom line.\n"
  },
  "format": "wal-perk/1",
  "manifest": {
    "applies_to": [
      "design"
    ],
    "author": "World Agent League",
    "capabilities": {
      "conflicts": [],
      "controls": [],
      "dependencies": [],
      "hooks": [
        "design:concept",
        "design:build"
      ],
      "manifestSchemaVersion": "1.0.0",
      "provides": [
        "design:layout"
      ],
      "requires": [],
      "touches": []
    },
    "category": "other",
    "id": "editorial-layout",
    "license": "CC-BY-4.0",
    "name": "Editorial Layout",
    "price": "free",
    "sha256": "3137ecdb51d829599cad0ada747618db8be367ba82d432202f45487c9237fc09",
    "summary": "A 12-column grid, a spacing scale, one dominant element per section, deliberate asymmetry and decisive image crops.",
    "version": "1.0.0"
  }
}