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)

  1. Parse the argument as the aesthetic name (e.g., "steampunk", "memphis", "ukiyo-e").
  2. Check the Style Guide Catalog table in README.md and styles/{name}.html — if the style already exists, inform the user.
  3. Read styles/CLAUDE.md for the template and conventions.
  4. Read 1-2 existing style guides to match structure and depth — pick ones with a similar vibe.
  5. 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
  6. Discuss with the user before proceeding.
Related skills
Installs
2
GitHub Stars
15
First Seen
Mar 3, 2026