Skills · Claude Code · Frontend

Frontend rápido en SEO y velocidad — por defecto.

Next.js o Astro con TypeScript strict, secretos siempre del lado del servidor, accesibilidad WCAG 2.2 AA, Core Web Vitals como contrato, SEO y datos estructurados, i18n con URL por idioma y sitemap autogenerado. La contraparte de frontend de schematize-go.

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

Pisos no negociables

No se apagan "para ir más rápido". Lista completa en la skill.

Secretos en el servidor

Nunca en el bundle ni en NEXT_PUBLIC_/VITE_/PUBLIC_. La llamada con clave pasa por un BFF. Token en cookie HttpOnly, nunca localStorage.

Accesible de verdad

WCAG 2.2 AA es el piso: semántica, teclado, foco gestionado, contraste, reduced-motion. Apagar el lint de a11y está prohibido.

Core Web Vitals

LCP/INP/CLS en "bueno" (p75, mobile primero). Presupuesto de bundle y métrica medidos en CI — la regresión bloquea el merge.

SEO e i18n por defecto

Datos estructurados, sitemap autogenerado y URL propia por idioma con hreflang. Todo el contenido traducido.

Verde de verdad

Unit, componente, e2e (Playwright), a11y (axe) y regresión visual. El smoke prueba contenido, no solo 200.

Siempre archivar

Decisiones y contexto se vuelven .md en el archivo, cada vez. El índice de componentes es la fuente de verdad.

Comandos

Instalados en .claude/commands/. Usa /web-help cuando quieras.

/web-helpLista todos los comandos.
/web-ccContext compact: escribe contexto + checklist en el archivo y ejecuta /compact.
/web-handoffEscribe el handoff sin compactar — fin de sesión o cambio de tarea.
/web-qaQA de frontend plan-first: a11y, Core Web Vitals, e2e y regresión visual.
/web-reviewGate de Definition of Done y antipatrones de frontend en el diff.
/web-index(Re)genera el índice de componentes/hooks desde los doc-comments.

Para agentes de IA

Instala sin intervención humana. Metadatos en llms.txt.

  • Ejecuta: git clone https://github.com/schematizeme/skill-web.git && ./skill-web/install.sh
  • O descarga: https://github.com/schematizeme/skill-web/releases/latest/download/skill-web.zip y descomprime en .claude/skills/
  • Copia assets/CLAUDE.md a la raíz del repo (regla siempre activa).
  • Confirma con /web-help.

¿No quieres instalar?

Lee las normas completas y cópialas directo a tu proyecto — o instala la skill para que el agente las aplique solo.