Skill Pack — criar-site v2

Pacote de skills no padrão aberto Agent Skills (agentskills.io) para criar e auditar websites modernos com Next.js + TypeScript + Tailwind + shadcn/ui (Sanity CMS opcional).

Funciona em qualquer ferramenta de IA que implemente o padrão: Claude Code, Cursor, Windsurf, OpenCode, Kiro, GitHub Copilot, VS Code, Gemini CLI, OpenAI Codex, Roo Code, AmpCode, e mais de 40 ferramentas (veja a lista completa).

Skills incluídas

| Skill | Quando usar | |---|---| | criar-site | Skill raiz. Padrão canônico para criar ou auditar sites. Inclui briefing do projeto, sugestão de estilo visual por contexto, stack versionada, CSP contínuo, seed de conteúdo e limites de complexidade ciclomática. | | auditar-site | Auditoria de site existente. Gap analysis em 10 áreas (inclui URLs Limpas, Isolamento de CSS, Complexidade, Seed e Idioma) + relatório Current State → Target State → Priority Matrix. | | design-system | Tokens de design (cores, tipografia, animação, reveal), Tailwind config + shadcn/ui, estrutura Atomic Design com componentes em PT-BR e padrões de efeitos visuais. | | sanity-schema | Schemas Sanity (página, postagem, projeto, configuração), queries GROQ, cliente next-sanity, Studio isolado e template de seed script com upsert. Nova. | | deploy-checklist | Validação do Quality Gate pré-deploy. 12 checklists: URLs Limpas, SEO, Isolamento de CSS, segurança com CSP, performance, acessibilidade, manutenibilidade, complexidade, seed, idioma e CMS. |

Auto-descoberta (zero config)

Após rodar npx criar-site setup, as skills são copiadas para os diretórios padrão de cada ferramenta. As IAs detectam automaticamente — nenhuma configuração adicional necessária.

No modo dev (git clone), as junctions são usadas em vez de cópia para facilitar edição. Execute setup-junctions.ps1 para criá-las.

Instalação

npm (recomendado)

npx criar-site setup

Pronto. As skills são copiadas automaticamente para os diretórios das ferramentas que você selecionar.

O setup é interativo: ele pergunta quais ferramentas instalar e você digita os números separados por vírgula (ex: 1,3,5) ou Enter para instalar todas.

Para automação (sem interação), use --tools:

npx criar-site setup --tools=claude,cursor,windsurf

Opções do setup

npx criar-site setup --target=/caminho/do/projeto   # instala em outro diretório
npx criar-site setup --tools=claude,opencode         # instala só para ferramentas específicas
npx criar-site setup --force                          # sobrescreve skills já instaladas
npx criar-site setup --dry-run                        # mostra o que faria, sem modificar nada
npx criar-site --version                              # exibe a versão

Se algum diretório (ex: .claude/skills/) já existir e tiver arquivos, o setup pula com aviso em vez de sobrescrever. Use --force para substituir.

npm (instalação global)

npm install -g criar-site
criar-site setup

Git clone + junctions (modo dev)

git clone <repo-url>
cd criar-site
.\setup-junctions.ps1        # Windows
# ou
ln -s ../skills .claude/skills   # Linux/macOS (repita para cada ferramenta)

Instalação manual (sem npm)

Copie as skills para o diretório da sua ferramenta:

mkdir -p .claude/skills
cp -r skills/* .claude/skills/

Como usar

1. Inicie sua ferramenta de IA no projeto.
2. Descreva a tarefa em linguagem natural:
   • "Crie um site para meu portfólio de arquitetura"
   • "Audite o site em ./meu-projeto"
   • "Crie os schemas do Sanity para o blog e gere o seed script"
   • "Crie o design system com as cores XYZ"
   • "Rode o checklist de deploy"
3. A ferramenta carrega a skill automaticamente (matching por description) ou você invoca explicitamente.

Novo fluxo: Ao criar um site do zero, a skill inicia com um briefing obrigatório (ramo, propósito, público, conteúdo, identidade visual). A partir das respostas, sugere estilo visual por contexto, stack, CMS e arquitetura — você decide o que usar.

Invocação explícita

| Ferramenta | Como invocar | |---|---| | Claude Code | /criar-site, /auditar-site | | Cursor | @criar-site, @auditar-site | | Windsurf | @criar-site | | Kiro | /criar-site | | GitHub Copilot | @criar-site | | Kilo (legado) | /criar-site (via .kilo/command/) |

Compatibilidade retroativa — Kilo

A pasta .kilo/ mantém compatibilidade com o Kilo (ferramenta que originou este pacote):

• .kilo/command/*.md — shims que expõem /criar-site, /auditar-site etc. como slash commands no Kilo, delegando para skills/.
• .kilo/agent/website-auditor.md — subagent Kilo-only (mode: subagent) que executa auditoria em contexto isolado.

A camada .kilo/ é opcional. Se você não usa o Kilo, pode deletá-la.

Setup script (modo dev)

Para desenvolvimento no repositório, setup-junctions.ps1 recria os directory junctions:

# Ver o que seria criado (dry run)
.\setup-junctions.ps1 -DryRun

# Criar junctions
.\setup-junctions.ps1

# Especificar caminho alternativo para skills/
.\setup-junctions.ps1 -TargetPath ".\skills"

Validação do frontmatter

npx skills-ref validate ./skills

Ou instale o validador oficial: https://github.com/agentskills/agentskills/tree/main/skills-ref

Idioma

Todas as skills produzem output em português brasileiro (PT-BR). Veja a skill criar-site para o padrão completo: identificadores, comentários, JSDoc, schemas Sanity (com exceções documentadas para name técnico GROQ).

Versionamento

O projeto usa Conventional Commits e standard-version para versionamento automático.

Formato dos commits

<tipo>(<escopo>): <descrição>

TIPOS: feat, fix, docs, chore, refactor, perf, test, style

Exemplos:

feat: add seed script with upsert logic
fix(cli): handle missing .env.local gracefully
docs: update README with new skills table
chore(deps): add standard-version

Publicar uma nova versão

npm run release          # bump automático (patch, minor ou major) baseado nos commits
npm run release:minor    # força minor (ex: 2.0.0 → 2.1.0)
npm run release:major    # força major (ex: 2.0.0 → 3.0.0)

Isso atualiza o package.json, gera CHANGELOG.md, commita e cria uma tag git. Depois é só dar push:

git push --follow-tags

Licença

Licença

Proprietary.