HTML Design & Prototype Skill

What it does

CC-Design equips an agent to act as an expert HTML designer and prototyper. The skill provides routing logic to classify design tasks, templates and references for common artefacts (slides, landing pages, interactive prototypes), and a stepwise workflow: understand, route, acquire context, define design intent, build, verify (structural/visual/design excellence) and deliver. The skill emphasizes verified outputs — no console errors, screenshot-verified rendering, and descriptive filenames — and enforces design quality checks before handoff.

When to use it

Trigger this skill when a user asks to design, prototype, mock up, make it look good, or mentions Figma, slide decks, UI kits, wireframes, or presentations. Use for web landing pages, slide decks, interactive demos, and component-level HTML prototypes where visual fidelity and verified rendering are required.

What's included

• Scripts: none detected at root (has_scripts=false) but the SKILL contains explicit templates, routing tables, and verification protocols embedded in the body.
• References: inlined design guidance and verification protocols; repo-level templates are described in the SKILL but not flagged as separate references.
• Instructions: detailed routing table, workflow steps, output contracts, and content guidelines that the agent follows when producing and verifying artifacts.

Compatible agents

Designed for agents that can run filesystem operations, spawn browser rendering (Playwright-style tools), and use Read/Write tools — suitable for Cursor, agents with Playwright integrations, or OpenClaw runner setups.