ui-craft-editorial

Name: ui-craft-editorial
Author: educlopez

206stars8forks

How to install ui-craft-editorial?

educlopez/ui-craft/ui-craft-editorial

$npx -y skills add educlopez/ui-craft --skill ui-craft-editorial

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	# UI Craft — Editorial
4
5	Pre-committed editorial style: magazine, long-form, content-first. Typography carries the hierarchy; layout serves the reading experience.
6
7	## Knobs (locked)
8
9	- CRAFT_LEVEL = 9 — editorial typography only works at high refinement; Polish Pass mandatory.
10	- MOTION_INTENSITY = 4 — reading-aware: fade on reveal, link hovers, no entrance stagger.
11	- VISUAL_DENSITY = 3 — wide reading column, generous vertical rhythm, 1 item per row for features.
12
13	Do not re-ask these in Discovery. Confirm accent + serif/sans pairing only.
14
15	## Style anchors
16
17	- Serif display for headings + humanist body sans/serif for reading.
18	- Baseline grid feel. `leading-relaxed` (1.7) on body.
19	- Wide reading column `max-w-[65ch]`. Generous vertical rhythm.
20	- Accent used for emphasis — pull quotes, drop caps, link underlines — not decoration.
21	- OpenType features ON: small caps, ligatures, stylistic sets, tabular figures where relevant.
22	- Asymmetric, text-heavy heroes. Featured image large.
23	- Motion respects reading: fades only, never pulls the eye away.
24	- Black text, warm/ivory canvas, one accent. Color is a voice, not a decoration.
25
26	## Base rules (inherited)
27
28	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.
29
30	## Style-specific overrides
31
32	Typography (the whole point)
33
34	- Display: Playfair Display, Fraunces, Lora, or Source Serif 4 for headings and pull quotes.
35	- 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.
36	- Max two families: one display + one body.
37	- Headings: `text-wrap: balance`, `font-optical-sizing: auto`, tracking near 0 or slightly negative on large sizes.
38	- Body: `text-wrap: pretty`, `line-height: 1.7`, `font-feature-settings: "liga", "kern"`.
39	- 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>; }`.
40	- Small caps via `font-variant-caps: small-caps` for section labels, bylines.
41	- Opt-in OpenType: `font-feature-settings: "ss01", "cv11"` when the chosen font supports them.
42	- Pull quotes: serif, large (1.75-2.25em), one accent color, short rule above.
43
44	Color
45
46	- Canvas: ivory or warm white — `oklch(98% 0.01 85)` — not pure `#fff`.
47	- Text: `oklch(18% 0.01 40)` warm near-black.
48	- Restricted palette: black, ivory/warm white, ONE accent. That's it.
49	- Accent applied to: drop cap, pull quote, inline link underline, section rule. Not buttons that don't need it.
50
51	Spacing & layout
52
53	- Reading column: `max-w-[65ch]` for body; hero and featured image can break out to `max-w-5xl`.
54	- Vertical rhythm on body: paragraph spacing = line-height × 0.6 minimum.
55	- Asymmetric heroes: left-aligned display headline + byline + featured image below or offset.
56	- Section breaks: centered ornament or a short rule, not a full-width divider.
57
58	Motion
59
60	- Fade on scroll reveal for hero/featured image only, 300-400ms ease-out.
61	- Inline link hover: underline-offset grows 1px, color shifts to accent, 120ms.
62	- No entrance stagger, no parallax, no page transitions that fight the reading flow.
63	- Honor `prefers-reduced-motion` — cut all reveals.
64
65	Content components
66
67	- Byline: small caps, tracking-wide, secondary text color.
68	- Dateline + read time: tabular-nums, separated by a bullet `·`.
69	- Inline images: full-width or breakout beyond column, with italic serif caption underneath.
70	- Blockquote: left border in accent, serif italic, `max-w-[55ch]`.
71
72	## Reference files to read first
73
74	Load these from `../ui-craft/references/`:
75
76	- `typography.md` — the primary reference for this style
77	- `layout.md` — reading column, rhythm, hierarchy
78	- `color.md` — warm palette, accent discipline
79	- `copy.md` — editorial voice, headings, empty states
80
81	Skip `dashboard.md`, `sound.md` unless relevant.
82
83	## Anti-patterns for THIS style
84
85	- Inter, Geist, DM Sans as primary body. They signal product UI, not editorial.
86	- Three font families. Always one display + one body.
87	- Pure `#fff` canvas. Warm it.
88	- Tight `leading-tight` on body copy. Reading needs 1.6-1.8.
89	- Colored pull quote backgrounds, gradient text on headlines, emoji in section rules.
90	- Scroll-triggered stagger or parallax — breaks reading flow.
91	- Card grids for articles — use stacked list with thumbnail + dek.
92	- Sans-serif display headlines by default. If you need san

People who liked this also viewed

