Magie

1. Partikel statt Leere

Jeder dunkle Hintergrund bekommt ein Partikelsystem. Goldene Staubpartikel für warme Screens, Cyan für KI-Screens, Emerald für Tool-Screens. Nutze ParticleCanvas mit Canvas-API, Glow-Halos, Sinus-Drift und Breathing-Alpha.

2. Animierte Grenzen statt statischer Borders

Wichtige Elemente bekommen animierte Conic-Gradient-Borders (@property --angle, conic-gradient, animation: rotate). Das erzeugt den "Energie-Fluss"-Effekt.

3. Gradient-Text statt Flat-Text

Überschriften nutzen linear-gradient + WebkitBackgroundClip: text + drop-shadow für Glow. Gold-Gradient für warme Headlines, Cyan-Gradient für KI-Headlines.

4. Ambient-Glows statt flacher Backgrounds

Jeder Screen hat mindestens 2-3 blur-Glow-Layers. Nicht unsichtbar-subtil (opacity 0.02), sondern sichtbar-atmosphärisch (opacity 0.08-0.15). Die Glows definieren die Farbstimmung des Screens.

5. Staggered Entrance statt gleichzeitiger Erscheinung

Elemente erscheinen nacheinander (0.05-0.1s Delay pro Element). Verwende motion/react mit individuellen delay-Werten. Nie alles gleichzeitig einblenden.

6. Warm Pine-Green statt Schwarz

Der Hintergrund ist NIE #000000 oder #0a0f0d allein. Immer ein Gradient: linear-gradient(180deg, #0a0f0d 0%, #111a16 50%, #0a0f0d 100%). Cards nutzen #111a16 oder #1a2923 — sichtbar warm, nicht unsichtbar.

7. Icon-Container mit Glow

Icons stehen nie nackt. Sie bekommen einen Container mit:

• background: linear-gradient(135deg, color+20, color+08)
• border: 1px solid color+25
• boxShadow: 0 0 20px color+12 Größe: mindestens 44px für primäre Icons, 40px für sekundäre.

8. Hover = Leben

Jeder interaktive Element reagiert auf Hover/Touch:

• active:scale-[0.96] für Buttons
• hover:brightness-110 für Cards
• group-hover:translate-x-0.5 für Chevrons
• Glow-Expansion bei Hover (opacity 0.5 → 1.0)

9. Signature Moments

Jeder wichtige Screen hat mindestens EINEN Moment der "Wow" erzeugt:

• Arc Reactor Animation beim Betreten der Module-Seite
• Breathing Orb mit konzentrischen Ringen bei AutoKI
• Segmented Multi-Color-Ring für Modul-Übersicht
• Gold "Meister." Text-Reveal auf der Startseite
• Orbital Layout für Betrieb-Bereiche

10. Typography als Design-Element

• Cormorant Garamond (Serif) NUR für Display-Text (1x pro Screen max)
• Gold-Gradient auf die wichtigste Überschrift jeder Seite
• JetBrains Mono für Zahlen, Daten, technische Werte
• Inter für alles andere — aber mit bewussten Gewichtswechseln

11. Cinematische Übergänge

• Seiten-Wechsel: Slide mit 0.4s ease
• Modals/Overlays: Scale 0.95→1 + Opacity
• Karten-Tap: Scale 0.96 → release
• Listen-Items: Slide von links/unten mit Stagger

12. Sound of Silence

Kenne den Wert von Leerraum. Nicht alles vollpacken. Ein einzelnes großes Element mit viel Luft drumherum ist stärker als fünf mittlere Elemente eng zusammen.

Farbsystem

Pine-950: #0a0f0d   (tiefster Hintergrund)
Pine-900: #111a16   (Card-Oberflächen, warm sichtbar)
Pine-800: #1a2923   (Hover-States, erhöhte Flächen)
Wood:     #c29b62   (Warm-Akzent, Gold, primäre Highlights)
Wood-L:   #d4b483   (Heller Gold, Gradient-Ende)
Sand:     #f5f4f0   (Primärer Text)
Cyan:     #2dd4bf   (AutoKI-Akzent, KI-Elemente)
Emerald:  #34d399   (Modul-Akzent, Tool-Elemente)

Motion-Library

• Import: from 'motion/react' (NICHT framer-motion)
• Standard-Ease: [0.16, 1, 0.3, 1]
• Entrance: 0.4-0.8s Duration
• Stagger: 0.05-0.1s pro Element

iOS-Kompatibilität

• role="button" tabIndex={0} auf klickbare Divs
• Touch-Targets min 44px
• Input font-size min 16px
• 100vh statt 100dvh
• -webkit- Prefixes für backdrop-filter

Der ultimative Test

Zeig das Ergebnis einem imaginären Panel aus:

1. Einem Grafikdesigner mit 40 Jahren Erfahrung bei Apple, Porsche und Montblanc
2. Dem besten Frontend-Engineer der Welt
3. Einem 55-jährigen Schreinermeister der zum ersten Mal ein Smartphone nutzt

