red-proto 0.4.0

package/design-system/tokens/colors.md

@@ -0,0 +1,66 @@
+# Farb-Tokens
+
+*Ersetze die Beispielwerte durch die Werte aus deinem Design System.*
+
+## Primärfarben
+
+| Token-Name          | Hex-Wert  | Verwendung                              |
+|---------------------|-----------|-----------------------------------------|
+| `color-primary-50`  | `#EFF6FF` | Sehr heller Hintergrund, Hover-Tint     |
+| `color-primary-100` | `#DBEAFE` | Heller Hintergrund, aktive Badges       |
+| `color-primary-300` | `#93C5FD` | Disabled-Zustand, Borders               |
+| `color-primary-500` | `#3B82F6` | Standard Primärfarbe                    |
+| `color-primary-600` | `#2563EB` | Hover-Zustand, aktive Links             |
+| `color-primary-700` | `#1D4ED8` | Pressed/Active-Zustand                  |
+| `color-primary-900` | `#1E3A8A` | Sehr dunkle Variante, Icons auf hell    |
+
+## Sekundärfarben
+
+| Token-Name            | Hex-Wert  | Verwendung                            |
+|-----------------------|-----------|---------------------------------------|
+| `color-secondary-100` | `#F3F4F6` | Sekundärer Hintergrund                |
+| `color-secondary-500` | `#6B7280` | Sekundäre Aktionen, deaktivierter Text |
+| `color-secondary-700` | `#374151` | Sekundäre Buttons im Hover            |
+
+## Semantic-Farben
+
+| Token-Name          | Hex-Wert  | Verwendung                             |
+|---------------------|-----------|----------------------------------------|
+| `color-success-100` | `#D1FAE5` | Erfolgs-Hintergrund (Banners, Badges)  |
+| `color-success-500` | `#10B981` | Erfolgs-Iconfarbe, positive Aktionen   |
+| `color-success-700` | `#047857` | Erfolgs-Text auf hellem Hintergrund    |
+| `color-warning-100` | `#FEF3C7` | Warn-Hintergrund                       |
+| `color-warning-500` | `#F59E0B` | Warn-Icon, Hinweise                    |
+| `color-warning-700` | `#B45309` | Warn-Text auf hellem Hintergrund       |
+| `color-error-100`   | `#FEE2E2` | Fehler-Hintergrund (Fehlermeldungen)   |
+| `color-error-500`   | `#EF4444` | Fehler-Icon, Pflichtfelder             |
+| `color-error-700`   | `#B91C1C` | Fehler-Text auf hellem Hintergrund     |
+| `color-info-100`    | `#DBEAFE` | Info-Hintergrund                       |
+| `color-info-500`    | `#3B82F6` | Info-Icon                              |
+
+## Neutralfarben / Graustufen
+
+| Token-Name        | Hex-Wert  | Verwendung                              |
+|-------------------|-----------|-----------------------------------------|
+| `color-neutral-0` | `#FFFFFF` | Weiß / Haupt-Hintergrund               |
+| `color-neutral-50`| `#F9FAFB` | Seiten-Hintergrund                      |
+| `color-neutral-100`| `#F3F4F6`| Karten-Hintergrund, Input-Hintergrund   |
+| `color-neutral-200`| `#E5E7EB`| Trennlinien, Borders                    |
+| `color-neutral-400`| `#9CA3AF`| Placeholder-Text                        |
+| `color-neutral-600`| `#4B5563`| Sekundärer Body-Text                    |
+| `color-neutral-800`| `#1F2937`| Primärer Body-Text                      |
+| `color-neutral-900`| `#111827`| Überschriften                           |
+
+## Surface-Tokens (semantische Aliases)
+
+| Token-Name              | Referenziert         | Verwendung                    |
+|-------------------------|----------------------|-------------------------------|
+| `color-bg-page`         | `color-neutral-50`   | Seiten-Hintergrund            |
+| `color-bg-surface`      | `color-neutral-0`    | Karten, Modals, Panels        |
+| `color-bg-muted`        | `color-neutral-100`  | Inputs, deaktivierte Bereiche |
+| `color-text-primary`    | `color-neutral-900`  | Haupttext                     |
+| `color-text-secondary`  | `color-neutral-600`  | Hilfstext, Labels             |
+| `color-text-disabled`   | `color-neutral-400`  | Deaktivierter Text            |
+| `color-text-on-primary` | `color-neutral-0`    | Text auf Primärfarbe          |
+| `color-border-default`  | `color-neutral-200`  | Standard-Border               |
+| `color-border-focus`    | `color-primary-500`  | Focus-Ring                    |

