菜单
Sweep a component across the 5 color × 5 style presets plus dark mode to catch tokens that only resolve under the default theme. Usage: /theme-audit <component>
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Andersseen/volt-ui --skill theme-audit命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | theme-audit |
| description | Sweep a component across the 5 color × 5 style presets plus dark mode to catch tokens that only resolve under the default theme. Usage: /theme-audit <component> |
Volt UI ships 5 colors × 5 styles × light/dark = 50 combinations. A component that
looks right under the default (volt + sharp, light) can be unreadable under
dusk + ghost dark. This skill sweeps them.
Argument: the component name in kebab-case. With no argument, audit the components touched in the working tree.
Theming is three independent switches on <html>, applied by applyVoltTheme() in
projects/volt/src/lib/components/theme/theme.ts:
| Switch | Where | Values |
|---|---|---|
| color | data-color attribute on <html> | volt ember sage dusk glacier |
| style | data-style attribute on <html> | sharp soft brutal ghost retro |
| dark | .dark class on <html> | present / absent |
Dark mode is a class, not a media query — core.css declares
@custom-variant dark (&:where(.dark, .dark *)). The docs app persists choices in
localStorage under volt-color, volt-style, volt-dark.
Token sources live in projects/volt/src/themes/: colors/*.css, styles/*.css, and the
25 precomputed pairs in presets/*.css.
Grep the component before opening a browser. These are the patterns that break across presets, and they are findable without rendering anything:
C=projects/volt/src/lib/components/<name>
grep -nE "#[0-9a-fA-F]{3,8}\b|rgb\(|hsl\(" $C/*.ts # hardcoded color
grep -nE "\[var\(--" $C/*.ts # bg-[var(--primary)] instead of bg-primary
grep -nE "\b(white|black|gray|slate|zinc|neutral)-[0-9]{2,3}\b" $C/*.ts # Tailwind palette instead of semantic token
grep -nE "dark:" $C/*.ts # manual dark: — semantic tokens should already flip
Every hit is a finding. AGENTS.md is explicit: use Tailwind utilities bound to semantic
tokens (bg-primary, rounded-md, shadow-lg), never bg-[var(--primary)] and never a
raw palette color. A semantic token already resolves per preset and per light/dark, so a
dark: override on one usually means the wrong token underneath.
Also run the repo's own contrast checker:
pnpm check:contrast # scripts/contrast-audit.mjs
pnpm dev, navigate to /docs/components/<name>, then drive the switches directly:
// browser_evaluate — no reload needed, the attributes are live
const set = (color, style, dark) => {
const r = document.documentElement;
r.setAttribute('data-color', color);
r.setAttribute('data-style', style);
r.classList.toggle('dark', dark);
r.style.colorScheme = dark ? 'dark' : 'light';
};
set('dusk', 'ghost', true);
You do not need all 50. These six catch essentially everything, because each isolates a different token family:
| # | color | style | dark | What it isolates |
|---|---|---|---|---|
| 1 | volt | sharp | light | baseline — must be perfect |
| 2 | volt | sharp | dark | foreground/background pairing flips |
| 3 | ember | brutal | light | heavy borders + offset shadows; border tokens |
| 4 | dusk | ghost | dark | borderless + low contrast; the worst case |
| 5 | glacier | retro | light | unusual radii and shadow shapes |
| 6 | sage | soft | dark | muted palette, soft radii |
Screenshot each. For anything with state (hover, open, checked, disabled), capture that
state too — a disabled style that vanishes under ghost is a real bug.
ghost, or overwhelms under brutalshadow-[var(--volt-shadow-lg)] instead of
shadow-lg, so @theme inline never mapped itOne table: preset → finding → the exact file and line. Then the fix, which is almost always
"swap the literal or arbitrary value for the semantic Tailwind utility". Do not add a
dark: override to patch a bad token — fix the token binding, or the same bug reappears in
the other 49 combinations.
If a token genuinely does not exist for what the component needs, that is a
projects/volt/src/themes/core.css change: add the --volt-* source variable and map it
in @theme inline. Never introduce a recursive CSS variable (AGENTS.md).