メニュー
Use when working with CSS variables, theming, or colors. Triggers on "CSS variable", "theme", "dark mode", "light mode", "color token", "semantic color", "--background", "--foreground", "theme()", or color questions.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when implementing accessible components, adding ARIA attributes, keyboard navigation, or screen reader support. Triggers on "a11y", "accessibility", "ARIA", "keyboard navigation", "focus", "screen reader", "WCAG", or "AXE".
Use when building AI chat interfaces. Triggers on "chat", "message", "AI", "streaming", "typing indicator", "message bubble", "chat input", "Spartan UI", "hlmBtn", "hlmAvatar", or chat component questions.
Use when implementing complex UI patterns. Triggers on "CDK", "dialog", "modal", "overlay", "dropdown", "tooltip", "virtual scroll", "drag drop", "focus trap", "portal", or CDK questions.
Use when writing Angular v21 code. Triggers on "Angular", "component", "service", "signal", "inject", "standalone", "OnPush", "zoneless", "@if", "@for", "input()", "output()", "computed()", "effect()", or Angular v21 questions.
Use when organizing code or making architectural decisions. Triggers on "barrel export", "index.ts", "file structure", "naming convention", "module boundary", "dependency injection", "InjectionToken", "scalability", or organization questions.
Use when creating, modifying, or refactoring Angular components. Triggers on "create component", "add input", "add output", "signal", "computed", "host binding", "content projection", "Spartan UI", or component structure questions.
| name | styling-architecture |
| description | Use when working with CSS variables, theming, or colors. Triggers on "CSS variable", "theme", "dark mode", "light mode", "color token", "semantic color", "--background", "--foreground", "theme()", or color questions. |
| allowed-tools | ["Read","Glob","Grep"] |
This document defines our CSS architecture, color system, and styling patterns.
We use only Tailwind's built-in zinc scale for all colors. No custom hex codes.
Tailwind Built-in Colors (zinc-50 to zinc-950)
-> CSS Variables (semantic tokens via theme() function)
-> Tailwind Utility Classes (bg-background, text-foreground)
| Zinc Level | Light Mode Usage | Dark Mode Usage |
|---|---|---|
zinc-50 | Background | Foreground/Text |
zinc-100 | Muted/Secondary | - |
zinc-200 | Borders (light) | - |
zinc-300 | Border hover | - |
zinc-400 | Ring/Focus | Muted text |
zinc-500 | Muted text | Muted text |
zinc-600 | - | Ring/Focus, Border hover |
zinc-700 | - | Borders |
zinc-800 | - | Muted/Accent |
zinc-900 | Primary, Cards | Cards |
zinc-950 | Foreground/Text | Background |
All CSS variables are defined in one place: apps/demo/src/styles.css
Variables follow Spartan UI conventions for compatibility:
--background /* Page/app background */
--foreground /* Primary text color */
--foreground-muted /* Secondary/muted text */
--card /* Card backgrounds */
--card-foreground /* Card text */
--muted /* Muted backgrounds */
--muted-foreground /* Muted text */
--accent /* Accent backgrounds (hover states) */
--accent-foreground /* Accent text */
--border /* Default border color */
--border-hover /* Border on hover/focus */
--input /* Input border color */
--ring /* Focus ring color */
--primary /* Primary button/action */
--primary-foreground /* Primary button text */
--secondary /* Secondary button/action */
--secondary-foreground /* Secondary button text */
--destructive /* Destructive/danger color */
--destructive-foreground /* Destructive text */
Always use theme() function to reference Tailwind colors:
/* Correct: Use theme() function */
--background: theme('colors.zinc.50');
--border: theme('colors.zinc.200');
/* Wrong: Never use hex codes */
--background: #fafafa;
--border: #e4e4e7;
/* Wrong: Never use rgb/hsl */
--background: rgb(250 250 250);
Use var() for CSS variable references:
/* In CSS */
.my-component {
background-color: var(--card);
border: 1px solid var(--border);
color: var(--foreground);
}
Use Tailwind semantic color classes directly:
<!-- Correct: Tailwind semantic color classes -->
<div class="border-border bg-card text-foreground">
<div class="bg-muted text-muted-foreground">Muted content</div>
</div>
<!-- Wrong: var() syntax in Tailwind classes -->
<div class="border-[var(--border)] bg-[var(--card)]"></div>
<!-- Wrong: dark: prefix -->
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100"></div>
<!-- Wrong: Hardcoded hex colors -->
<div class="border-[#3f3f46] bg-[#18181b]"></div>
cardClasses = computed(() => {
return cn(
'rounded-lg',
'border border-border',
'bg-card',
'text-foreground',
'hover:border-border-hover'
);
});
Dark mode is controlled by the .dark class on <html>. CSS variables automatically switch values:
:root {
--background: theme('colors.zinc.50'); /* Light */
--foreground: theme('colors.zinc.950');
}
.dark {
--background: theme('colors.zinc.950'); /* Dark */
--foreground: theme('colors.zinc.50');
}
Components automatically adapt via Tailwind semantic classes. NEVER use the dark: prefix.
// Correct: Tailwind semantic classes auto-switch light/dark
containerClasses = computed(() =>
cn(
'bg-background', // Auto-switches light/dark
'text-foreground', // Auto-switches light/dark
'border-border'
)
);
// NEVER use dark: prefix
containerClasses = computed(() =>
cn(
'bg-white dark:bg-gray-900', // WRONG!
'text-gray-900 dark:text-gray-100' // WRONG!
)
);
dark: prefix creates maintenance burdenstyles.css| Token | Use For |
|---|---|
--background | Page/app background |
--card | Card, modal, dialog backgrounds |
--popover | Tooltip, dropdown backgrounds |
--muted | Secondary/subtle backgrounds |
--accent | Hover state backgrounds |
--primary | Primary buttons |
--secondary | Secondary buttons |
| Token | Use For |
|---|---|
--foreground | Primary text |
--foreground-muted | Secondary/hint text |
--muted-foreground | Subtle text on muted bg |
--card-foreground | Text on cards |
--accent-foreground | Text on accent bg |
--primary-foreground | Text on primary buttons |
| Token | Use For |
|---|---|
--border | Default borders |
--border-hover | Border on hover/focus |
--input | Input field borders |
--ring | Focus rings |
// WRONG: dark: prefix
'bg-white dark:bg-gray-900';
'text-gray-900 dark:text-gray-100';
'border-gray-200 dark:border-gray-800';
// CORRECT: Tailwind semantic classes
'bg-card';
'text-foreground';
'border-border';
// WRONG: var() syntax
'bg-[var(--card)]';
'text-[var(--foreground)]';
'border-[var(--border)]';
// CORRECT: Tailwind semantic classes
'bg-card';
'text-foreground';
'border-border';
/* Wrong */
--background: #09090b;
--border: #27272a;
/* Correct */
--background: theme('colors.zinc.950');
--border: theme('colors.zinc.800');
/* Wrong: Custom color tokens */
--ai-blue-500: #3b82f6;
--ai-gray-800: #1f2937;
/* Correct: Use semantic tokens */
--primary: theme('colors.zinc.900');
--muted: theme('colors.zinc.800');
cardClasses = computed(() =>
cn(
'rounded-lg',
'border border-border',
'bg-card',
'shadow-sm',
'hover:border-border-hover',
'hover:shadow-md'
)
);
inputClasses = computed(() =>
cn(
'w-full rounded-md',
'border border-input',
'bg-transparent',
'text-foreground',
'placeholder:text-muted-foreground',
'focus:border-ring',
'focus:ring-1 focus:ring-ring'
)
);
<span class="text-muted-foreground">Secondary info</span>
// Primary
'bg-primary text-primary-foreground';
// Secondary
'bg-secondary text-secondary-foreground';
// Ghost
'bg-transparent hover:bg-accent text-foreground';
theme() function (no hex codes):root and .darkdark: prefix used anywherevar() syntax in Tailwind classes