package/design-system/tokens/motion.md

@@ -0,0 +1,53 @@
+# Motion-Tokens (Transitions & Animationen)
+
+*Optional – ersetze oder ergänze nach Bedarf.*
+
+## Durations
+
+| Token-Name          | Wert    | Verwendung                                              |
+|---------------------|---------|---------------------------------------------------------|
+| `duration-instant`  | `0ms`   | Kein Übergang (z.B. bei prefers-reduced-motion)         |
+| `duration-fast`     | `100ms` | Sehr schnelle UI-Reaktionen (Hover-Highlights)          |
+| `duration-normal`   | `200ms` | Standard UI-Übergänge (Buttons, Links, Inputs)          |
+| `duration-moderate` | `300ms` | Komponenten ein-/ausblenden, Tabs wechseln              |
+| `duration-slow`     | `500ms` | Panels, Sidebars, größere Layout-Änderungen             |
+| `duration-slower`   | `700ms` | Komplexe Animationen, Onboarding-Flows                  |
+
+## Easing-Funktionen
+
+| Token-Name           | CSS-Wert                        | Verwendung                               |
+|----------------------|---------------------------------|------------------------------------------|
+| `ease-linear`        | `linear`                        | Fortschrittsbalken, Spinner              |
+| `ease-in`            | `cubic-bezier(0.4, 0, 1, 1)`   | Elemente die verschwinden (fade out)     |
+| `ease-out`           | `cubic-bezier(0, 0, 0.2, 1)`   | Elemente die erscheinen (fade in, slide) |
+| `ease-in-out`        | `cubic-bezier(0.4, 0, 0.2, 1)` | Standard UI-Übergänge                    |
+| `ease-bounce`        | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Spielerische, springende Animationen |
+| `ease-spring`        | `cubic-bezier(0.175, 0.885, 0.32, 1.275)` | Modals, Tooltips erscheinen     |
+
+## Zusammengesetzte Transitions
+
+| Token-Name                | Wert                                         | Verwendung                    |
+|---------------------------|----------------------------------------------|-------------------------------|
+| `transition-color`        | `color 200ms ease-in-out`                    | Textfarbe, Ikonfarbe          |
+| `transition-bg`           | `background-color 200ms ease-in-out`         | Hintergrundfarbe              |
+| `transition-border`       | `border-color 200ms ease-in-out`             | Border-Farbe (Inputs, Fokus)  |
+| `transition-shadow`       | `box-shadow 200ms ease-in-out`               | Schatten-Übergänge            |
+| `transition-opacity`      | `opacity 200ms ease-in-out`                  | Ein-/Ausblenden               |
+| `transition-transform`    | `transform 300ms ease-out`                   | Slides, Scales                |
+| `transition-all-fast`     | `all 100ms ease-in-out`                      | Schnelle Multi-Property       |
+| `transition-all`          | `all 200ms ease-in-out`                      | Standard Multi-Property       |
+
+## Accessibility-Hinweis
+
+Respektiere `prefers-reduced-motion`:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+Alle Übergänge müssen auch ohne Animation funktionieren – sie sind Enhancement, kein Kern der UX.

package/design-system/tokens/shadows.md

