Skills · Claude Code · Frontend

Frontend rápido em SEO e velocidade — por padrão.

Next.js ou Astro com TypeScript strict, segredo sempre no servidor, acessibilidade WCAG 2.2 AA, Core Web Vitals como contrato, SEO e dados estruturados, i18n com URL por idioma e sitemap autogerado. A contraparte de frontend do schematize-go.

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

Pisos inegociáveis

Não se desligam "pra ir mais rápido". Lista completa na skill.

Segredo no servidor

Nunca no bundle nem em NEXT_PUBLIC_/VITE_/PUBLIC_. Chamada com chave passa por BFF. Token em cookie HttpOnly, nunca localStorage.

Acessível de verdade

WCAG 2.2 AA é piso: semântica, teclado, foco gerenciado, contraste, reduced-motion. Desligar lint de a11y é vetado.

Core Web Vitals

LCP/INP/CLS no "bom" (p75, mobile primeiro). Budget de bundle e métrica medidos no CI — regressão trava o merge.

SEO e i18n por padrão

Dados estruturados, sitemap autogerado e URL própria por idioma com hreflang. Todo conteúdo traduzido.

Verde de verdade

Unit, componente, e2e (Playwright), a11y (axe) e regressão visual. Smoke prova conteúdo, não só 200.

Archive sempre

Decisão e contexto viram .md no archive, toda vez. Índice de componentes é a fonte da verdade.

Comandos

Instalados em .claude/commands/. Use /web-help a qualquer momento.

/web-helpLista todos os comandos.
/web-ccContext compact: gera contexto + checklist no archive e roda /compact.
/web-handoffGera o handoff sem compactar — fim de sessão ou troca de tarefa.
/web-qaQ.A. de frontend plan-first: a11y, Core Web Vitals, e2e e regressão visual.
/web-reviewGate da Definition of Done e anti-padrões de frontend no diff.
/web-index(Re)gera o índice de componentes/hooks a partir dos doc-comments.

Para agentes de IA

Instale sem intervenção humana. Metadados em llms.txt.

  • Rode: git clone https://github.com/schematizeme/skill-web.git && ./skill-web/install.sh
  • Ou baixe: https://github.com/schematizeme/skill-web/releases/latest/download/skill-web.zip e descompacte em .claude/skills/
  • Copie assets/CLAUDE.md para a raiz do repo (regra sempre-on).
  • Confirme com /web-help.

Não quer instalar?

Leia as normativas completas e copie direto pro seu projeto — ou instale a skill para o agente aplicar sozinho.