vois-tokens

# Vois Tokens Skill You are building UI for a design system that uses **shadcn/ui**, **Tailwind v4 or StyleX**, and **Motion**. This skill defines the rules, constraints, and patterns you must follow. Deviation from these rules produces inconsistent, unmaintainable UI. **Determine the styling engine before applying implementation-layer rules.** Check `package.json` for `tailwindcss` vs `@stylexjs/stylex`, or look for existing `stylex.create()` usage; ask if genuinely ambiguous. Everything in this skill except `references/tailwind-v4.md` and `references/stylex.md` (and the handful of rules tagged `engines` in `data/vois-rules.json`) applies identically regardless of engine. 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 sc...