メニュー
Use when a mockup, dashboard, or app needs light/dark modes and/or multiple brand palettes, or when asked to "reskin" or "retheme" an existing interface without touching its structure or interaction logic.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Use when implementing multiple related enhancements, or a large feature that must be split across risk boundaries, and you need to decide branch/PR structure. Covers accumulating related work on one shared branch with atomic commits per enhancement, splitting risky multi-PR features along risk seams, and safely handling a branch that has both committed and dirty (uncommitted) work when shipping.
Use when a rebase or merge reports conflicts on a file where both branches only appended or inserted new content (append-only logs, registries, holding-pen documents) rather than editing the same lines. Recognizes the conflict as a false signal and resolves it as a union-keep-both operation instead of a real semantic merge.
Use when reskinning an app with a real brand's visual identity — extract the actual palette from a live site's raw CSS (not markdown), recreate logo/icon assets programmatically with documented extraction rationale, and codify everything as versioned, named design tokens rather than one-off hardcoded values.
Use when building a skill, doc, or knowledge base for an existing internal service or codebase, or when asked to audit past sessions for recurring failures and gaps — mine prior Claude conversation transcripts instead of reverse-engineering from logs or current code alone.
| name | css-variables-for-multi-theme-reskin |
| description | Use when a mockup, dashboard, or app needs light/dark modes and/or multiple brand palettes, or when asked to "reskin" or "retheme" an existing interface without touching its structure or interaction logic. |
| status | active |
| version | "2026-07-05T00:00:00.000Z" |
Any interface that needs more than one visual identity — light/dark mode, multiple brand palettes, or a "create a themed copy of this existing dashboard" request. Also use when explicitly asked to restyle, retheme, or reskin something that already works: the goal is a pure token substitution, not a rebuild.
Define base tokens as CSS custom properties at :root. Name them semantically
(--brand, --muted, --surface, --accent), not by literal color, so the same
name means "the right color for this theme" everywhere they're used.
Scope theme variants with attribute selectors, not separate stylesheets or duplicated rule sets:
:root { --brand: oklch(60% 0.15 250); }
:root[data-theme="light"] { --surface: oklch(98% 0 0); }
:root[data-theme="dark"] { --surface: oklch(15% 0 0); }
Every component references the tokens, never hardcoded colors — the palette lives in one place.
Derive tinted/translucent surfaces from base tokens with color-mix() rather
than defining a second hardcoded color per surface:
background: color-mix(in oklch, var(--brand) 15%, transparent);
This keeps badges, glows, hover states, and buttons all following the same base hue automatically when the base token changes.
Prefer a modern color space (oklch) over hex/rgb when the source allows it.
oklch makes "same hue, different lightness" a one-value change (adjust the L
channel), which is exactly the transform a light/dark or brand-variant reskin needs.
Wire the toggle to a single DOM attribute: a theme switcher just does
document.documentElement.dataset.theme = 'dark' (or the brand name). Because
every color is a variable reference, the entire palette recomputes with no other
JS and no re-render logic needed.
Verify both themes render correctly in the same session without a page reload — toggle back and forth and confirm all surfaces update, not just the obvious ones (check badges, glows, disabled states, borders).
color-mix() from the base token, or it will drift out of sync on the next brand
change.