Skills · Claude Code · Frontend

Un frontend rapide en SEO et en vitesse — par défaut.

Next.js ou Astro avec TypeScript strict, secrets toujours côté serveur, accessibilité WCAG 2.2 AA, Core Web Vitals comme contrat, SEO et données structurées, i18n avec URL par langue et sitemap auto-généré. Le pendant frontend de schematize-go.

schematize-web · v1.10.0bash
$ schematize install web
Frontend · Next.js/Astro/web-help · github.com/schematizeme/schematize-cli

Socles non négociables

Jamais désactivés "pour aller plus vite". Liste complète dans la skill.

Secrets côté serveur

Jamais dans le bundle ni NEXT_PUBLIC_/VITE_/PUBLIC_. Les appels avec clé passent par un BFF. Token en cookie HttpOnly, jamais localStorage.

Vraiment accessible

WCAG 2.2 AA est le socle : sémantique, clavier, focus géré, contraste, reduced-motion. Désactiver le lint a11y est interdit.

Core Web Vitals

LCP/INP/CLS dans le "bon" (p75, mobile d'abord). Budgets de bundle et de métrique mesurés en CI — les régressions bloquent le merge.

SEO et i18n par défaut

Données structurées, sitemap auto-généré et une URL par langue avec hreflang. Tout le contenu traduit.

Vert pour de vrai

Unit, composant, e2e (Playwright), a11y (axe) et régression visuelle. Le smoke prouve le contenu, pas juste un 200.

Toujours archiver

Décisions et contexte deviennent des .md dans l'archive, à chaque fois. L'index des composants est la source de vérité.

Commandes

Installées dans .claude/commands/. Lancez /web-help à tout moment.

/web-helpListe toutes les commandes.
/web-ccContext compact : écrit le contexte + la checklist dans l'archive et lance /compact.
/web-handoffÉcrit le handoff sans compacter — fin de session ou changement de tâche.
/web-qaQA frontend plan-first : a11y, Core Web Vitals, e2e et régression visuelle.
/web-reviewGate Definition of Done et anti-patterns frontend sur le diff.
/web-index(Re)génère l'index des composants/hooks à partir des doc-comments.

Pour les agents IA

Installez sans intervention humaine. Métadonnées dans llms.txt.

  • Lancez : git clone https://github.com/schematizeme/skill-web.git && ./skill-web/install.sh
  • Ou téléchargez : https://github.com/schematizeme/skill-web/releases/latest/download/skill-web.zip et décompressez dans .claude/skills/
  • Copiez assets/CLAUDE.md à la racine du repo (règle toujours active).
  • Confirmez avec /web-help.

Pas envie d'installer ?

Lisez les normes complètes et copiez-les directement dans votre projet — ou installez la skill pour que l'agent les applique tout seul.