okhp3-replit-design-pipelinelisted

The complete Replit design iteration loop as a single coherent workflow — extract → sandbox → variant → graduate. Use when redesigning, improving, or creating variants of any UI component or page. Covers the "extract first, never approximate" rule, DESIGN subagent brief anatomy, variant labelling conventions on canvas, and the graduation decision gate. Activate for "redesign", "improve this component", "show me options", "create variants", "put on canvas", "graduate this mockup", "design alternatives", or any request that implies iterating on UI — whether the component exists already or is being built from scratch.
OKHP3/skillz · ★ 3 · Web & Frontend · score 72

Install: claude install-skill OKHP3/skillz

# okhp3-replit-design-pipeline **OverKill Hill P³** · [overkillhill.com](https://overkillhill.com) · [github.com/OKHP3](https://github.com/OKHP3) Replit's design canvas exposes five interlocking skills: **mockup-sandbox**, **mockup-extract**, **mockup-graduate**, **design-exploration**, and the **design** (DESIGN subagent) skill. None of them explains the full loop as a decision tree. This skill does. --- ## Scope | In scope | Out of scope | |---|---| | Decision tree: extract vs. build from scratch | Canvas callback schemas — read the canvas skill | | Full pipeline narration: extract → sandbox → variant → graduate | Sandbox setup and URL patterns — read mockup-sandbox | | DESIGN subagent brief anatomy | Import tracing during extraction — read mockup-extract | | Variant labelling on canvas | Production wiring — read mockup-graduate | | Graduation decision gate | Launching subagents — read the design skill | --- ## The decision tree: start here ``` User asks to improve / redesign / create variants / show options ↓ Does the component already exist in the main app codebase? │ YES ───┤ NO ↓ ↓ EXTRACT first BUILD from scratch (mockup-extract) (mockup-sandbox + DESIGN subagent) then iterate ↓ │ Is this a net-new component ↓ the user described, or one Proceed to the ag