schematize
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.

v1.12.1Frontend · Next.js/Astrogithub.com/schematizeme/skill-web

Mantenido por Lucas Andrade

schematize-web · v1.12.1bash
$ schematize install web
GitHub →descargar skill (.zip)/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.
/web-opsverifica el flujo de entornos/preview, el deploy solo por el pipeline (nada directo al sitio) y, en multi-app, el build paralelo/independencia
/web-iamfuerza/audita/scaffolda el IAM en el cliente (front de auth propio en auth.<domain>, flujos login/2FA/passkey, vista de dispositivos, cierre de sesión irreversible)
/web-claudecrea o ACTUALIZA (sobrescribe) el CLAUDE.md de la raíz del repositorio con la versión actual de la skill; hace backup si hay personalización local
/web-loadcarga a la fuerza TODO el cuerpo normativo de frontend (arquitectura/frontera cliente-servidor, clean code, seguridad, accesibilidad, rendimiento/CWV, SEO/i18n, pruebas) en el contexto y empieza a aplicarlo al p…

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.

GitHub →Paquetes