Craft skill

Craft

Generate frontend code that looks like current web — not 2018 editorial, not AI slop. Read references/anti-patterns.md, references/design-principles.md, and references/inspiration.md before generating.

Workflow

1. Re-read the brief

• Quote back the user's request in a comment at the top of your output.
• Everything you build must serve THIS brief. If you catch yourself building something generic, stop and re-read.
• Identify the scale: page or component. Component briefs: inherit the host page's surface (seed the surface only for standalone demos), skip the layout-archetype seed, translate extremes into principles (weight contrast instead of 5rem headings; ratio spacing at a smaller base). The memory test describes the component; the reflow test is its container. Anti-convergence, content, and accessibility rules apply unchanged.

2. Detect context

• Check for existing stylesheets, CSS variables, design tokens, fonts, color palettes.
• If found: extend the existing design language. Do not create a new one.
• An existing design language overrides the anti-convergence rules and the seed procedure. Inherited tokens, fonts, and surfaces — even Inter on cream — are never checklist failures. Document them: /* Inherited: Inter + #fafaf8 from tokens.css — design-system owned */. The checklist judges only the choices YOU make.
• Detect project stack (Vue, React, Svelte, etc.). If none, use plain HTML/CSS/JS.

3. Write content first

• Before any visual design, write the actual copy for the page.
• Headings, body text, labels, CTAs — all specific to THIS product/context.
• No generic filler. Read the copy clichés section in references/anti-patterns.md.
• Test: could you swap the business name and the copy still works? If yes, rewrite.

4. Choose a design direction (design thinking)

Answer four questions before any CSS:

• Purpose — what problem does this interface solve, and for whom?
• Tone — commit to ONE direction and execute it with precision. Bold maximalism and refined minimalism both work: intentionality, not intensity. See the tone menu in references/inspiration.md.
• Constraints — framework, performance, accessibility, existing design language.
• Differentiation — what is the one thing someone will remember?

Then:

• Anchor to a concrete reference — see references/inspiration.md. State it: /* Direction: [reference] */
• Derive variation from the brief, not from mood. Run the seed procedure in references/inspiration.md (product name → surface family, hue region, layout archetype, pairing category). State any hue nudge or category shift in the Direction comment.
• Check the direction against "Dated Signals" in references/anti-patterns.md. Cream + serif headings + sticky sidebar = 2018 web. Output must look like it was built this year.

5. Implement

• Semantic HTML first. Structure = visual design.
• Modern CSS. See references/design-principles.md: oklch, container queries, text-wrap, logical properties, subgrid, scroll-driven animations (with fallbacks).
• Spacing scale with ratios. Uneven jumps (--space-unit × 1, 2, 3.5, 6, 10) — not 1, 2, 3, 4, 5.
• Typography as design. Type must DO something: weight tension (100 next to 900), width axes, monospace for data. Never a Tier-1 font. Every display/primary font you choose gets a /* Font: [why this one for THIS brief] */ comment; for a Tier-2 font it must be a real justification (variable axis exploited, brief-specific reason) — see "Font Convergence Tiers" in references/anti-patterns.md.
• Color. Don't default to cream (#fafaf8) or warm-orange. The surface must be decided — dark, tinted, saturated, or light per the seed or the brief (docs, gov, a11y-first, existing light brand). Use oklch().
• Layout. Conventional structure (hero→features→CTA) is fine — it's proven UX. Templated execution is the failure: every section must be built for THIS content, not pasted from a genre template.
• One surprise. One element a template would never produce — invented for this brief, not lifted verbatim from the Surprise Catalog (it shows kinds of moves, not moves to copy). Name it: /* Surprise: [what and why] */
• Motion. One orchestrated moment per page. Respect prefers-reduced-motion.
• Accessibility. WCAG 2.2 AA minimum. Dynamic widgets: manage focus on item removal; announce async progress via a live region at milestones, not continuously.
• Complexity matches vision. Maximalist = elaborate code, layered effects. Minimalist = restraint and precision in spacing, type, and detail.

6. Self-review (pass/fail)

Fix ALL failures before returning code.

Brief adherence:

• Output matches the user's request (not a different topic)
• Copy is specific to THIS product — cannot be reused for another business
• Layout execution serves THIS content — no section could be pasted into another product's page

Anti-convergence (judges your choices; inherited design-system tokens are exempt but documented):

• No Tier-1 font among your choices; every chosen display/primary font has a /* Font: ... */ comment, with real justification for Tier-2
• Surface is a decision, not the reflex cream/#fafaf8; a light surface is tinted and decided (seed- or brief-motivated)
• No warm-orange accent (#e85d24 and neighbors) as the reflex "not-blue"
• No startup-manifesto template (hero→beliefs/principles→contrast→CTA)
• No article + sticky sidebar as default editorial layout
• No verbatim reuse of an inspiration.md example — if your pairing + hue + surprise could be copy-pasted from another product's output, it's converging
• Page doesn't collapse into a nameable two-word genre template (dark SaaS, glass panel, brutalist poster) — unless that IS the client's shipped brand. If you can name it in two words, push further or mix genres.

Craft check:

• Page looks current (see Contemporary Web in design-principles.md)
• Type scale has real drama (4x+ jumps, weight contrast 100↔900) — at component scale, weight/mono contrast instead of size
• Spacing uses a ratio-based scale, not round multiples of 8
• Colors through custom properties, no magic numbers
• At least one modern CSS technique used naturally
• /* Direction: ... */ and /* Surprise: ... */ comments exist and name something specific

Micro-typography (the details that read as "bug" vs "designed"):

• Decorative icons/emoji next to text have EXPLICIT spacing (margin-inline-end/gap), never a bare whitespace character inside the span (a text space collapses against a glyph's side-bearing, jamming the icon against the label)
• No typographic orphans: a heading never wraps to a lone single word on its last line. Put text-wrap: balance on headings (text-wrap: pretty on body copy), or bind the last two words with  . Check at the widths where the wrap actually happens
• Icons/emoji that are decorative are aria-hidden AND spaced; icons that carry meaning have a text label

Memory test:

• Describe the page (or component) in one sentence without looking at the code. If the description could apply to a different product, redesign. FAIL: "Dark landing page with feature cards." PASS: "The ferry timetable IS the hero — full-bleed rows that tint with the tide level."

Accessibility check:

• Body text contrast >= 4.5:1; large text/UI >= 3:1 (3:1 applies to functional boundaries; purely decorative dividers may be fainter)
• Native semantics, keyboard operable, visible focus, prefers-reduced-motion
• Horizontal scroll / scroll-snap / scroll-driven motion have keyboard access and no-support fallbacks
• Reflows to 320px (components: reflows within their container)

7. Screenshot review (do it whenever a browser is available — essential for interactive components)

1. Render → screenshot → evaluate against anti-patterns. Interact with everything interactive: runtime bugs (paint order, masks, stuck animations) don't show in code review.
2. Caveats: full-page stitched screenshots break animation-timeline: view() math — capture at scroll positions instead. Check above-the-fold elements aren't stuck at their entry-animation state on load.
3. Zoom into the micro-typography at real viewport widths: icons/emoji must not be jammed against their labels, and no heading may orphan a lone word on its last line. Resize to the widths where headings actually wrap (mobile + the awkward mid-widths), since orphans only appear at specific measures.
4. Ask: "Does this look like it was made this year, or in 2018?" If 2018, iterate.