Dokumentation

Diese Seite ist die kuratierte Übersicht. Die Quelle der Wahrheit liegt im Repository: SKILL.md (maschinenlesbare Referenz mit allen Regeln und Rezepten) und die README. Wo diese Seite und das Repo auseinanderliegen, gewinnt das Repo.

Quick Start

# Neues Projekt aus dem Template aufsetzen
npm create astro@latest meine-site -- --template JUNGHERZ/GlassKit-Web
cd meine-site && npm install

npm run dev      # entwickeln
npm run build    # Build nach dist/
npm test         # Playwright-Smoke-Suite (baut + previewt selbst)

Alternativ auf GitHub „Use this template" nutzen. Erste Schritte im abgeleiteten Projekt: site/ löschen (diese Produktseite), base in astro.config.mjs auf den eigenen Repo-Namen setzen — oder für eine Custom Domain entfernen und public/CNAME anlegen. Das Deployment liegt als GitHub-Actions-Workflow bei; einmalig Pages-Source auf „GitHub Actions" stellen.

Architektur

Zwei Schichten, zwei Referenzen:

Schicht	Präfix	Ort
Design-Tokens + UI-Komponenten	`glass-`, `--gl-`	npm `@jungherz-de/glasskit` — wird nie editiert, nur Version gehoben
Site- & Sektions-Schicht	`glw-*`	`src/styles/site.css` in diesem Template

Die Dateien, die man beim Ableiten anfasst:

src/data/site.ts — Site-Name, Titel, Kontaktformular-Endpoint, Sprachen und der href()-Helper, über den jeder Link läuft.
src/components/*.astro — eine Datei pro Sektion; die Copy wohnt direkt neben ihrem Markup.
src/styles/brand.css — der einzige Ort für Kundenfarben (Token-Overrides, lädt zuletzt).
src/pages/index.astro — komponiert den One-Pager aus dem Sektions-Katalog.

Die vier Regeln, die alles am Laufen halten: keine <style>-Blöcke in .astro-Komponenten (Astro-Scoping bricht die globalen Mechaniken) · GlassKit-Import vor site.css · Farben nur über --gl-*-Tokens · keine externen Requests — die gebaute Site ist vollständig self-contained. Die komplette ✅/❌-Liste steht in SKILL.md §4.

Sektions-Katalog

src/pages/index.astro wird aus diesen Sektionen komponiert; was das Projekt nicht braucht, fliegt raus. Die Demo-Links springen direkt in die Live-Seite.

Sektion	Zweck	Demo
SiteHeader	Fixe Glass-Nav: Marke, Anker, Theme-Toggle, Mobile-Menü (funktioniert ohne JS)	ansehen ↗
Hero	Zielgruppen-Umschalter, Headline-Paar, CTAs, dekoratives Device-Panel (optionaler 3D-Tilt)	ansehen ↗
HeroEditorial	Alternativ-Hero: typografisch, ohne Device-Panel — für Agenturen/Dienstleister	—
LogoStrip	Social-Proof-Wortmarken, nur Text	—
Features	3-spaltiges Glass-Card-Grid aus einem `features[]`-Array	ansehen ↗
Bento	Feature-Karten mit eingebetteten Mini-Visualisierungen (gebaut, nicht gescreenshottet)	ansehen ↗
Process	Nummerierte So-funktioniert's-Schritte	ansehen ↗
Flow	Prozess-Diagramm: Glass-Nodes + animierte SVG-Verbindungen, ohne JS	ansehen ↗
Showcase	3D-geneigtes „Spatial"-Glasfenster (visionOS-Look)	ansehen ↗
Stats	4 KPI-Zahlen, typografisch	—
Cases	Erfolgsgeschichten mit Gradient-Kennzahlen	ansehen ↗
Team	Personen-Grid mit Initialen-Avataren	ansehen ↗
Pricing	Zwei Plan-Grids, eins pro Zielgruppe	ansehen ↗
Quote	Serifen-Testimonial, eins pro Zielgruppe	—
Faq	Accordion + FAQPage-JSON-LD; ohne JS alle Antworten offen	ansehen ↗
LanguageSwitcher	DE\|EN-Pill (2 Sprachen) oder Flaggen-Dropdown (3+); Einträge sind Links	ansehen ↗
Contact	Provider-agnostisches Kontaktformular (n8n / Web3Forms / Formspree), Honeypot, Consent	ansehen ↗
CtaBanner	Abschließendes Call-to-Action-Panel	—
SiteFooter	Link-Spalten, Rechtsseiten-Links	—
glw-page/prose	Text-Unterseiten (Impressum/Datenschutz-Muster)	ansehen ↗

Alle Details pro Sektion (Arrays, Opt-in-Flags, Accessibility-Regeln): SKILL.md §2.

Branding

Kundenfarben berühren nie glasskit.css oder die glw--Regeln. src/styles/brand.css ist der einzige Ort für Brand-Overrides — ein :root-Block aus Token-Werten, der zuletzt lädt und deshalb gegen beide Themes gewinnt:

:root {
  --gl-primary: #7c5cff;
  --gl-primary-2: #4d34d8;
  /* … weitere --gl-*-Tokens; kommentierte Beispiel-Themes liegen in der Datei */
}

