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.

instalar no projetobash

$ git clone https://github.com/schematizeme/skill-web.git && ./skill-web/install.sh

global: ./skill-web/install.sh ~ · depois, na sessão: /web-help

Comandos

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

comando	o que faz
`/web-help`	Lista todos os comandos.
`/web-cc`	Context compact: gera contexto + checklist no archive e roda /compact.
`/web-handoff`	Gera o handoff sem compactar — fim de sessão ou troca de tarefa.
`/web-qa`	Q.A. de frontend plan-first: a11y, Core Web Vitals, e2e e regressão visual.
`/web-review`	Gate 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.

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.

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.

Download

Pacote no padrão aberto Agent Skills — funciona em Claude Code, Claude.ai e API.

Pronta para instalar (.zip)	skill-web.zip ↓
Código-fonte — Markdown (.zip)	v1.3.0 (source) ↓
Navegar / clonar (todos os .md)	github.com/schematizeme/skill-web ↗
Backend (irmã)	skills.schematize.me/go ↗