Alle drei müssen gleichzeitig beeindruckt sein. Der Designer vom Handwerk. Der Engineer von der Technik. Der Schreiner von der Klarheit.

Wenn einer der drei nicht überzeugt wäre — iteriere.

Die Arbeitsweise der Magie (Session-Vibe)

Dieser Abschnitt beschreibt WIE gearbeitet wird, nicht nur WAS rauskommt. Basiert auf der Session vom 25.03.2026 die als Referenz-Qualität gilt.

13. Direkt handeln, nicht fragen

Nicht "Soll ich X machen?" — sondern X machen. Technische Entscheidungen eigenständig treffen. Samir ist No-Code Vibe Coder. Er gibt die Vision, du lieferst die Umsetzung. Nur bei Business/Design-Fragen rückfragen.

14. Feedback-Loops sind Pflicht

Jedes größere Feature durchläuft:

1. Build — Implementiere es
2. Self-Review — Prüfe deine eigene Arbeit kritisch
3. Agent-Review — Spawne Experten-Agenten für externes Feedback
4. Fix — Setze die Findings um
5. Verify — Build-Check, alles grün

15. Fachrat für Qualität

Bei wichtigen Meilensteinen: Fachrat aktivieren (/fachrat oder eigenständig). Dynamische Experten-Komposition — KEINE starren Rollen, sondern:

• Für jede Aufgabe individuell 3-5 Experten mit analytischen Frameworks
• Mindestens 1 Antagonist (sucht Gegenbeweise)
• Mindestens 1 extern Geerdeter (zitiert Code, Normen, Wettbewerb)
• Reasoning-Level Kritik, nicht Meinungen
• Kein erzwungener Konsens — DU machst die Synthese Siehe Skill fachrat für das vollständige Protokoll.

16. Research vor Code

Vor großen Features: Deep Dive Recherche anlegen. Nicht raten was Wettbewerber machen — recherchieren, dokumentieren, DANN bauen. Recherche-Dokumente landen in docs/research/.

17. Sprint-basiert denken

Große Aufgaben in Sprints aufteilen:

• Sprint 1: "Nix darf kaputt sein" (Quick Fixes, Vertrauen)
• Sprint 2: Kern-Features (was den User zum Wechsel bringt)
• Sprint 3: Differentiator (was kein Wettbewerber hat) Jeder Sprint hat einen klaren Aktionsplan mit Aufwandsschätzung.

18. Parallel bauen

Unabhängige Aufgaben als parallele Agenten starten. Nicht seriell warten — 3 Screens gleichzeitig bauen lassen. Dann zusammenführen, Build-Check, weiter.

19. Wallee für Bugs

Jeder gemeldete Bug durchläuft den WALL-E 5-Phasen-Flow: SCOUT → DETECTIVE → DOCTOR → SWEEP → FIXER Bugs werden nicht nur gefixt sondern ins Kataster eingetragen und das Pattern wird über ALLE Module gescannt.

20. Innovation durch Kontext

Der stärkste Differentiator entsteht durch Daten-Vernetzung:

• Kundenpräferenzen → fließen in KI-Angebote
• Auftragshistorie → informiert Preisvorschläge
• Material-Bestand → triggert Bestellempfehlungen Denke IMMER: "Welche Daten haben wir schon und was können wir daraus AUTOMATISCH ableiten?"

21. Checkpoint-Kultur

Nach jeder großen Session: /checke machen. Alles dokumentieren: Was wurde gebaut, was steht als nächstes an. Memories aktualisieren für Cross-Session-Kontinuität.

22. Kein Deploy bis "marktreif"

Nicht deployen weil es compiled. Deployen wenn es GUT ist. Samir entscheidet wann. Fachidioten-Team gibt die Empfehlung.

Der Magie-Kreislauf

Vision (Samir)
  ↓
Research (Deep Dive)
  ↓
Design (Brainstorming + Plan)
  ↓
Build (Parallel Agents)
  ↓
Review (Fachidioten-Team)
  ↓
Fix (Sprint-basiert)
  ↓
Verify (Build + QA)
  ↓
Checkpoint (für nächste Session)
  ↓
Nächste Vision...

Das ist die Magie. Nicht ein einzelner guter Screen — sondern ein SYSTEM das konsistent Premium-Ergebnisse liefert.

Gemini Bild-Integration (Nano Banana)

Wenn ein Gemini API Key verfuegbar ist, wird der gemini-bildgenerator Skill automatisch aktiviert.

Pflichtregeln fuer Bild-Integration

1. Jedes Bild braucht eine Vignette: boxShadow: 'inset 0 0 30px 15px #0a0f0d'
2. Dunkler Hintergrund: Container immer backgroundColor: '#0a0f0d'
3. Gradient-Overlay: Mind. ein Gradient fuer Text-Lesbarkeit
4. NIE nackte Bilder — immer eingebettet mit Overlays
5. Dunkle Raender im Prompt erzwingen: "Edges must be very dark #0a0f0d"
6. WebP-Kompression: Immer PNGs zu WebP konvertieren (quality 80-85)
7. Lazy Loading: loading="lazy" ausser fuer Above-the-Fold Content