Frontend design flow

Frontend & Design Flow

A router, not a monolith. This skill doesn't do the design work itself — it decides which specialized skill runs when, and enforces the disciplines that keep output from looking AI-generated. The actual craft lives in the underlying skills listed in references/skill-registry.md.

Operating principles

• Route, don't reinvent. Every stage below names the skill that owns it. If that skill isn't installed, references/skill-registry.md says where to get it. Don't reimplement a skill's job inline.
• Research before pixels. Never open a blank canvas cold. Stage 1 is a standing prerequisite for any real design task.
• On-demand, not automatic. This is invoked deliberately (by name / slash command). It installs no hooks and triggers nothing on its own. Replication steps (clone / extract) are proposed; the user pulls the trigger.
• Anti-slop is a gate, not a suggestion. Stage 3 runs before "done." Failing a P0 anti-slop rule is a regression, not a taste preference.
• Verify with a separate pass. The skill that produced the UI does not approve it. Review is a distinct lane (design-review / a fresh reviewer).

The flow

        ┌── Stage 4: STACK & VOCAB (reference layer — consulted throughout) ──┐
        │  tech-stack.md · design-vocabulary.md                               │
        └─────────────────────────────────────────────────────────────────────┘
IDEA ─▶ Stage 1: RESEARCH ─▶ Stage 2: OUTPUT ─▶ Stage 3: REVIEW ─▶ SHIP
        (research + clone      (direction +        (anti-slop +
         decision)             hi-fi build)        a11y gate)

Stage 1 — Research + clone decision → references/stage-1-research-and-clone.md

Before designing, run one round of competitor motion research, then decide the replication path (inspiration only / whole-site clone / single-effect extraction). Owns the decision tree that chains deep-research → web-clone → web-shader-extractor.

Stage 2 — Design output + direction → references/stage-2-design-output.md

Produce the hi-fi prototype / page / component. When the brief is vague, enter design-direction advisor mode first. Routes to huashu-design / frontend-design and their satellites (motion, color, charts, slides, algorithmic art).

Stage 3 — Review + anti-slop gate → references/stage-3-review-anti-slop.md

Run the seven cardinal sins anti-slop checklist, animation-discipline numbers, accessibility baseline, and a separate design-review pass. This is the ship gate.

Stage 4 — Stack + vocabulary → references/stage-4-stack-and-vocab.md

The reference layer, not a sequential step. Pick libraries from tech-stack.md; name mechanisms (not symptoms) using design-vocabulary.md when writing prompts or reviewing. Consulted during 1–3, never skipped when a dependency or a vague description shows up.

Quick routing table

The user is…	Go to	Primary skill(s)
Starting any real UI task	Stage 1 first	deep-research
"Replicate this whole site"	Stage 1 → clone branch	web-clone
"Grab just that background effect"	Stage 1 → extract branch	web-shader-extractor
"Build a prototype / page / component"	Stage 2	huashu-design, frontend-design
"I don't know what style I want"	Stage 2, advisor mode	huashu-design, creative-director
"Make it look good / less AI"	Stage 3	design-review, anti-slop checklist
"What should I use for X?"	Stage 4	tech-stack.md
"What's this effect called?"	Stage 4	animation-vocabulary

Notes on provenance

This skill is an orchestration layer authored to sequence a set of independently-owned skills. It bundles only original/curated reference material (references/design-vocabulary.md, references/tech-stack.md, and the stage guides). Every third-party skill it routes to is credited with its source in references/skill-registry.md and is not redistributed here — install them separately. See README.md for the full attribution list.