styleguide
Installation
SKILL.md
Build a Style Guide
Create a complete CSS design system style guide for the $ARGUMENTS aesthetic.
Follow the full conventions in styles/CLAUDE.md. The guide must be self-contained HTML with inline CSS, Google Fonts only, 450-2000 lines, CSS variables in :root, responsive design, and semantic HTML.
Phase 0 — Plan (interactive)
- Parse the argument as the aesthetic name (e.g., "steampunk", "memphis", "ukiyo-e").
- Check the Style Guide Catalog table in
README.mdandstyles/{name}.html— if the style already exists, inform the user. - Read
styles/CLAUDE.mdfor the template and conventions. - Read 1-2 existing style guides to match structure and depth — pick ones with a similar vibe.
- Propose a design direction:
- Color palette (5-7 colors with hex values and rationale)
- Typography (2-3 Google Fonts that fit the aesthetic)
- Key visual motifs (borders, shadows, textures, gradients)
- Sections to include beyond the required 6
- Discuss with the user before proceeding.