LLMs
Use AI coding assistants with Zazz through purpose-built skills and context files.
Zazz ships with structured context files that AI coding assistants can consume directly. These skills teach LLMs how the token system works, what modern CSS APIs are in use, and how to write components that follow Zazz conventions.
Available skills
The zazz-pass skill lives in the repository at .claude/skills/zazz-pass/ and contains:
| File | What it provides |
|---|---|
SKILL.md | Entry point — when to trigger, how the system works |
DESIGN.md | Design system principles and token architecture |
PATTERNS.md | Component authoring patterns and conventions |
references/tokens.md | Full token reference (scales, roles, metrics) |
references/components.md | Component markup and variant API |
references/apis.md | Modern CSS APIs used across the system |
How to use with AI assistants
Claude (via .claude/skills/)
The skill is already installed. Any Claude-based tool that reads .claude/skills/ will automatically pick up Zazz conventions when you ask it to build or modify UI.
Other AI assistants
Point your assistant at the skill files in the repository. The key files to feed as context:
SKILL.mdgives the assistant the full picture of when and how to apply Zazzreferences/tokens.mdlists token names and values it can use directly in generated codereferences/components.mdshows correct markup patterns for every component
LLM-friendly docs
This documentation site also exposes full-text endpoints for LLM consumption:
/llms.txt: condensed site overview/llms-full.txt: complete documentation in plain text
What the skill teaches
The zazz-pass skill instructs AI assistants to:
- Use the four-layer cascade (
variables,reset,components,utilities) - Reach for semantic tokens (
--primary,--gap-md) over hardcoded values - Apply variants via
data-*attributes, not modifier classes - Use
light-dark()for theme-aware colors - Follow component token naming (
--{component}-{property}--{state}) - Write new components that match existing file anatomy
GitHub
Full source and skill files:
Migrating to Zazz
Adopt Zazz incrementally on top of an existing CSS codebase, using cascade layers, @scope donut scoping, and migrations-layer shims so the two systems never fight while you migrate.
Styling with utility classes
Build interfaces by composing small, single-purpose classes in your markup, each one wired to a design token, so what you build stays on-system.