--- description: One-time UI theming skill. Sets up design system (theme, tokens, typography). Run ONCE at project start before implementing features. --- # UI Theming Skill Initialize the design system. This skill should be run **ONCE** at project start to set up: - Color theme selection - Design token generation - Typography system - SCSS structure ## Usage ``` /ui-theming ``` ## Workflow ### Step 0: Check Existing Design System Before creating files, check if a design system already exists: ```bash ls frontend/src/styles/tokens/ 2>/dev/null ``` **If directory exists with files, show:** ``` ⚠️ Design System bereits vorhanden! Gefundene Dateien: - _colors.scss - _typography.scss - [weitere Dateien...] Optionen: 1. Abbrechen (bestehende Dateien behalten) 2. Überschreiben (Theme neu generieren) 3. Nur Theme-Preview generieren (keine Änderungen) Wie möchten Sie fortfahren? ``` - **Option 1:** Exit skill, no changes - **Option 2:** Continue with Step 1 (files will be overwritten) - **Option 3:** Skip to Step 7 (Theme-Auswahl + Preview generieren, keine SCSS-Änderungen) **If directory does not exist:** Continue with Step 1. --- ### Step 1: Theme Selection Present the available themes: ``` Available Themes: 1. Ocean Depths - Professional maritime (Blue/Teal) 2. Sunset Boulevard - Warm vibrant (Orange/Pink) 3. Forest Canopy - Natural earth tones (Green/Brown) 4. Modern Minimalist - Clean grayscale (Gray/Black) 5. Golden Hour - Rich autumnal (Gold/Orange) 6. Arctic Frost - Cool crisp winter (Light Blue/White) 7. Desert Rose - Soft sophisticated (Pink/Beige) 8. Tech Innovation - Bold modern tech (Blue/Purple) [RECOMMENDED] 9. Botanical Garden - Fresh organic (Green/Cream) 10. Midnight Galaxy - Dramatic cosmic (Dark Purple/Blue) Which theme would you like for your project? ``` ### Step 2: Read Selected Theme After user selects a theme, read the theme file: ``` Read: ${CLAUDE_PLUGIN_ROOT}/skills/ui-theming/themes/[selected-theme].md ``` Extract: - Primary color - Secondary color - Font family - Font weights ### Step 3: Farbvarianten berechnen Aus den Theme-Farben (Primary + Accent) die Light/Dark-Varianten ableiten. **Algorithmus (HSL-Farbraum):** | Variante | Berechnung | |----------|-----------| | `primary-light` | Lightness +20%, Saturation -10% | | `primary-dark` | Lightness -20%, Saturation +5% | | `accent-light` | Lightness +20%, Saturation -10% | | `accent-dark` | Lightness -20%, Saturation +5% | **Beispiel:** Primary `#0066ff` (HSL: 216°, 100%, 50%) → Light: HSL(216°, 90%, 70%) = `#5c9aff` → Dark: HSL(216°, 100%, 30%) = `#003d99` **Contrast-Farbe:** Weiß (`#ffffff`) wenn Lightness < 50%, sonst Schwarz (`#000000`). **Dark-Mode Semantic Colors** (fest definiert): | Token | Light Mode | Dark Mode | |-------|-----------|-----------| | success | `#4caf50` | `#81c784` | | warning | `#ff9800` | `#ffb74d` | | error | `#f44336` | `#e57373` | | info | `#2196f3` | `#64b5f6` | ### Step 4: Create Token Files Create the following modular structure in `frontend/src/styles/tokens/`: ``` frontend/src/styles/ ├── tokens/ │ ├── _colors.scss # Color palette + light/dark mode │ ├── _typography.scss # Font system as CSS Custom Properties │ ├── _spacing.scss # 8pt grid + semantic aliases │ ├── _elevation.scss # Material elevation shadows │ ├── _breakpoints.scss # Responsive breakpoints + mixins │ └── _index.scss # Central export (@forward + theme mixins) └── styles.scss # Root file (@use tokens) ``` #### tokens/_colors.scss ```scss // Color System - CSS Custom Properties // Generated by /ui-theming // Theme: [Selected Theme] @mixin colors-light { // Brand Colors (from selected theme) --color-primary: [primary-hex]; --color-primary-light: [primary-light-hex]; --color-primary-dark: [primary-dark-hex]; --color-primary-contrast: #ffffff; --color-accent: [accent-hex]; --color-accent-light: [accent-light-hex]; --color-accent-dark: [accent-dark-hex]; --color-accent-contrast: #ffffff; // Semantic Colors --color-success: #4caf50; --color-warning: #ff9800; --color-error: #f44336; --color-info: #2196f3; // Neutral Palette --color-gray-50: #fafafa; --color-gray-100: #f5f5f5; --color-gray-200: #eeeeee; --color-gray-300: #e0e0e0; --color-gray-400: #bdbdbd; --color-gray-500: #9e9e9e; --color-gray-600: #757575; --color-gray-700: #616161; --color-gray-800: #424242; --color-gray-900: #212121; // Surface & Background --color-background: #fafafa; --color-surface: #ffffff; --color-surface-variant: #f5f5f5; // Text --color-text-primary: rgba(0, 0, 0, 0.87); --color-text-secondary: rgba(0, 0, 0, 0.6); --color-text-disabled: rgba(0, 0, 0, 0.38); --color-text-on-primary: #ffffff; // Borders --color-divider: rgba(0, 0, 0, 0.12); --color-border: rgba(0, 0, 0, 0.23); } @mixin colors-dark { --color-primary: [primary-light-hex]; --color-primary-light: [primary-hex]; --color-primary-dark: [primary-dark-hex]; --color-primary-contrast: #000000; --color-accent: [accent-light-hex]; --color-accent-contrast: #000000; --color-success: #81c784; --color-warning: #ffb74d; --color-error: #e57373; --color-info: #64b5f6; --color-gray-50: #212121; --color-gray-100: #303030; --color-gray-200: #424242; --color-gray-300: #616161; --color-gray-400: #757575; --color-gray-500: #9e9e9e; --color-gray-600: #bdbdbd; --color-gray-700: #e0e0e0; --color-gray-800: #eeeeee; --color-gray-900: #fafafa; --color-background: #121212; --color-surface: #1e1e1e; --color-surface-variant: #2c2c2c; --color-text-primary: rgba(255, 255, 255, 0.87); --color-text-secondary: rgba(255, 255, 255, 0.6); --color-text-disabled: rgba(255, 255, 255, 0.38); --color-text-on-primary: #000000; --color-divider: rgba(255, 255, 255, 0.12); --color-border: rgba(255, 255, 255, 0.23); } ``` #### tokens/_typography.scss ```scss // Typography System - CSS Custom Properties // Generated by /ui-theming @mixin typography { // Font Families (from selected theme) --font-family-base: '[theme-font]', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'Roboto Mono', 'Consolas', monospace; // Font Sizes (Modular Scale 1.25) --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; // Font Weights --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; // Line Heights --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-relaxed: 1.75; // Letter Spacing --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; // Semantic Typography Tokens --font-heading-1: var(--font-weight-light) var(--font-size-5xl) / var(--line-height-tight) var(--font-family-base); --font-heading-2: var(--font-weight-light) var(--font-size-4xl) / var(--line-height-tight) var(--font-family-base); --font-heading-3: var(--font-weight-regular) var(--font-size-3xl) / var(--line-height-tight) var(--font-family-base); --font-heading-4: var(--font-weight-regular) var(--font-size-2xl) / var(--line-height-base) var(--font-family-base); --font-heading-5: var(--font-weight-medium) var(--font-size-xl) / var(--line-height-base) var(--font-family-base); --font-heading-6: var(--font-weight-medium) var(--font-size-lg) / var(--line-height-base) var(--font-family-base); --font-body-1: var(--font-weight-regular) var(--font-size-base) / var(--line-height-base) var(--font-family-base); --font-body-2: var(--font-weight-regular) var(--font-size-sm) / var(--line-height-base) var(--font-family-base); --font-caption: var(--font-weight-regular) var(--font-size-xs) / var(--line-height-base) var(--font-family-base); } ``` #### tokens/_spacing.scss ```scss // Spacing System - 8pt Grid // Generated by /ui-theming @mixin spacing { // Base Scale --spacing-0: 0; --spacing-1: 0.25rem; // 4px --spacing-2: 0.5rem; // 8px --spacing-3: 0.75rem; // 12px --spacing-4: 1rem; // 16px --spacing-5: 1.25rem; // 20px --spacing-6: 1.5rem; // 24px --spacing-8: 2rem; // 32px --spacing-10: 2.5rem; // 40px --spacing-12: 3rem; // 48px --spacing-16: 4rem; // 64px // Semantic Aliases --spacing-page-x: var(--spacing-6); --spacing-page-y: var(--spacing-8); --spacing-section: var(--spacing-8); --spacing-card: var(--spacing-4); --spacing-inline: var(--spacing-2); // Border Radius --radius-none: 0; --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 1rem; --radius-full: 9999px; // Component Tokens --card-padding: var(--spacing-4); --card-radius: var(--radius-md); --button-padding-x: var(--spacing-4); --button-padding-y: var(--spacing-2); --button-radius: var(--radius-md); --input-padding-x: var(--spacing-4); --input-padding-y: var(--spacing-2); --input-radius: var(--radius-md); --table-cell-padding: var(--spacing-3) var(--spacing-4); --toolbar-height: 4rem; --sidenav-width: 16rem; } ``` #### tokens/_elevation.scss ```scss // Elevation & Shadows // Generated by /ui-theming @mixin elevation { // Material Design Elevation --elevation-0: none; --elevation-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); --elevation-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); --elevation-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); --elevation-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); --elevation-16: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12); // Semantic Aliases --shadow-card: var(--elevation-1); --shadow-dropdown: var(--elevation-4); --shadow-modal: var(--elevation-16); // Transitions --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 350ms ease-in-out; // Z-Index Scale --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } ``` #### tokens/_breakpoints.scss ```scss // Responsive Breakpoints // Generated by /ui-theming $breakpoint-sm: 600px; $breakpoint-md: 960px; $breakpoint-lg: 1280px; $breakpoint-xl: 1920px; // Breakpoint Mixins (use in components) @mixin sm { @media (min-width: $breakpoint-sm) { @content; } } @mixin md { @media (min-width: $breakpoint-md) { @content; } } @mixin lg { @media (min-width: $breakpoint-lg) { @content; } } @mixin xl { @media (min-width: $breakpoint-xl) { @content; } } @mixin below-sm { @media (max-width: ($breakpoint-sm - 1)) { @content; } } @mixin below-md { @media (max-width: ($breakpoint-md - 1)) { @content; } } @mixin below-lg { @media (max-width: ($breakpoint-lg - 1)) { @content; } } ``` #### tokens/_index.scss ```scss // Token System Entry Point // Generated by /ui-theming // Uses @forward/@use (modern SCSS module system) @forward 'breakpoints'; @use 'colors'; @use 'typography'; @use 'spacing'; @use 'elevation'; // All tokens combined @mixin all-tokens { @include typography.typography; @include spacing.spacing; @include elevation.elevation; } // Theme: Light (default) @mixin theme-light { @include colors.colors-light; @include all-tokens; } // Theme: Dark @mixin theme-dark { @include colors.colors-dark; @include all-tokens; } ``` ### Step 5: Update styles.scss Ensure `frontend/src/styles.scss` uses the token system: ```scss @use 'styles/tokens' as tokens; // Apply light theme by default :root { @include tokens.theme-light; } // Dark mode support @media (prefers-color-scheme: dark) { :root { @include tokens.theme-dark; } } // Manual dark mode toggle class .dark-theme { @include tokens.theme-dark; } ``` ### Step 6: Verify Setup ```bash # Check file structure ls -la frontend/src/styles/tokens/ # Build to verify no errors cd frontend && npm run build ``` ### Step 7: Generate Theme Preview #### 7.1: Theme bestimmen **Wenn aus Step 6 kommend (voller Workflow):** → Das in Step 1 gewählte Theme verwenden, keine erneute Abfrage. **Wenn direkt zu Step 7 gesprungen (Option 3 aus Step 0):** → Theme-Auswahl anzeigen: ``` Welches Theme möchten Sie in der Preview sehen? 1. Ocean Depths - Professional maritime (Blue/Teal) 2. Sunset Boulevard - Warm vibrant (Orange/Pink) 3. Forest Canopy - Natural earth tones (Green/Brown) 4. Modern Minimalist - Clean grayscale (Gray/Black) 5. Golden Hour - Rich autumnal (Gold/Orange) 6. Arctic Frost - Cool crisp winter (Light Blue/White) 7. Desert Rose - Soft sophisticated (Pink/Beige) 8. Tech Innovation - Bold modern tech (Blue/Purple) 9. Botanical Garden - Fresh organic (Green/Cream) 10. Midnight Galaxy - Dramatic cosmic (Dark Purple/Blue) Theme-Nummer eingeben: ``` #### 7.2: Projekt-Elemente analysieren Scanne das Projekt nach verwendeten UI-Elementen (Material UND native HTML): ```bash # 1. Angular Material Komponenten grep -roh "mat-[a-z-]*" frontend/src/app --include="*.html" | sort | uniq -c | sort -rn # 2. Native HTML Elemente grep -roE "<(table|form|input|select|textarea|button|ul|ol|nav|header|footer|aside|dialog|details|summary)[^>]*>" frontend/src/app --include="*.html" | sort | uniq -c | sort -rn # 3. Custom Components (app-*) grep -roh "app-[a-z-]*" frontend/src/app --include="*.html" | sort | uniq -c | sort -rn ``` **Beispiel-Output:** ``` === Angular Material === 45 mat-button 34 mat-form-field 12 mat-table === Native HTML === 28 ` | Datentabelle | | `mat-form-field` ODER `/
(28x) - [X] (56x) - [X]
Name Status Aktionen
Max Mustermann Aktiv
Erika Musterfrau Ausstehend
John Doe Inaktiv

Formular

Benutzer bearbeiten

Buttons

``` **Nach Erstellung:** ``` THEME PREVIEW ERSTELLT: [Theme Name] Öffnen Sie die Vorschau im Browser: open wireframes/theme-preview-[theme-name].html Features: - [X] Farbpalette mit allen Brand & Semantic Colors (immer) - [X] Typografie-Beispiele (immer) - [X] Dark Mode Toggle (immer) - Projekt-spezifische Elemente (nur wenn im Projekt gefunden): - [ ] Datentabelle (mat-table ODER ) - [ ] Formular (mat-form-field ODER /