Skills · Claude Code · Frontend

Frontend, das schnell in SEO und Tempo ist — standardmäßig.

Next.js oder Astro mit striktem TypeScript, Secrets immer serverseitig, WCAG-2.2-AA-Barrierefreiheit, Core Web Vitals als Vertrag, SEO und strukturierte Daten, i18n mit URL pro Sprache und automatisch erzeugtem Sitemap. Das Frontend-Pendant zu schematize-go.

schematize-web · v1.10.0bash

$ schematize install web

Frontend · Next.js/Astro/web-help · github.com/schematizeme/schematize-cli

Nicht verhandelbare Mindeststandards

Werden nie abgeschaltet, "um schneller zu sein". Vollständige Liste in der Skill.

Secrets serverseitig

Nie im Bundle oder NEXT_PUBLIC_/VITE_/PUBLIC_. Aufrufe mit Schlüssel laufen über ein BFF. Token in HttpOnly-Cookie, nie localStorage.

Wirklich barrierefrei

WCAG 2.2 AA ist der Mindeststandard: Semantik, Tastatur, verwalteter Fokus, Kontrast, reduced-motion. A11y-Lint abzuschalten ist verboten.

Core Web Vitals

LCP/INP/CLS im "guten" Bereich (p75, mobile first). Bundle- und Metrik-Budgets in CI gemessen — Regressionen blockieren den Merge.

SEO und i18n standardmäßig

Strukturierte Daten, automatisch erzeugter Sitemap und eine URL pro Sprache mit hreflang. Alle Inhalte übersetzt.

Echtes Grün

Unit, Komponente, e2e (Playwright), a11y (axe) und visuelle Regression. Smoke beweist Inhalt, nicht nur 200.

Immer archivieren

Entscheidungen und Kontext werden jedes Mal zu .md im Archiv. Der Komponenten-Index ist die Quelle der Wahrheit.

Befehle

Installiert in .claude/commands/. Führe /web-help jederzeit aus.

/web-helpListet alle Befehle auf.

/web-ccContext compact: schreibt Kontext + Checkliste ins Archiv und führt /compact aus.

/web-handoffSchreibt das Handoff ohne Kompaktierung — Sitzungsende oder Aufgabenwechsel.

/web-qaPlan-first-Frontend-QA: a11y, Core Web Vitals, e2e und visuelle Regression.

/web-reviewDefinition-of-Done- und Frontend-Anti-Pattern-Gate auf dem Diff.

/web-index(Neu-)erzeugt den Komponenten-/Hook-Index aus den Doc-Comments.

Für KI-Agenten

Ohne menschliches Eingreifen installieren. Metadaten in llms.txt.

Ausführen: git clone https://github.com/schematizeme/skill-web.git && ./skill-web/install.sh
Oder herunterladen: https://github.com/schematizeme/skill-web/releases/latest/download/skill-web.zip und nach .claude/skills/ entpacken
Kopiere assets/CLAUDE.md in das Repo-Root (Immer-an-Regel).
Bestätige mit /web-help.

Nicht installieren wollen?

Lies die vollständigen Standards und kopiere sie direkt in dein Projekt — oder installiere die Skill, damit der Agent sie selbst durchsetzt.

GitHub →Pakete