vois-tokens

# Vois Tokens Skill You are building UI for a design system that uses **shadcn/ui**, **Tailwind v4**, and **Motion**. This skill defines the rules, constraints, and patterns you must follow. Deviation from these rules produces inconsistent, unmaintainable UI. This SKILL.md is the entry point. Detailed rules for each topic live in `references/` — read only the file(s) relevant to what you're building, not all of them every time. **Automated checks:** a deterministic detector (`scripts/detect.mjs`) covers the mechanically-verifiable subset of the Pre-Submit Checklist below and can run as a per-edit hook in Claude Code, Cursor, or Codex. See `references/hooks.md` for setup and which rules are covered. --- ## Taste dials If vois-router loaded `VOIS.md`, you'll be handed three 1-10 dials — **VARIANCE** (layout asymmetry), **MOTION** (animation richness), **DENSITY** (information per screen). They tune choices you'd otherwise make by default: - **DENSITY** biases spacing scale and default paddings/gaps — high density reaches for the tighter end of the 4/8 scale, low density the looser end. - **MOTION** biases how much animation to add — low motion means essential feedback only; high motion means richer entrance/transition choreography. - **VARIANCE** biases layout — low means symmetric grids, high means asymmetry is welcome. VARIANCE also gates `DS-SLOP-001` (centered-hero default fires above 4). **Dials never override hard rules.** Every guardrail still applies at ...