Menu
Govern OKLCH theme tokens — semantic naming, light+dark pairs, contrast validation. Add new tokens via @theme; never hard-code hex in components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Bump the patch version in server/Cargo.toml or website/package.json after completing a major change. Use when the user asks to bump/release a version, or when CLAUDE.md's rule about version bumps after major changes applies.
Before a non-trivial change, list affected systems — DB schema, API contract, Telegram handlers, jobs, TS types, docs. Catch ripple effects upfront, not after CI fails. Use when planning a feature, migration, refactor, or any cross-module touch.
Self-review before push — read the diff as a reader, scan for vixen footguns (token leaks, PII, idempotency, captcha asset overwrites), run validation pipeline, no surprise files. Use before "git push", before opening a PR, or when the user says "ready to commit".
Write a git commit message for vixen-rs following the project's Conventional Commits convention. Use when the user asks to commit, create a commit, or write a commit message.
Reproduce → bisect → root cause → fix → verify. Don't speculate, don't "add more error handling" as a guess. Use when something is broken, when a test fails intermittently, when the user says "this isn't working" or "investigate why".
Write small, fast, reproducible Dockerfiles for the vixen-rs server (Rust) and website (bun) using multi-stage builds, cache mounts, distroless/alpine runtime images, and non-root users. Use when editing server/Dockerfile, website/Dockerfile, docker-compose.yml, or when the user asks to shrink an image or speed up a Docker build.
| name | design-tokens-system |
| description | Govern OKLCH theme tokens — semantic naming, light+dark pairs, contrast validation. Add new tokens via @theme; never hard-code hex in components. |
Source: Tailwind v4 @theme, InclusiveColors.
Read first:
| Category | Examples |
|---|---|
| Color | --color-background, --color-foreground, --color-primary, --color-destructive, --color-success, --color-warning, --color-muted, --color-border, --color-ring |
| Spacing | Default Tailwind scale; add custom only for vixen-specific (e.g., --spacing-content = max content width) |
| Radius | --radius base + --radius-sm, --radius-lg derived |
| Font | --font-sans, --font-mono |
| Shadow | --shadow-card, --shadow-overlay |
--color-destructive (intent — "the thing that warns"). Survives a brand repaint.--color-red-500 (visual — tied to one shade). Breaks the moment design shifts hue.Better perceptual uniformity — the same lightness at different hues looks balanced. Easier to author light/dark pairs. WCAG contrast still measured in sRGB, so validate ratios with WebAIM (OKLCH tooling lags).
Every color token has both:
@theme {
--color-background: oklch(1 0 0);
--color-foreground: oklch(0.15 0 0);
--color-primary: oklch(0.58 0.18 265);
--color-primary-foreground: oklch(0.98 0 0);
--color-destructive: oklch(0.55 0.22 25);
--color-success: oklch(0.65 0.15 150);
--color-warning: oklch(0.75 0.16 80);
}
@variant dark {
--color-background: oklch(0.13 0 0);
--color-foreground: oklch(0.98 0 0);
--color-primary: oklch(0.65 0.18 265);
--color-destructive: oklch(0.62 0.22 25);
}
Skip a dark pair → token reverts to light value at runtime → ugly contrast in dark mode.
| Type | Min ratio |
|---|---|
| Body text (< 18.66px bold or < 24px) | 4.5:1 |
| Large text | 3:1 |
| UI components / focus indicators | 3:1 |
Validate every fg/bg pair you ship. Tools: WebAIM Contrast Checker, axe DevTools.
@theme (light) and @variant dark (dark).--color-info paired with --color-info-foreground).The moderation ledger needs status colors:
--color-success — verified, unbanned.--color-destructive — banned.--color-warning — captcha pending.--color-info (or --color-muted) — neutral metadata (CAS check, message deleted).bg-[#ff0000] — token missing or design off-grid. Add a token or push back.bg-red-500 (raw Tailwind palette) — bypasses the semantic layer. Use bg-destructive.--color-error AND --color-destructive defined as the same value — pick one name and stick with it.box-shadow: 0 1px 2px ... — should be --shadow-card.Review quarterly. If grep -r 'bg-special' website/src returns 0, drop --color-special. Unused tokens are ambient cost.
Default Tailwind 4px/8px scale is sufficient 95% of the time. Add a custom token only when:
--spacing-content-max, --spacing-sidebar).Else use w-72 etc. directly.
--color-foreground defined in :root instead of @theme → Tailwind doesn't pick it up for text-foreground. Always inside @theme.bg-primary/90 is opacity, not a separate token. If you want a real hover shade, add --color-primary-hover.Visual check at light and dark. WebAIM Contrast Checker on every fg/bg pair. grep -r 'bg-\[#\|text-\[#' website/src returns 0.
tailwind-styling — utility usage.dark-mode-discipline — light/dark parity (when this skill exists).ui-accessibility — contrast and focus tokens.