Opt-ins

Blog — Markdown-Posts über eine Content Collection, Übersichtsseite, RSS-Feed. Nur ausliefern, wenn der Kunde wirklich publiziert; exakte Ausbau-Schritte in SKILL.md §3.
Mehrsprachigkeit (DE/EN) — Sprachzweige: die Default-Sprache liegt an der Wurzel, jede weitere unter /<code>/ mit eigenen Seiten und Komponenten, überall gleiche Slugs. hreflang, Sitemap-Alternates und der Umschalter leiten sich automatisch ab. Details in SKILL.md §3b.
Kontaktformular-Provider — derselbe Form-POST funktioniert gegen einen n8n-Webhook, Web3Forms oder Formspree; konfiguriert in site.ts, leerer Endpoint = Demo-Modus. Provider-Matrix in SKILL.md §4b.

Rezepte

Drei Schritt-für-Schritt-Rezepte decken den ganzen Lebenszyklus ab — hier zusammengefasst, ausführbar in der SKILL.md:

Neue Website aus dem Template — base/site.ts, Hero-Variante wählen, Copy ersetzen, Sektionen komponieren, Rechtsseiten, mit der Smoke-Suite verifizieren. SKILL.md §5
Bestehende Website umstellen — alte Inhaltsblöcke auf Katalog-Sektionen mappen, Copy migrieren, ohne das alte CSS zu portieren. SKILL.md §6
Template-Updates ins abgeleitete Projekt holen — Template als zweites Git-Remote, CHANGELOG-Einträge zwischen den Releases abarbeiten, Mechanik-Dateien am Stück übernehmen, Projekt-Copy nie überschreiben. SKILL.md §7

GlassKit Web ist seit v1.0.0 versioniert — das CHANGELOG ist der Update-Leitfaden für abgeleitete Projekte.

KI-Workflow

Das Template ist dafür gebaut, von KI-Assistenten abgeleitet zu werden: Repo-URL an Claude Code, Cursor & Co. geben und auf die SKILL.md verweisen — sie enthält Katalog, Regeln und Rezepte in maschinenlesbarer Form („nach diesem Schema die neue Website umsetzen"). Die deployte Demo liefert zusätzlich llms.txt; abgeleitete Projekte generieren ihre eigene aus ihren Inhalten.

Der fertige Prompt

Funktioniert identisch in Claude Code, Cursor, VS Code / Copilot oder im Chat — kopieren, Platzhalter füllen, fertig:

Baue eine neue Website auf Basis des GlassKit-Web-Templates:
https://github.com/JUNGHERZ/GlassKit-Web

Lies zuerst die SKILL.md in diesem Repo und folge dort Recipe §5
("New Website From This Template").

Projekt:       <Firma / Produkt / Branche>
Zielgruppen:   <B2C, B2B oder beide>
Sprachen:      <nur Deutsch / Deutsch + Englisch>
Markenfarben:  <Hex-Werte — oder "mach einen Vorschlag">
Sektionen:     <z. B. Hero, Features, Preise, FAQ, Kontakt — oder "wähle passend">

Für die Umstellung einer bestehenden Website den Rezept-Verweis auf §6 tauschen und die URL der alten Site ergänzen. In einem bereits abgeleiteten Projekt genügt: „Aktualisiere diese Site aus dem Template — folge SKILL.md Recipe §7."