From 0c4c023f71e2e9049e6f8003ccd6135e988c5938 Mon Sep 17 00:00:00 2001 From: DanielS Date: Tue, 7 Jul 2026 00:35:37 +0200 Subject: [PATCH] feat: add workspace skills configuration --- .agents/skills/astro-expert/SKILL.md | 38 +++++++++++++++++++ .../skills/astro-react-architecture/SKILL.md | 16 ++++++++ .../skills/bento-content-shuffling/SKILL.md | 12 ++++++ .../skills/bento-grid-architecture/SKILL.md | 10 +++++ .../skills/bento-interaction-states/SKILL.md | 10 +++++ .agents/skills/corporate-dark-mode/SKILL.md | 12 ++++++ .agents/skills/git-workflow/SKILL.md | 11 ++++++ .../glassmorphism-glow-effects/SKILL.md | 10 +++++ .../skills/hybrid-bento-scrolling/SKILL.md | 9 +++++ .agents/skills/tactile-craftsman-ui/SKILL.md | 10 +++++ .../skills/ui-element-best-practices/SKILL.md | 11 ++++++ .agents/skills/ultra-modern-design/SKILL.md | 13 +++++++ .agents/skills/webdesign-foundations/SKILL.md | 11 ++++++ 13 files changed, 173 insertions(+) create mode 100644 .agents/skills/astro-expert/SKILL.md create mode 100644 .agents/skills/astro-react-architecture/SKILL.md create mode 100644 .agents/skills/bento-content-shuffling/SKILL.md create mode 100644 .agents/skills/bento-grid-architecture/SKILL.md create mode 100644 .agents/skills/bento-interaction-states/SKILL.md create mode 100644 .agents/skills/corporate-dark-mode/SKILL.md create mode 100644 .agents/skills/git-workflow/SKILL.md create mode 100644 .agents/skills/glassmorphism-glow-effects/SKILL.md create mode 100644 .agents/skills/hybrid-bento-scrolling/SKILL.md create mode 100644 .agents/skills/tactile-craftsman-ui/SKILL.md create mode 100644 .agents/skills/ui-element-best-practices/SKILL.md create mode 100644 .agents/skills/ultra-modern-design/SKILL.md create mode 100644 .agents/skills/webdesign-foundations/SKILL.md diff --git a/.agents/skills/astro-expert/SKILL.md b/.agents/skills/astro-expert/SKILL.md new file mode 100644 index 0000000..5cc2dbb --- /dev/null +++ b/.agents/skills/astro-expert/SKILL.md @@ -0,0 +1,38 @@ +--- +name: astro-expert +description: Guidelines for Astro full-stack development, Bento-grid layouts, corporate dark mode, page speed optimization, and UI/UX design. +--- + +# Astro & UI/UX Expert Guidelines + +## SECTION 1: GIT & WORKFLOW-SKILLS +1. **Atomare Commits:** Generiere Code so, dass jede logische Änderung isoliert committet werden kann (z. B. Navbar separat von Hero). +2. **Semantic Commits:** Nutze für Commit-Vorschläge zwingend die standardisierten Präfixe: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`. +3. **Imperative Sprache:** Formuliere Commit-Nachrichten immer als prägnanten Befehl (z. B. `feat: add bento grid layout`). +4. **Clean History & Qualitäts-Check:** Prüfe vor jeder Ausgabe die korrekte Formatierung und stelle sicher, dass keine ungenutzten Imports verbleiben. + +## SECTION 2: CORPORATE DARK MODE & UI-REGELN +5. **Striktes Farbschema:** Basis-Hintergrund: Edles Anthrazit/Schwarz (`#0B0F19`), Haupttext: Reinweiß, Akzente & Highlights: Arktis-Blau (`#38BDF8`). Keine Ausnahmen. +6. **8pt-Grid-System:** Nutze für Layouts, Paddings und Margins konsequent Tailwind-Abstände in 4er-/8er-Schritten (`p-4`, `p-8`, `gap-4`, `gap-8`, `space-y-4`). +7. **Visuelle Hierarchie & Scannbarkeit:** Slogans groß und markant, Fließtext in cleanem Weiß/Grau. Halte die Zeilenlänge für optimale Lesbarkeit kurz (`max-w-xl` bis `max-w-2xl`). +8. **WCAG-Barrierefreiheit:** Garantiere bei allen Text- und Hintergrund-Kombinationen ein Kontrastverhältnis von mindestens 4.5:1 für perfekte Lesbarkeit. +9. **Mobile-First-Responsive-Design:** Plane Layouts immer zuerst einspaltig für Smartphones (`grid-cols-1`) und skaliere sie am Desktop dynamisch (z. B. `md:grid-cols-3`). + +## SECTION 3: ULTRA-MODERN DESIGN PATTERNS & EFFECTS +10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`. +11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`. +12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten. +13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`. +14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`. +15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten). + +## SECTION 4: ASTRO & REACT ARCHITEKTUR +16. **Astro Island Architektur:** Nutze für 100% statischen HTML-Code native Astro-Komponenten. Reines CSS/HTML hat immer Vorrang. +17. **React-Teilhydration:** Setze React-Komponenten (`client:visible` oder `client:load`) extrem sparsam und nur dort ein, wo echte Nutzer-Interaktion zwingend nötig ist (z. B. Kontaktformular). +18. **PageSpeed-Garantie:** Halte Skripte minimal, nutzen die native Astro `` Komponente zur Bildoptimierung und erzeuge Code, der die 95%-Performance-Marke knackt. +19. **Modulare UI-Vorlagen:** Baue das Projekt strukturiert auf: + * `BaseLayout.astro`: Zentrales Template für SEO, OpenGraph-Metatags und CSS-Reset. + * `Navbar`: Fixierter Header mit Logo, Navigation und prominentem CTA-Button ("Erstgespräch buchen"). + * `Hero`: Starker Slogan gekoppelt mit einem visuellen Indikator für extreme Ladegeschwindigkeit. + * `BentoGrid`: Die 3 Kern-Säulen (*Webdesign*, *SEO/Sichtbarkeit*, *Hosting/Betrieb*) attraktiv verpackt. +20. **Strukturierte Formulare:** Designe das Kontaktformular barrierefrei mit sichtbaren Labels, klaren Fokus-Zuständen (`focus:ring-2 focus:ring-sky-500`) und eindeutigen Fehlermeldungen. diff --git a/.agents/skills/astro-react-architecture/SKILL.md b/.agents/skills/astro-react-architecture/SKILL.md new file mode 100644 index 0000000..4824ba8 --- /dev/null +++ b/.agents/skills/astro-react-architecture/SKILL.md @@ -0,0 +1,16 @@ +--- +name: astro-react-architecture +description: Guidelines for Astro Island architecture, light React partial hydration, page speed guarantees (>95%), modular templates, and accessible structured forms. +--- + +# Astro & React Architecture Guidelines + +16. **Astro Island Architektur:** Nutze für 100% statischen HTML-Code native Astro-Komponenten. Reines CSS/HTML hat immer Vorrang. +17. **React-Teilhydration:** Setze React-Komponenten (`client:visible` oder `client:load`) extrem sparsam und nur dort ein, wo echte Nutzer-Interaktion zwingend nötig ist (z. B. Kontaktformular). +18. **PageSpeed-Garantie:** Halte Skripte minimal, nutzen die native Astro `` Komponente zur Bildoptimierung und erzeuge Code, der die 95%-Performance-Marke knackt. +19. **Modulare UI-Vorlagen:** Baue das Projekt structured auf: + * `BaseLayout.astro`: Zentrales Template für SEO, OpenGraph-Metatags und CSS-Reset. + * `Navbar`: Fixierter Header mit Logo, Navigation und prominentem CTA-Button ("Erstgespräch buchen"). + * `Hero`: Starker Slogan gekoppelt mit einem visuellen Indikator für extreme Ladegeschwindigkeit. + * `BentoGrid`: Die 3 Kern-Säulen (*Webdesign*, *SEO/Sichtbarkeit*, *Hosting/Betrieb*) attraktiv verpackt. +20. **Strukturierte Formulare:** Designe das Kontaktformular barrierefrei mit sichtbaren Labels, klaren Fokus-Zuständen (`focus:ring-2 focus:ring-sky-500`) und eindeutigen Fehlermeldungen. diff --git a/.agents/skills/bento-content-shuffling/SKILL.md b/.agents/skills/bento-content-shuffling/SKILL.md new file mode 100644 index 0000000..e946fac --- /dev/null +++ b/.agents/skills/bento-content-shuffling/SKILL.md @@ -0,0 +1,12 @@ +--- +name: bento-content-shuffling +description: Verhindert visuelle Monotonie durch die gezielte Durchmischung von Inhaltstypen innerhalb des asymmetrischen Grid-Layouts. +--- + +# Bento Content Shuffling Guidelines + +* **Der 3-Elemente-Mix:** Ein Raster darf niemals nur aus Text-Bild-Kombinationen bestehen. Es wechselt strikt zwischen: + 1. Rein visuellen Cards (z.B. ein isoliertes, hochauflösendes UI-Element eines Handwerker-Dashboards). + 2. Daten-Getriebenen Cards (z.B. ein animierter PageSpeed-Kreis, der live auf 100% hochzählt). + 3. Story-Cards (z.B. ein großes, prägnantes Zitat eines Malermeisters im fetten Typografie-Stil). +* **Größen-Dynamik:** Strikter Wechsel der Card-Dimensionen (1x1, 2x1, 1x2, 2x2) basierend auf der Wichtigkeit des Inhalts, um eine natürliche visuelle Hierarchie zu erzeugen. diff --git a/.agents/skills/bento-grid-architecture/SKILL.md b/.agents/skills/bento-grid-architecture/SKILL.md new file mode 100644 index 0000000..42d0cbb --- /dev/null +++ b/.agents/skills/bento-grid-architecture/SKILL.md @@ -0,0 +1,10 @@ +--- +name: bento-grid-architecture +description: Bento-grid layout rules (Non-Linear Layouts, Content-Mix Rule, Visual Anchor). +--- + +# Bento Grid Architecture Guidelines + +* **Non-Linear Layouts:** Brich monotone Listen auf. Nutze asymmetrische Tailwind-Grids (`grid-cols-1 md:grid-cols-3`) mit unterschiedlichen Box-Breiten (`md:col-span-2` vs. `md:col-span-1`). +* **Content-Mix Rule:** Befülle das Bento-Grid dynamisch. Kombiniere reine Text-Kacheln mit visuellen Kacheln (z. B. interaktiven Metriken, Prozess-Schritten oder Tech-Icons). +* **Visual Anchor:** Eine Kachel im Grid muss immer als Haupt-Blickfang (Visual Anchor) dominieren (größer, farbintensiver oder animiert). diff --git a/.agents/skills/bento-interaction-states/SKILL.md b/.agents/skills/bento-interaction-states/SKILL.md new file mode 100644 index 0000000..0c47020 --- /dev/null +++ b/.agents/skills/bento-interaction-states/SKILL.md @@ -0,0 +1,10 @@ +--- +name: bento-interaction-states +description: Steuert dynamische und abwechslungsreiche Hover- und Interaktionszustände innerhalb des Bento-Grids, um den Entdeckerdrang zu wecken. +--- + +# Bento Interaction States Guidelines + +* **Asymmetrischer Reveal:** Beim Hovern über eine Bento-Card verschieben sich Bildelemente im Inneren leicht (Parallaxe über CSS `transform: translateY(-5px)`), oder es wird ein versteckter CTA-Pfeil flüssig eingeblendet. +* **Spotlight-Glow:** Implementierung eines mausfolgenden JavaScript-freien oder minimalen CSS-Glow-Effekts, bei dem der Rand der Card exakt dort aufleuchtet (Sky-Blue), wo der Mauszeiger sich befindet. +* **Status-Indikatoren:** Jedes Template im Katalog erhält "Live-Tags" (z.B. pulsierende grüne Punkte für "Live-Vorschau aktiv" oder kleine animierte Lade-Icons bei Interaktion), die Hochwertigkeit signalisieren. diff --git a/.agents/skills/corporate-dark-mode/SKILL.md b/.agents/skills/corporate-dark-mode/SKILL.md new file mode 100644 index 0000000..e6c3801 --- /dev/null +++ b/.agents/skills/corporate-dark-mode/SKILL.md @@ -0,0 +1,12 @@ +--- +name: corporate-dark-mode +description: Strict color scheme (#0B0F19 background, white text, #38BDF8 accents), 8pt grid system, high scannability, WCAG contrast (4.5:1), and mobile-first design. +--- + +# Corporate Dark Mode & UI Guidelines + +5. **Striktes Farbschema:** Basis-Hintergrund: Edles Anthrazit/Schwarz (`#0B0F19`), Haupttext: Reinweiß, Akzente & Highlights: Arktis-Blau (`#38BDF8`). Keine Ausnahmen. +6. **8pt-Grid-System:** Nutze für Layouts, Paddings und Margins konsequent Tailwind-Abstände in 4er-/8er-Schritten (`p-4`, `p-8`, `gap-4`, `gap-8`, `space-y-4`). +7. **Visuelle Hierarchie & Scannbarkeit:** Slogans groß und markant, Fließtext in cleanem Weiß/Grau. Halte die Zeilenlänge für optimale Lesbarkeit kurz (`max-w-xl` bis `max-w-2xl`). +8. **WCAG-Barrierefreiheit:** Garantiere bei allen Text- und Hintergrund-Kombinationen ein Kontrastverhältnis von mindestens 4.5:1 für perfekte Lesbarkeit. +9. **Mobile-First-Responsive-Design:** Plane Layouts immer zuerst einspaltig für Smartphones (`grid-cols-1`) und skaliere sie am Desktop dynamisch (z. B. `md:grid-cols-3`). diff --git a/.agents/skills/git-workflow/SKILL.md b/.agents/skills/git-workflow/SKILL.md new file mode 100644 index 0000000..cff424d --- /dev/null +++ b/.agents/skills/git-workflow/SKILL.md @@ -0,0 +1,11 @@ +--- +name: git-workflow +description: Rules for atomic commits, semantic commit prefixes (feat, fix, docs, style, refactor), imperative language, and clean history checking. +--- + +# Git & Workflow Guidelines + +1. **Atomare Commits:** Generiere Code so, dass jede logische Änderung isoliert committet werden kann (z. B. Navbar separat von Hero). +2. **Semantic Commits:** Nutze für Commit-Vorschläge zwingend die standardisierten Präfixe: `feat:`, `fix:`, `docs:`, `style:`, `refactor:`. +3. **Imperative Sprache:** Formuliere Commit-Nachrichten immer als prägnanten Befehl (z. B. `feat: add bento grid layout`). +4. **Clean History & Qualitäts-Check:** Prüfe vor jeder Ausgabe die korrekte Formatierung und stelle sicher, dass keine ungenutzten Imports verbleiben. diff --git a/.agents/skills/glassmorphism-glow-effects/SKILL.md b/.agents/skills/glassmorphism-glow-effects/SKILL.md new file mode 100644 index 0000000..d25b08b --- /dev/null +++ b/.agents/skills/glassmorphism-glow-effects/SKILL.md @@ -0,0 +1,10 @@ +--- +name: glassmorphism-glow-effects +description: Glassmorphism and glow guidelines (Matte Boxen, Background Aurora Glows, Reactive Micro-Interactions). +--- + +# Glassmorphism & Glow Effects Guidelines + +* **Matte Boxen (Glassmorphismus):** Gestalte Kacheln mit transluzenten Ebenen und extrem feinen Rändern: `bg-slate-900/50 backdrop-blur-md border border-white/[0.08]`. +* **Background Aurora Glows:** Platziere extrem weiche, farbige Lichtpunkte hinter den Kacheln für visuelle Tiefe: `bg-sky-500/10 blur-[120px] absolute pointer-events-none`. +* **Reactive Micro-Interactions:** Jede Kachel muss auf Hover edel reagieren: Leichtes Anheben, Erhöhung der Rand-Helligkeit und Intensivierung des Glows (`transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`). diff --git a/.agents/skills/hybrid-bento-scrolling/SKILL.md b/.agents/skills/hybrid-bento-scrolling/SKILL.md new file mode 100644 index 0000000..6582adb --- /dev/null +++ b/.agents/skills/hybrid-bento-scrolling/SKILL.md @@ -0,0 +1,9 @@ +--- +name: hybrid-bento-scrolling +description: Kombiniert klassisches vertikales Scrollen mit horizontalen oder fixierten Elementen innerhalb des Bento-Grids, um die Verweildauer zu maximieren. +--- + +# Hybrid Bento Scrolling Guidelines + +* **Sticky-Anchor-Cards:** In einem 3-Spalten-Grid bleibt die linke, große Haupt-Card (z.B. mit dem Titel "Maler-Templates") beim Scrollen fixiert (CSS `sticky top-24`), während die rechten, kleineren Cards mit den Design-Variationen flüssig vorbeiscrollen. +* **CSS-Driven Scroll Animations:** Nutzung von nativen CSS `@keyframes` gekoppelt an den Scroll-Fortschritt, um Elemente flüssig einzublenden oder zu transformieren. diff --git a/.agents/skills/tactile-craftsman-ui/SKILL.md b/.agents/skills/tactile-craftsman-ui/SKILL.md new file mode 100644 index 0000000..8ca5a24 --- /dev/null +++ b/.agents/skills/tactile-craftsman-ui/SKILL.md @@ -0,0 +1,10 @@ +--- +name: tactile-craftsman-ui +description: Verleiht dem modernen UI subtile, physische Design-Elemente, die Präzision, Handwerk und Wertigkeit vermitteln, ohne die Performance zu belasten. +--- + +# Tactile Craftsman UI Guidelines + +* **Subtile Texturen:** Nutzung von extrem leichten, CSS-basierten Noise-Overlays (z.B. opacity-[0.015] im Hintergrund) auf Cards, um eine feine, matte "Material-Haptik" (wie geschliffenes Metall oder feiner Putz) zu erzeugen. +* **"Blueprint"-Raster:** Gezielter Einsatz von feinen, unterbrochenen Gitternetzlinien (Subtle Grid Borders, 1px border-slate-800/60) im Hintergrund von Sektionen, die an technische Zeichnungen erinnern. +* **Akzent-Indikatoren:** Nutzung von kleinen, geometrischen UI-Details wie simulierten Fadenkreuzen, Ecken-Markierungen (Border Corners) oder dezenten Tech-Badges in den Ecken von Bento-Cards, um "Präzisionsarbeit" visuell zu spiegeln. diff --git a/.agents/skills/ui-element-best-practices/SKILL.md b/.agents/skills/ui-element-best-practices/SKILL.md new file mode 100644 index 0000000..2c917b8 --- /dev/null +++ b/.agents/skills/ui-element-best-practices/SKILL.md @@ -0,0 +1,11 @@ +--- +name: ui-element-best-practices +description: UI element guidelines (Smart Navbar, Accessible Inputs, SEO Accordions, Utility Badges). +--- + +# UI Element Best Practices Guidelines + +* **Smart Navbar:** Muss fixiert (`sticky top-0`) oder intelligent einblendbar sein. Der primäre CTA-Button platziert sich unübersehbar ganz rechts. +* **Accessible Inputs:** Verwende in Formularen niemals verschwindende Platzhalter als Ersatz für Labels. Nutze feste Labels und markante Focus-Zustände (`focus:ring-2 focus:ring-sky-500`). +* **SEO Accordions:** Nutze strukturierte Akkordeons (z. B. für FAQs) im Footer-Bereich, um die Seite visuell sauber zu halten, aber maximalen Text für das Google-Ranking bereitzustellen. +* **Utility Badges:** Setze kleine, pillenförmige Indikatoren (`px-3 py-1 rounded-full text-xs`) über Headlines ein, um den Blick des Nutzers vorzufiltern. diff --git a/.agents/skills/ultra-modern-design/SKILL.md b/.agents/skills/ultra-modern-design/SKILL.md new file mode 100644 index 0000000..e3111d7 --- /dev/null +++ b/.agents/skills/ultra-modern-design/SKILL.md @@ -0,0 +1,13 @@ +--- +name: ultra-modern-design +description: Matte boxen (glassmorphism), glow & aurora effects, bento-grid asymmetry, text-slicing gradients, premium micro-interactions, and diverse bento content mix. +--- + +# Ultra-Modern Design Patterns & Effects Guidelines + +10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`. +11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`. +12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten. +13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`. +14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`. +15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten). diff --git a/.agents/skills/webdesign-foundations/SKILL.md b/.agents/skills/webdesign-foundations/SKILL.md new file mode 100644 index 0000000..f469b8f --- /dev/null +++ b/.agents/skills/webdesign-foundations/SKILL.md @@ -0,0 +1,11 @@ +--- +name: webdesign-foundations +description: Strategische Design-Grundregeln (3-Second-Rule, Visual Hierarchy, Whitespace Mastery, Thumb-Zone & Mobile-First). +--- + +# Webdesign Foundations Guidelines + +* **3-Second-Rule:** Jedes Einstiegs-Layout (Hero) muss sofort Klarheit über Angebot, Nutzen und den nächsten Schritt (CTA) liefern. +* **Visual Hierarchy:** Lenke das Auge gezielt über markante Größenunterschiede, fette Typografie und kontraststarke Aktions-Elemente. +* **Whitespace Mastery:** Nutze großzügigen Leerraum (`py-16`, `py-24`, `space-y-12`), um Inhalten Raum zum Atmen zu geben und ein Premium-Gefühl zu erzeugen. +* **Thumb-Zone & Mobile-First:** Platziere interaktive Elemente in der mobilen Ansicht so, dass sie perfekt mit dem Daumen erreichbar sind.