Menu
Creates light and dark mode component variants with consistent color token mapping. Use when building dual-theme components, creating light/dark UI pairs, or implementing theme-aware designs.
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
Scaffolds a new design in the design-inspirations repo with preview component, detail page, and main page entry. Use when creating a new design, adding a design inspiration, or scaffolding design files.
Creates dropdown menus with proper click-outside detection and z-index stacking for list contexts. Use when building action menus, context menus, or any dropdown that appears in cards/list items.
Creates horizontally fanned/cascading card stacks with proper z-index ordering and hover lift animations. Use when building album browsers, card fans, stacked previews, or any overlapping card collection.
Creates expandable/collapsible cards using CSS grid-rows animation with smooth transitions. Use when building accordions, expandable panels, collapsible sections, or show/hide card content.
Creates image carousels with hover-activated auto-advance, touch swipe support, and animated progress indicators. Use when building image galleries, product showcases, or any multi-image display with navigation.
Creates cards with an outer gradient container and inner content card. Use when building premium card designs with depth, layered card layouts, or cards with image sections and content sections.
| name | component-variants |
| description | Creates light and dark mode component variants with consistent color token mapping. Use when building dual-theme components, creating light/dark UI pairs, or implementing theme-aware designs. |
Create matching light and dark variants of UI components using a systematic color token approach.
ComponentLight and ComponentDarkvariant prop| Semantic Use | Light Mode | Dark Mode |
|---|---|---|
| Card background | bg-[#f8f8f8] | bg-zinc-800 |
| Card border | border-zinc-200/80 | border-zinc-700/80 |
| Content area | bg-white | bg-zinc-900 |
| Primary text | text-zinc-900 | text-zinc-100 |
| Secondary text | text-zinc-600 | text-zinc-400 |
| Muted text | text-zinc-500 | text-zinc-500 |
| Icon color | text-zinc-400 | text-zinc-500 |
| Tag background | bg-zinc-100 | bg-zinc-800 border border-zinc-700 |
| Tag text | text-zinc-600 | text-zinc-400 |
| Accent background | bg-green-50 | bg-green-900/50 |
| Accent text | text-green-700 | text-green-400 |
| Shadow | shadow-zinc-200/50 | shadow-black/30 |
| Hover background | hover:bg-zinc-100/50 | hover:bg-zinc-700/30 |
| Semantic Use | Light Mode | Dark Mode |
|---|---|---|
| Outer card gradient | bg-gradient-to-b from-[#e8e8ea] to-[#dcdce0] | bg-gradient-to-b from-zinc-700 to-zinc-800 |
| Outer card border | border-white/60 | border-zinc-600/40 |
| Outer card shadow | shadow-xl shadow-zinc-400/30 | shadow-xl shadow-black/50 |
| Inner media border | border-white/40 | border-zinc-600/30 |
| Semantic Use | Light Mode | Dark Mode |
|---|---|---|
| Success badge bg | bg-[#d4f5d4] | bg-emerald-900/40 |
| Success badge text | text-zinc-700 | text-emerald-400 |
| Semantic Use | Light Mode | Dark Mode |
|---|---|---|
| Dot separator | text-zinc-300 | text-zinc-600 |
| Border separator | border-zinc-300 | border-zinc-700 |
// 1. Create the Light variant
function ComponentLight() {
return (
<div className="bg-[#f8f8f8] rounded-xl border border-zinc-200/80 shadow-lg shadow-zinc-200/50">
<div className="bg-white px-4 py-4">
<span className="text-zinc-900">Primary content</span>
<span className="text-zinc-500">Secondary content</span>
</div>
</div>
);
}
// 2. Create the Dark variant (mirror structure, swap tokens)
function ComponentDark() {
return (
<div className="bg-zinc-800 rounded-xl border border-zinc-700/80 shadow-lg shadow-black/30">
<div className="bg-zinc-900 px-4 py-4">
<span className="text-zinc-100">Primary content</span>
<span className="text-zinc-500">Secondary content</span>
</div>
</div>
);
}
// 3. Export unified component
export function Component({ variant = "light" }: { variant?: "light" | "dark" }) {
return variant === "dark" ? <ComponentDark /> : <ComponentLight />;
}
When components have repeated sub-elements, create paired helpers:
interface InfoRowProps {
icon: React.ReactNode;
label: string;
value: React.ReactNode;
}
function InfoRowLight({ icon, label, value }: InfoRowProps) {
return (
<div className="flex items-center gap-3 py-1">
<span className="text-zinc-400">{icon}</span>
<span className="text-zinc-500 text-sm w-32">{label}</span>
<div className="flex-1">{value}</div>
</div>
);
}
function InfoRowDark({ icon, label, value }: InfoRowProps) {
return (
<div className="flex items-center gap-3 py-1">
<span className="text-zinc-500">{icon}</span>
<span className="text-zinc-500 text-sm w-32">{label}</span>
<div className="flex-1">{value}</div>
</div>
);
}