Getting Started
LLMs
Use AI coding assistants with Zazz through structured agent skills and context files.
Zazz includes structured agent skills and reference docs for AI coding assistants. These files define the token system, CSS APIs, and component authoring patterns.
Available skills
The zazz skill lives at .claude/skills/zazz/:
| File | Purpose |
|---|---|
SKILL.md | Entry instructions and system trigger rules |
DESIGN.md | Design system principles and token architecture |
PATTERNS.md | Component authoring patterns and conventions |
references/tokens.md | Token reference (scales, roles, metrics) |
references/components.md | Component markup and variant API reference |
references/apis.md | Modern CSS APIs used across the system |
AI assistant setup
Claude
The skill is pre-configured. Claude tools reading .claude/skills/ load Zazz conventions automatically.
Other AI assistants
Provide key reference files as context:
SKILL.md: Instructions for using Zazz.references/tokens.md: Valid token names and semantic roles.references/components.md: HTML markup patterns for components.
Plain-text endpoints
/llms.txt: Condensed site documentation./llms-full.txt: Complete documentation in plain text.
Core rules in the skill
- Use the four-layer cascade (
variables,reset,components,utilities). - Use semantic tokens (
--primary,--gap-md) over hardcoded pixel/hex values. - Apply variants through
data-*attributes. - Use
light-dark()for theme-aware colors. - Follow token naming conventions (
--{component}-{property}--{state}). - Match existing component file structure.
Repository
Source code and skill files: github.com/dereknelsen/zazz-ui