6 picks

Type

ui-craft-editorial

206stars8forks

View on GitHub

How to install ui-craft-editorial?

educlopez/ui-craft/ui-craft-editorial

$npx -y skills add educlopez/ui-craft --skill ui-craft-editorial

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	# UI Craft — Editorial
4
5	Pre-committed editorial style: magazine, long-form, content-first. Typography carries the hierarchy; layout serves the reading experience.
6
7	## Knobs (locked)
8
9	- CRAFT_LEVEL = 9 — editorial typography only works at high refinement; Polish Pass mandatory.
10	- MOTION_INTENSITY = 4 — reading-aware: fade on reveal, link hovers, no entrance stagger.
11	- VISUAL_DENSITY = 3 — wide reading column, generous vertical rhythm, 1 item per row for features.
12
13	Do not re-ask these in Discovery. Confirm accent + serif/sans pairing only.
14
15	## Style anchors
16
17	- Serif display for headings + humanist body sans/serif for reading.
18	- Baseline grid feel. `leading-relaxed` (1.7) on body.
19	- Wide reading column `max-w-[65ch]`. Generous vertical rhythm.
20	- Accent used for emphasis — pull quotes, drop caps, link underlines — not decoration.
21	- OpenType features ON: small caps, ligatures, stylistic sets, tabular figures where relevant.
22	- Asymmetric, text-heavy heroes. Featured image large.
23	- Motion respects reading: fades only, never pulls the eye away.
24	- Black text, warm/ivory canvas, one accent. Color is a voice, not a decoration.
25
26	## Base rules (inherited)
27
28	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.
29
30	## Style-specific overrides
31
32	Typography (the whole point)
33
34	- Display: Playfair Display, Fraunces, Lora, or Source Serif 4 for headings and pull quotes.
35	- 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.
36	- Max two families: one display + one body.
37	- Headings: `text-wrap: balance`, `font-optical-sizing: auto`, tracking near 0 or slightly negative on large sizes.
38	- Body: `text-wrap: pretty`, `line-height: 1.7`, `font-feature-settings: "liga", "kern"`.
39	- 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>; }`.
40	- Small caps via `font-variant-caps: small-caps` for section labels, bylines.
41	- Opt-in OpenType: `font-feature-settings: "ss01", "cv11"` when the chosen font supports them.
42	- Pull quotes: serif, large (1.75-2.25em), one accent color, short rule above.
43
44	Color
45
46	- Canvas: ivory or warm white — `oklch(98% 0.01 85)` — not pure `#fff`.
47	- Text: `oklch(18% 0.01 40)` warm near-black.
48	- Restricted palette: black, ivory/warm white, ONE accent. That's it.
49	- Accent applied to: drop cap, pull quote, inline link underline, section rule. Not buttons that don't need it.
50
51	Spacing & layout
52
53	- Reading column: `max-w-[65ch]` for body; hero and featured image can break out to `max-w-5xl`.
54	- Vertical rhythm on body: paragraph spacing = line-height × 0.6 minimum.
55	- Asymmetric heroes: left-aligned display headline + byline + featured image below or offset.
56	- Section breaks: centered ornament or a short rule, not a full-width divider.
57
58	Motion
59
60	- Fade on scroll reveal for hero/featured image only, 300-400ms ease-out.
61	- Inline link hover: underline-offset grows 1px, color shifts to accent, 120ms.
62	- No entrance stagger, no parallax, no page transitions that fight the reading flow.
63	- Honor `prefers-reduced-motion` — cut all reveals.
64
65	Content components
66
67	- Byline: small caps, tracking-wide, secondary text color.
68	- Dateline + read time: tabular-nums, separated by a bullet `·`.
69	- Inline images: full-width or breakout beyond column, with italic serif caption underneath.
70	- Blockquote: left border in accent, serif italic, `max-w-[55ch]`.
71
72	## Reference files to read first
73
74	Load these from `../ui-craft/references/`:
75
76	- `typography.md` — the primary reference for this style
77	- `layout.md` — reading column, rhythm, hierarchy
78	- `color.md` — warm palette, accent discipline
79	- `copy.md` — editorial voice, headings, empty states
80
81	Skip `dashboard.md`, `sound.md` unless relevant.
82
83	## Anti-patterns for THIS style
84
85	- Inter, Geist, DM Sans as primary body. They signal product UI, not editorial.
86	- Three font families. Always one display + one body.
87	- Pure `#fff` canvas. Warm it.
88	- Tight `leading-tight` on body copy. Reading needs 1.6-1.8.
89	- Colored pull quote backgrounds, gradient text on headlines, emoji in section rules.
90	- Scroll-triggered stagger or parallax — breaks reading flow.
91	- Card grids for articles — use stacked list with thumbnail + dek.
92	- Sans-serif display headlines by default. If you need san

People who liked this also viewed

6 picks

Type