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, plus nine lookalike checks from vois-components, 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: