NotionKit Web v1.0.0
NotionKit Web v1.0.0
Das Website-Template der NotionKit-Familie: Dokumentation aus Markdown, Blog mit RSS, Marketing-Sektionen und ein App-Panel, das aus denselben Komponenten besteht wie das Produkt. Zweisprachig, mit No-JS-Fallbacks und einer Smoke-Suite als Deploy-Gate.
✓ Kein Tracking✓ Ohne externe Requests✓ GitHub-Template✓ SKILL.md für KI-Agenten
Seitenbaum, Sektionen, „Auf dieser Seite“, Vor/Zurück und ein Titel-Filter – aus Dateien in src/content/docs/.
Product mit gebautem App-Panel, Docs mit Suche und Baum, Editorial rein typographisch – Import tauschen genügt.
FeatureGrid, Bento, Steps, CodeWindow, StatsRow, LogoCloud, Pricing, Testimonials, FAQ, CTA, Contact, Decor – alles aus nk-*.
Theme vor dem ersten Paint, No-JS-Fallback aus einem generierten Spiegel der Foundation, Rebranding nur in brand.css.
Default-Sprache an der Wurzel, weitere unter /<code>/ – gleiche Slugs, hreflang, Sitemap, Sprach-Links statt JS-Toggle.
Playwright-Smoke-Suite: beide Themes × Desktop/Mobile, No-JS, Navigation von Unterseiten, RSS/Sitemap/llms.txt. Rot = kein Deploy.
Danach: src/data/site.ts anpassen, brand.css färben, Inhalte in src/content/ ersetzen. Die zehn Schritte bis zur eigenen Site stehen in der Dokumentation.
bashnpm create astro -- --template JUNGHERZ/NotionKit-Web my-site
cd my-site && npm install
npm run dev
SKILL.md ist eine maschinenlesbare Referenz: Sektionen-Katalog, Regeln und Schritt-für-Schritt-Rezepte für eine neue Site, eine Konvertierung und Template-Updates. Gib sie Claude Code, Cursor, Copilot oder einem normalen Chat – Prompt kopieren, Platzhalter füllen, fertig.
Baue eine neue Website auf Basis des NotionKit-Web-Templates:
https://github.com/JUNGHERZ/NotionKit-Web
Lies zuerst die SKILL.md in diesem Repo und folge dann Rezept §5
("New Website From This Template").
Projekt: <Firma / Produkt / Thema>
Hero: <Product (App-Panel) / Docs / Editorial – oder "wähle selbst">
Sprachen: <Deutsch + Englisch / eine Sprache>
Doku-Bereiche: <z. B. Erste Schritte, Konzepte, Referenz>
Blog: <ja / nein>
Markenfarbe: <Hex – oder "schlag etwas vor">
Sektionen: <z. B. Features, Steps, Preise, FAQ, Kontakt – oder "wähle selbst">
Für die Konvertierung einer bestehenden Site auf Rezept §6 verweisen und die alte URL ergänzen. In einem bereits abgeleiteten Projekt genügt „aktualisiere diese Site aus dem Template – folge SKILL.md Rezept §7“.
CSS-Foundation: Tokens, ~100 Komponenten, Light/Dark, kein Build-Schritt. Kommt per npm ins Template.
Custom Elements auf denselben Tokens – für Apps. Keine Voraussetzung für das Web-Template.
Dieses Template: komplette Websites – Docs, Wissen, Blog, Produktseiten.