メニュー
When removing CSS custom property theme tokens (RGB channels) from a Tailwind project, input fields become white-on-white — text and background both render as white because the CSS variables resolve to empty
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to HTML-string audits.
Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use `scan` for a full audit with no diffing.
Audit a live page for accessibility issues and locate each violation precisely — pass a URL, a config target name (e.g. `accesslint:scan dev`), or nothing to use the default target from accesslint.config.json. Ensures a debuggable Chrome, runs the @accesslint/core engine via CDP, and returns a worklist of live-DOM WCAG violations grounded to each violation's DOM selector and source file:line. Locates; doesn't edit — output drives fixes by Claude. Use it for "is this page accessible", or to verify a UI change. For diffing against uncommitted changes or a branch, use the `diff` skill.
Diagnose when AI features silently return 'Offline' or 'no API key' despite valid settings
Remove native title bar double-rendering in Electron by setting `frame: false` and using CSS `-webkit-app-region` for window dragging
When a utility exports a boolean constant but a component imports and calls it as a function — `isNative()` instead of `isNative` — causes "is not a function" at render time
| name | tailwind-css-variable-theme-removal-causes-white-inputs |
| description | When removing CSS custom property theme tokens (RGB channels) from a Tailwind project, input fields become white-on-white — text and background both render as white because the CSS variables resolve to empty |
| source | auto-skill |
| extracted_at | 2026-06-06T09:50:00.000Z |
After a theme system redesign that removes CSS custom properties (e.g., --color-bg, --color-text) from globals.css, text inputs become unreadable — white text on white background.
The old design used RGB-channel CSS variables consumed by Tailwind with opacity modifiers:
:root {
--color-bg: 2 6 23;
--color-text: 248 250 252;
}
Tailwind config referenced them:
colors: {
bg: 'rgb(var(--color-bg) / <alpha-value>)',
text: 'rgb(var(--color-text) / <alpha-value>)',
}
Components used classes like bg-bg text-text. These resolved to actual RGB values via the CSS variables.
When the CSS variables are removed (replaced by a hardcoded dark theme like #05050A), Tailwind classes referencing rgb(var(--color-bg) / ...) resolve to rgb( / ...) — which is invalid CSS. Browsers treat invalid color values as transparent or inherit, often defaulting to white in dark-mode contexts.
The result: inputs that had bg-bg text-text now have transparent backgrounds with white text, or white backgrounds with white text.
background-color — if it's transparent or white when it should be dark, the CSS variable resolution is brokenrgb(var(-- in the computed styles — this indicates dead CSS variable referencesReplace all rgb(var(--color-*)) references with hardcoded hex values. For inputs specifically, use explicit colors:
.input-glass {
color: #dbe4e3 !important;
background-color: rgba(0, 0, 0, 0.2) !important;
}
.input-glass::placeholder {
color: rgba(185, 202, 201, 0.5) !important;
}
The !important is necessary when other Tailwind utility classes (like text-on-surface) are competing and may still reference dead CSS variables.
Also fix <select> element options which render in native OS dropdowns:
.input-glass option {
color: #dbe4e3;
background-color: #0d1515;
}
When removing CSS custom properties that feed Tailwind's rgb(var(--x) / <alpha>) pattern, always:
rgb(var(-- in all CSS/JSX files