ui-craft-editorial — Claude Code skill: what it does, how to install

---
name: ui-craft-editorial
description: "Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide reading column, drop caps, OpenType. Trigger on: editorial, magazine, long-form, blog, Medium-like, Substack-like."
argument-hint: "[action: build|review|polish] [target]"
---

# UI Craft — Editorial

Pre-committed editorial style: magazine, long-form, content-first. Typography carries the hierarchy; layout serves the reading experience.

## Knobs (locked)

- **CRAFT_LEVEL = 9** — editorial typography only works at high refinement; Polish Pass mandatory.
- **MOTION_INTENSITY = 4** — reading-aware: fade on reveal, link hovers, no entrance stagger.
- **VISUAL_DENSITY = 3** — wide reading column, generous vertical rhythm, 1 item per row for features.

Do not re-ask these in Discovery. Confirm accent + serif/sans pairing only.

## Style anchors

- Serif display for headings + humanist body sans/serif for reading.
- Baseline grid feel. `leading-relaxed` (1.7) on body.
- Wide reading column `max-w-[65ch]`. Generous vertical rhythm.
- Accent used for emphasis — pull quotes, drop caps, link underlines — not decoration.
- OpenType features ON: small caps, ligatures, stylistic sets, tabular figures where relevant.
- Asymmetric, text-heavy heroes. Featured image large.
- Motion respects reading: fades only, never pulls the eye away.
- Black text, warm/ivory canvas, one accent. Color is a voice, not a decoration.

## Base rules (inherited)

All rules in `../ui-craft/SKILL.md` apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.

## Style-specific overrides

**Typography (the whole point)**

- Display: Playfair Display, Fraunces, Lora, or Source Serif 4 for headings and pull quotes.
- Body: Alegreya, Source Sans 3, ITC Charter, or a humanist pairing. Do NOT use Inter as primary body — it reads as product UI, not editorial.
- Max two families: one display + one body.
- Headings: `text-wrap: balance`, `font-optical-sizing: auto`, tracking near 0 or slightly negative on large sizes.
- Body: `text-wrap: pretty`, `line-height: 1.7`, `font-feature-settings: "liga", "kern"`.
- Drop caps via `p:first-of-type::first-letter { float: left; font-size: 4.5em; line-height: 0.85; padding: 6px 10px 0 0; font-family: <display>; }`.
- Small caps via `font-variant-caps: small-caps` for section labels, bylines.
- Opt-in OpenType: `font-feature-settings: "ss01", "cv11"` when the chosen font supports them.
- Pull quotes: serif, large (1.75-2.25em), one accent color, short rule above.

**Color**

- Canvas: ivory or warm white — `oklch(98% 0.01 85)` — not pure `#fff`.
- Text: `oklch(18% 0.01 40)` warm near-black.
- Restricted palette: black, ivory/warm white, ONE accent. That's it.
- Accent applied to: drop cap, pull quote, inline link underline, section rule. Not buttons that don't need it.

**Spacing & layout**

- Reading column: `max-w-[65ch]` for body; hero and featured image can break out to `max-w-5xl`.
- Vertical rhythm on body: paragraph spacing = line-height × 0.6 minimum.
- Asymmetric heroes: left-aligned display headline + byline + featured image below or offset.
- Section breaks: centered ornament or a short rule, not a full-width divider.

**Motion**

- Fade on scroll reveal for hero/featured image only, 300-400ms ease-out.
- Inline link hover: underline-offset grows 1px, color shifts to accent, 120ms.
- No entrance stagger, no parallax, no page transitions that fight the reading flow.
- Honor `prefers-reduced-motion` — cut all reveals.

**Content components**

- Byline: small caps, tracking-wide, secondary text color.
- Dateline + read time: tabular-nums, separated by a bullet `·`.
- Inline images: full-width or breakout beyond column, with italic serif caption underneath.
- Blockquote: left border in accent, serif italic, `max-w-[55ch]`.

## Reference files to read first

Load these from `../ui-craft/references/`:

- `typography.md` — the primary reference for this style
- `layout.md` — reading column, rhythm, hierarchy
- `color.md` — warm palette, accent discipline
- `copy.md` — editorial voice, headings, empty states

Skip `dashboard.md`, `sound.md` unless relevant.

## Anti-patterns for THIS style

- Inter, Geist, DM Sans as primary body. They signal product UI, not editorial.
- Three font families. Always one display + one body.
- Pure `#fff` canvas. Warm it.
- Tight `leading-tight` on body copy. Reading needs 1.6-1.8.
- Colored pull quote backgrounds, gradient text on headlines, emoji in section rules.
- Scroll-triggered stagger or parallax — breaks reading flow.
- Card grids for articles — use stacked list with thumbnail + dek.
- Sans-serif display headlines by default. If you need sans display, the user probably wants minimal variant.
- Uppercase headlines. Sentence case, always (small caps for bylines is the exception).
- CTAs with heavy pill backgrounds — prefer inline underlined links in the serif voice.