web-prototype

npx skills add nexu-io/open-design --skill web-prototype --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# Web Prototype Skill Produce a single, self-contained HTML prototype using the bundled seed and layout library — **not** by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it. ## Resource map ``` web-prototype/ ├── SKILL.md ← you're reading this ├── assets/ │ └── template.html ← seed: tokens + class system + chrome (READ FIRST) └── references/ ├── layouts.md ← 8 paste-ready section skeletons └── checklist.md ← P0/P1/P2 self-review ``` ## Workflow ### Step 0 — Pre-flight (do this once before writing anything) 1. **Read `assets/template.html` end-to-end** — at minimum through the `<style>` block. The class inventory at the top of `references/layouts.md` lists every class that must be defined there; if one is missing, add it to `<style>` rather than re-defining it inline on every section. 2. **Read `references/layouts.md`** so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt. 3. **Read the active DESIGN.md** (already injected into your system prompt). Map its colors to the six `:root` variables in the seed; don't introduce new tokens.