jp-frontend-design

JP Frontend Design

Overview

Unconstrained generation regresses to the statistical mean of every UI ever made, and a ban only moves the model to the next default. Distinctiveness is decided in steps 0 to 2 (direction and spec), written down, and protected by everything after: the critique loop removes defects, it never invents a direction. Long-form material lives in references/, the evidence in research/. Load a craft skill (Anthropic's frontend-design) beside this one if available, and a dataviz skill before any chart. This skill governs the ORDER of work.

The sequence (in order; no component code before step 2 exists)

1. Read what exists. Search CLAUDE.md, tokens/theme files, component styles, DESIGN.md, and the screens closest to the ask; lift exact values. Precedence: the user's words, then the existing system, then this skill's choices. An existing system means step 1 extends, never invents beside it. Preflight, before any file changes: confirm (a) browser automation that can render, capture, AND script the page (computed styles, a Tab walk, axe-core); a screenshot tool alone cannot run round 0; (b) an evidence directory (under clodex the run directory; standalone, a directory outside the repo tree, named in the final record); (c) an independent context for step 4's critic and judges. Any missing: stop and say so. Scope guard: a tweak inside an existing system (one component, one value) skips the directions and the loop. Grep the component's and the token's usages first; one rendered elsewhere is a shared change and every consuming surface gets the before/after treatment. Then: round 0 on the touched page BEFORE the edit (the baseline), the edit, round 0 again; baseline failures are pre-existing and recorded, only new ones block; a new failure that survives repair reverts the edit. A fixture-backed eval runs after the edit too.

2. Brief, references, then directions. Pin the subject, the audience, the surface's single job, and its register: operate (tools, dashboards), read (docs, long form), persuade (marketing), experience (play, art). If references are given, analyze them NOW, before any direction exists: relations, not pixels (hierarchy, density, rhythm, type character, components); global profile then regions; computed styles when a URL exists; pixel-read hexes are hypotheses. Findings seed the directions; then discard the image. Analyze, never clone. Then propose 3 or 4 directions, each one spec line (ground hex / accent hex / display face + body face / rationale / the axis it varies on) spanning at least two material families from the subject's own world, one of them the conventional category default, labelled as the exit and never recommended. Slop-test each (would a generic version of this ask produce the same direction?) and pair every rejected default with its replacement (references/slop-tells.md). Render the choice, never prose it: open references/swatch.html once per direction (values set through the browser at render time; capture 1400x900 into the evidence directory; an accent pair below 4.5:1 or a fallback font is never captured); the picker chooses from renders. Skip the directions when the ask already names faces, colors, or a brand, or on the scope-guarded tweak; the system it keeps IS the direction. Autonomous: commit to one, state the assumption in one line, ship 1 or 2 low-fi alternates beside the deliverable. Under clodex the pick happens at the direction checkpoint, by the user or a standing mandate; never silently by the builder.