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.mdsays 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.