菜单
Govern OKLCH theme tokens — semantic naming, light+dark pairs, contrast validation. Add new tokens via @theme; never hard-code hex in components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.