@@ -0,0 +1,33 @@
+# Shadow-Tokens (Elevation-System)
+
+*Ersetze die Beispielwerte durch die Werte aus deinem Design System.*
+
+## Elevation-Skala
+
+| Token-Name      | CSS-Wert                                                                 | Verwendung                                    |
+|-----------------|--------------------------------------------------------------------------|-----------------------------------------------|
+| `shadow-none`   | `none`                                                                   | Kein Schatten (flache Elemente)               |
+| `shadow-xs`     | `0 1px 2px 0 rgb(0 0 0 / 0.05)`                                         | Subtile Abhebung (Inputs im Fokus)            |
+| `shadow-sm`     | `0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10)`     | Buttons, leicht abgehobene Elemente           |
+| `shadow-md`     | `0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)` | Cards, Karten, Standard-Panels                |
+| `shadow-lg`     | `0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)`| Dropdowns, Popovers, Floating-Elemente       |
+| `shadow-xl`     | `0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)`| Modals, Dialoge                              |
+| `shadow-2xl`    | `0 25px 50px -12px rgb(0 0 0 / 0.25)`                                   | Sehr prominente Overlay-Elemente              |
+
+## Semantische Shadow-Tokens
+
+| Token-Name           | Referenziert  | Verwendung                           |
+|----------------------|---------------|--------------------------------------|
+| `shadow-card`        | `shadow-md`   | Standard Card-Elevation              |
+| `shadow-dropdown`    | `shadow-lg`   | Dropdown-Menüs, Selects              |
+| `shadow-modal`       | `shadow-xl`   | Modals, Dialoge                      |
+| `shadow-button`      | `shadow-sm`   | Buttons mit Elevation-Effekt         |
+| `shadow-input-focus` | `shadow-xs`   | Input-Fokus-Ring (zusätzlich zu Outline) |
+| `shadow-sticky`      | `shadow-md`   | Sticky Header beim Scrollen          |
+
+## Inner Shadows
+
+| Token-Name        | CSS-Wert                                | Verwendung                      |
+|-------------------|-----------------------------------------|---------------------------------|
+| `shadow-inner`    | `inset 0 2px 4px 0 rgb(0 0 0 / 0.05)` | Inputs, vertiefte Bereiche      |
+| `shadow-inner-sm` | `inset 0 1px 2px 0 rgb(0 0 0 / 0.05)` | Subtile Vertiefung              |

package/design-system/tokens/spacing.md

