--- name: web-prototype description: | General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches. triggers: - "prototype" - "mockup" - "landing" - "single page" - "marketing page" - "homepage" od: mode: prototype platform: desktop scenario: design preview: type: html entry: index.html design_system: requires: true sections: [color, typography, layout, components] --- # 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 `