← ClaudeAtlas

frontend-tokenslisted

Design token + motion pack management — color, typography, spacing, motion packs (Apple/Material/Fluent/Carbon), spring physics, choreography, glass surfaces. Use with /frontend-tokens, or whenever a backlog task with type THEME and transition "defining" is detected.
AirMile/claude-config · ★ 0 · Web & Frontend · score 78
Install: claude install-skill AirMile/claude-config
# Tokens Manages the full design system: vocabulary tokens (colors, typography, spacing, breakpoints, borderRadius, shadows, base motion, interactions, modes, cssVars) **and** motion packs (animation pack, spring physics, choreography, glass surfaces). Output lives in `.project/project.json → theme`. **Keywords:** animation, motion, pack, spring, iOS, Apple, Material, Fluent, Carbon, glass, vibrancy, choreography, micro-interactions, easing, playful, transitions, hover, press, entrance, delight, styleguide, PDF, brand intake **Related skills:** `/frontend-design` · `/frontend-check` ## References — Tokens - `references/THEME_TEMPLATE.md` — Token categories, naming conventions, JSON schema, Read/Write protocol - `references/phase-1-action-select.md` — Action selection menus (Tokens + Motion routes) - `../shared/DASHBOARD.md` — project.json full schema - `../shared/DESIGN.md` — Color advice, typography, motion anti-patterns, glass surface rules - `../shared/BACKLOG.md` — Backlog lifecycle protocol - External: `vercel-labs/web-interface-guidelines` — setup-context for Create route (see `references/route-create.md § Step 0`) ## References — Motion - `references/motion/packs.md` — Pack definitions + source credits (source of truth) - `references/motion/route-create.md` — Pick pack - `references/motion/route-customize.md` — Axis-by-axis customisation - `references/motion/route-apply.md` — Emit CSS vars to codebase - `references/motion/ios-easings.md` — Apple iOS/macOS easing