@@ -0,0 +1,57 @@
+# Spacing-Tokens
+
+*Ersetze die Beispielwerte durch die Werte aus deinem Design System. Basis-Unit: 4px.*
+
+## Spacing-Scale
+
+| Token-Name  | Wert     | px-Äquivalent | Verwendung                                     |
+|-------------|----------|---------------|------------------------------------------------|
+| `spacing-0` | `0`      | 0px           | Reset, kein Abstand                            |
+| `spacing-px` | `1px`   | 1px           | Trennlinien, Borders                           |
+| `spacing-0.5`| `0.125rem`| 2px         | Minimale innere Abstände, Icon-Gaps            |
+| `spacing-1` | `0.25rem`| 4px           | Sehr enge Abstände (Badge-Padding, Icon-Gap)   |
+| `spacing-1.5`| `0.375rem`| 6px         | Kleine innere Abstände                         |
+| `spacing-2` | `0.5rem` | 8px           | Kompaktes Padding (Tags, Chips)                |
+| `spacing-3` | `0.75rem`| 12px          | Standard Button-Padding (vertikal)             |
+| `spacing-4` | `1rem`   | 16px          | Standard-Abstand, Component-Padding            |
+| `spacing-5` | `1.25rem`| 20px          | Etwas mehr Luft                                |
+| `spacing-6` | `1.5rem` | 24px          | Card-Padding, Section-Abstände                 |
+| `spacing-8` | `2rem`   | 32px          | Größere Abstände zwischen Sections             |
+| `spacing-10`| `2.5rem` | 40px          | Starke Trennung, Abstand vor Überschriften     |
+| `spacing-12`| `3rem`   | 48px          | Seitenbereich-Abstände                         |
+| `spacing-16`| `4rem`   | 64px          | Sehr große Abstände, Hero-Sections             |
+| `spacing-20`| `5rem`   | 80px          | Layout-Level-Abstände                          |
+| `spacing-24`| `6rem`   | 96px          | Maximale Abstände, große Layouts               |
+
+## Semantische Spacing-Tokens
+
+Alias-Namen für häufige Verwendungskontexte:
+
+| Token-Name               | Referenziert  | Verwendung                             |
+|--------------------------|---------------|----------------------------------------|
+| `spacing-component-xs`   | `spacing-2`   | Kompaktes Komponenten-Padding          |
+| `spacing-component-sm`   | `spacing-3`   | Kleines Komponenten-Padding            |
+| `spacing-component-md`   | `spacing-4`   | Standard Komponenten-Padding           |
+| `spacing-component-lg`   | `spacing-6`   | Großes Komponenten-Padding             |
+| `spacing-gap-xs`         | `spacing-2`   | Enger Gap zwischen Elementen           |
+| `spacing-gap-sm`         | `spacing-3`   | Kleiner Gap (Icon + Text)              |
+| `spacing-gap-md`         | `spacing-4`   | Standard-Gap zwischen Elementen        |
+| `spacing-gap-lg`         | `spacing-6`   | Größerer Gap zwischen Gruppen          |
+| `spacing-section-sm`     | `spacing-8`   | Kleiner Abstand zwischen Sections      |
+| `spacing-section-md`     | `spacing-12`  | Standard Section-Abstand               |
+| `spacing-section-lg`     | `spacing-16`  | Großer Section-Abstand                 |
+| `spacing-page-x`         | `spacing-6`   | Horizontaler Seiten-Rand (Mobile)      |
+| `spacing-page-x-desktop` | `spacing-8`   | Horizontaler Seiten-Rand (Desktop)     |
+
+## Border-Radius
+
+| Token-Name        | Wert        | Verwendung                              |
+|-------------------|-------------|-----------------------------------------|
+| `radius-none`     | `0`         | Kein Radius, scharfe Ecken             |
+| `radius-sm`       | `0.125rem`  | 2px – sehr kleine Elemente (Badges)     |
+| `radius-default`  | `0.25rem`   | 4px – Standard (Inputs, Cards)          |
+| `radius-md`       | `0.375rem`  | 6px – Buttons, Dropdowns                |
+| `radius-lg`       | `0.5rem`    | 8px – Karten, Modals                    |
+| `radius-xl`       | `0.75rem`   | 12px – Große Panels                     |
+| `radius-2xl`      | `1rem`      | 16px – Sehr abgerundete Elemente        |
+| `radius-full`     | `9999px`    | Runde Elemente (Avatare, Pills, Tags)   |

package/design-system/tokens/typography.md

@@ -0,0 +1,70 @@
+# Typografie-Tokens
+
+*Ersetze die Beispielwerte durch die Werte aus deinem Design System.*
+
+## Schriftfamilien
+
+| Token-Name           | Wert                                    | Verwendung                        |
+|----------------------|-----------------------------------------|-----------------------------------|
+| `font-family-base`   | `'Inter', system-ui, sans-serif`        | Fließtext, Labels, UI-Elemente    |
+| `font-family-heading`| `'Inter', system-ui, sans-serif`        | Überschriften (falls abweichend)  |
+| `font-family-mono`   | `'JetBrains Mono', 'Courier New', mono` | Code, technische Werte            |
+
+## Schriftgrößen
+
+| Token-Name     | Wert    | px-Äquivalent | Verwendung                           |
+|----------------|---------|---------------|--------------------------------------|
+| `text-xs`      | `0.75rem` | 12px        | Badges, Captions, Meta-Infos         |
+| `text-sm`      | `0.875rem`| 14px        | Labels, Helper-Text, Tabelleninhalt  |
+| `text-base`    | `1rem`    | 16px        | Standard Body-Text                   |
+| `text-lg`      | `1.125rem`| 18px        | Größerer Body-Text, Intro-Text       |
+| `text-xl`      | `1.25rem` | 20px        | Kleine Überschriften (h4, h5)        |
+| `text-2xl`     | `1.5rem`  | 24px        | Abschnittsüberschriften (h3)         |
+| `text-3xl`     | `1.875rem`| 30px        | Seitenüberschriften (h2)             |
+| `text-4xl`     | `2.25rem` | 36px        | Hero-Überschriften (h1)              |
+| `text-5xl`     | `3rem`    | 48px        | Display-Text, große Kennzahlen       |
+
+## Schriftgewichte
+
+| Token-Name         | Wert  | Verwendung                             |
+|--------------------|-------|----------------------------------------|
+| `font-weight-normal` | 400 | Standard Body-Text                     |
+| `font-weight-medium` | 500 | Labels, leichte Betonung               |
+| `font-weight-semibold`| 600| Buttons, Navigationsitems, Subheadings |
+| `font-weight-bold`   | 700 | Überschriften, starke Betonung         |
+
+## Line-Heights
+
+| Token-Name           | Wert  | Verwendung                         |
+|----------------------|-------|------------------------------------|
+| `leading-tight`      | 1.25  | Überschriften, kurze Labels        |
+| `leading-snug`       | 1.375 | Subheadings, Buttons               |
+| `leading-normal`     | 1.5   | Standard Body-Text                 |
+| `leading-relaxed`    | 1.625 | Langer Fließtext, bessere Lesbarkeit|
+
+## Letter-Spacing
+
+| Token-Name            | Wert       | Verwendung                        |
+|-----------------------|------------|-----------------------------------|
+| `tracking-tight`      | `-0.025em` | Große Überschriften               |
+| `tracking-normal`     | `0`        | Standard                          |
+| `tracking-wide`       | `0.025em`  | Buttons, Badges, Uppercase-Labels |
+| `tracking-wider`      | `0.05em`   | Sehr kurze Uppercase-Labels       |
+
+## Text-Styles (zusammengesetzte Tokens)
+
+Fertige Kombinationen für häufige Elemente:
+
+| Style-Name       | Größe      | Gewicht | Line-Height   | Verwendung              |
+|------------------|------------|---------|---------------|-------------------------|
+| `style-h1`       | `text-4xl` | bold    | `leading-tight` | Seitentitel            |
+| `style-h2`       | `text-3xl` | bold    | `leading-tight` | Abschnittstittel       |
+| `style-h3`       | `text-2xl` | semibold| `leading-snug`  | Card-Titel, Panels     |
+| `style-h4`       | `text-xl`  | semibold| `leading-snug`  | Unterabschnitte        |
+| `style-body-lg`  | `text-lg`  | normal  | `leading-relaxed`| Intro-Texte           |
+| `style-body`     | `text-base`| normal  | `leading-normal` | Standard-Fließtext    |
+| `style-body-sm`  | `text-sm`  | normal  | `leading-normal` | Hilfstext, Captions   |
+| `style-label`    | `text-sm`  | medium  | `leading-tight`  | Formular-Labels       |
+| `style-button`   | `text-sm`  | semibold| `leading-tight`  | Button-Text           |
+| `style-caption`  | `text-xs`  | normal  | `leading-normal` | Bildunterschriften    |
+| `style-code`     | `text-sm`  | normal  | `leading-normal` | Code-Blöcke           |

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "red-proto",
+  "version": "0.4.0",
+  "description": "AI-powered product development framework for Claude Code – from idea to tested prototype",
+  "bin": {
+    "red-proto": "./bin/install.js"
+  },
+  "files": [
+    "bin/",
+    "commands/",
+    "agents/",
+    "design-system/"
+  ],
+  "scripts": {
+    "test": "node bin/install.js"
+  },
+  "keywords": [
+    "claude-code",
+    "ai",
+    "product-development",
+    "prototyping",
+    "framework",
+    "claude"
+  ],
+  "author": "Enrico Reinsdorf <eltuctuc@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eltuctuc/red-create-prototyp-project.git"
+  },
+  "homepage": "https://github.com/eltuctuc/red-create-prototyp-project#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "type": "module"
+}