npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

autodoc-agent-kit

v1.0.0

Published

AI dev team in a box — install skills for Product, Engineering, QA, Design, and DevOps across any AI IDE

Readme

Claude Code Setup — Kit de Desenvolvimento AI

Setup portavel do Claude Code com agentes, skills, comandos, MCP servers e permissoes pre-configurados. Copie a pasta .claude/ para a raiz de qualquer projeto e comece a desenvolver.


Instalacao Rapida

# 1. Copie a pasta .claude/ para seu projeto
cp -r /caminho/para/.claude/ ./meu-projeto/

# 2. Copie o template e preencha com os dados do seu projeto
cp .claude/CLAUDE.template.md ./CLAUDE.md

# 3. Autentique os MCP servers (apenas na primeira vez)
# Dentro do Claude Code, execute:
/mcp
# Siga o fluxo de login para GitHub e Figma

Estrutura da Pasta

.claude/
├── CLAUDE.md              # Regras de comportamento do agente
├── CLAUDE.template.md     # Template para criar CLAUDE.md do projeto
├── settings.json          # Permissoes (allow/deny)
├── .mcp.json              # Servidores MCP configurados
├── agents/                # 10 agentes especializados
├── commands/              # 13 comandos slash (7 dev + 6 PM)
├── skills/                # 53 skills (7 dev + 46 PM)
└── README.md              # Este arquivo

Agentes Especializados

Agentes sao acionados automaticamente pelo Claude quando a tarefa se encaixa, ou voce pode pedir diretamente.

| Agente | O que faz | Quando usar | |--------|-----------|-------------| | code-reviewer | Review profundo com foco em bugs, seguranca e qualidade | "Revise esse PR", "Tem algo errado nesse arquivo?" | | test-writer | Gera suites de teste seguindo os padroes do projeto | "Crie testes para esse service" | | debugger | Debugging sistematico com analise de causa raiz | "Esse erro aparece quando...", "Por que isso falha?" | | refactorer | Refatoracao segura e incremental com verificacao | "Refatore essa funcao", "Simplifique esse modulo" | | docs-generator | Gera documentacao a partir do codigo | "Documente essa API", "Gere docs desse modulo" | | db-architect | Design de schema, migrations e otimizacao de queries | "Crie a tabela de pedidos", "Essa query esta lenta" | | api-designer | Design de endpoints REST com OpenAPI specs | "Projete a API de usuarios" | | security-auditor | Scan de vulnerabilidades e remediacao | "Tem alguma falha de seguranca?" | | perf-optimizer | Profiling e otimizacao de performance | "A pagina esta lenta", "Otimize esse componente" | | devops-helper | CI/CD, Docker, deploy e infra | "Configure o Dockerfile", "Crie o pipeline de CI" |

Exemplo de uso

> Revise o codigo que eu mudei hoje procurando bugs e vulnerabilidades
  → Claude aciona o code-reviewer automaticamente

> Use o db-architect para projetar o schema de um e-commerce
  → Voce pode pedir um agente especifico pelo nome

Comandos Slash

Comandos rapidos para acoes frequentes. Digite diretamente no Claude Code.

| Comando | Descricao | |---------|-----------| | /review | Roda code review nas mudancas staged | | /test-gen | Gera testes para um arquivo ou funcao | | /explain | Explicacao detalhada de uma secao de codigo | | /security-check | Auditoria de seguranca no codebase | | /pre-commit | Roda todas as verificacoes antes de commitar | | /debug | Debugging sistematico de um problema | | /optimize | Analisa e otimiza performance de um trecho |

Comandos PM (Product Management)

| Comando | Descricao | |---------|-----------| | /discover | Fluxo estruturado de discovery: problem framing → opportunity mapping → validacao | | /strategy | Estrategia de produto: posicionamento → oportunidade → roadmap | | /write-prd | Cria PRD completo encadeando problem framing, requisitos e user stories | | /plan-roadmap | Transforma estrategia em roadmap sequenciado com tradeoffs claros | | /prioritize | Seleciona o metodo de priorizacao certo para o seu contexto | | /leadership-transition | Guia transicao PM → Director → VP/CPO com diagnosticos e onboarding |

Exemplo de uso

> /review
  → Revisa tudo que esta no git stage

> /test-gen src/services/auth.ts
  → Gera testes para o arquivo especificado

> /explain src/lib/cache.ts:45-80
  → Explica as linhas 45 a 80 do arquivo

> /write-prd "Mobile onboarding redesign"
  → Gera PRD estruturado com problema, personas, solucao e metricas

> /discover "Reduce onboarding drop-off for self-serve users"
  → Executa ciclo de discovery completo

Skills

Skills sao conhecimentos especializados que o Claude carrega automaticamente quando o contexto se encaixa.

| Skill | Acionada quando... | |-------|--------------------| | frontend-design | Criando interfaces, componentes UI, landing pages | | nextjs-15 | Trabalhando com Next.js App Router, Server Components | | react-19 | Escrevendo componentes React, hooks, React Compiler | | zod-4 | Criando schemas de validacao com Zod | | brand-guidelines | Aplicando identidade visual Anthropic | | webapp-testing | Testando aplicacoes web com Playwright | | skill-creator | Criando novas skills customizadas |

Como funcionam

Skills sao automaticas — voce nao precisa chamar. Quando voce pede "crie um componente de login com Next.js", o Claude carrega as skills nextjs-15, react-19 e frontend-design automaticamente.


Skills de Product Management

46 skills de PM do Product-Manager-Skills por Dean Peters. Organizadas em tres niveis:

Component Skills (20) — Templates e Artefatos

| Skill | Quando usar | |-------|-------------| | altitude-horizon-framework | Entender a transicao PM→Director: escopo, horizonte temporal, zonas de transicao | | company-research | Pesquisa profunda de concorrentes ou empresas | | customer-journey-map | Mapear experiencia do cliente em todos os touchpoints | | eol-message | Comunicar descontinuacao de produto/feature | | epic-hypothesis | Transformar iniciativas vagas em hipoteses testaveis | | finance-metrics-quickref | Lookup rapido de 32+ metricas SaaS com formulas e benchmarks | | jobs-to-be-done | Entender o que clientes estao tentando fazer (framework JTBD) | | pestel-analysis | Analisar fatores externos (Politico, Economico, Social, Tech, Ambiental, Legal) | | pol-probe | Definir experimentos de validacao leves antes de construir | | positioning-statement | Definir quem voce serve e como e diferente (Geoffrey Moore) | | press-release | Escrever press release futuro para clarificar visao (Amazon Working Backwards) | | problem-statement | Enquadrar problema do cliente com evidencia antes de pular para solucoes | | proto-persona | Criar personas baseadas em hipoteses antes de pesquisa completa | | recommendation-canvas | Documentar recomendacoes de produto com AI | | saas-economics-efficiency-metrics | Avaliar unit economics e eficiencia de capital | | saas-revenue-growth-metrics | Calcular metricas de receita, retencao e crescimento | | storyboard | Visualizar jornadas do usuario com storyboards de 6 quadros | | user-story | Escrever user stories com acceptance criteria (Mike Cohn + Gherkin) | | user-story-mapping | Organizar stories por workflow do usuario (Jeff Patton) | | user-story-splitting | Quebrar stories grandes usando 8 padroes comprovados |

Interactive Skills (20) — Discovery Guiado

| Skill | O que faz | |-------|-----------| | acquisition-channel-advisor | Avalia canais de aquisicao por unit economics e escalabilidade | | ai-shaped-readiness-advisor | Avalia se voce e AI-first ou AI-shaped, recomenda proxima competencia | | business-health-diagnostic | Diagnostica saude do SaaS: crescimento, retencao, eficiencia, capital | | context-engineering-advisor | Diagnostica context stuffing vs context engineering | | customer-journey-mapping-workshop | Workshop guiado de mapeamento de jornada com pain points | | director-readiness-advisor | Coaching para transicao PM→Director em 4 cenarios | | discovery-interview-prep | Planeja entrevistas de discovery (estilo Mom Test) | | epic-breakdown-advisor | Quebra epics em user stories (9 padroes de Richard Lawrence) | | feature-investment-advisor | Avalia investimento em features: receita, custo, ROI, estrategia | | finance-based-pricing-advisor | Avalia mudancas de pricing com analise financeira | | lean-ux-canvas | Planejamento baseado em hipoteses (Jeff Gothelf Lean UX Canvas v2) | | opportunity-solution-tree | Gera oportunidades e solucoes, recomenda melhor PoC (Teresa Torres) | | pol-probe-advisor | Recomenda tipo de prototipo baseado na hipotese e risco | | positioning-workshop | Workshop guiado para definir posicionamento | | prioritization-advisor | Recomenda framework de priorizacao (RICE, ICE, Kano, etc.) | | problem-framing-canvas | MITRE Problem Framing: Look Inward/Outward/Reframe | | tam-sam-som-calculator | Projeta tamanho de mercado com dados reais e citacoes | | user-story-mapping-workshop | Workshop guiado de story mapping com backbone e release slices | | vp-cpo-readiness-advisor | Coaching para transicao Director→VP/CPO | | workshop-facilitation | Protocolo de facilitacao step-by-step para skills interativas |

Workflow Skills (6) — Processos End-to-End

| Skill | O que faz | Timeline | |-------|-----------|----------| | discovery-process | Ciclo completo: enquadrar problema → pesquisar → sintetizar → validar | 3-4 semanas | | executive-onboarding-playbook | Playbook 30-60-90 dias para transicao VP/CPO | 90 dias | | prd-development | PRD estruturado: problema → personas → solucao → metricas → stories | 2-4 dias | | product-strategy-session | Estrategia completa: posicionamento → problem framing → roadmap | 2-4 semanas | | roadmap-planning | Roadmap estrategico: inputs → epics → priorizar → sequenciar | 1-2 semanas | | skill-authoring-workflow | Meta-workflow: criar/validar/publicar skills | 30-90 min |


MCP Servers

Servidores que estendem as capacidades do Claude com ferramentas externas.

| Servidor | Tipo | O que faz | |----------|------|-----------| | github | HTTP/OAuth | Issues, PRs, reviews, actions — tudo do GitHub | | figma | HTTP/OAuth | Acessa designs, componentes e tokens do Figma | | sequential-thinking | stdio (local) | Raciocinio passo-a-passo para problemas complexos | | context7 | stdio (local) | Busca documentacao atualizada de libs e frameworks |

Autenticacao

Servidores HTTP (GitHub, Figma) precisam de login na primeira vez:

# Dentro do Claude Code
/mcp
# Selecione "Authenticate" para cada servidor

Servidores stdio (sequential-thinking, context7) funcionam imediatamente.


Permissoes e Seguranca

O settings.json define o que o Claude pode ou nao fazer sem pedir confirmacao.

Permitido automaticamente

  • Ler arquivos, buscar no codebase
  • git status, git diff, git log
  • pnpm lint, pnpm typecheck, pnpm test, pnpm build
  • npx prisma *, ls *

Bloqueado permanentemente

  • rm -rf — nunca deleta recursivamente
  • git push --force — nunca forca push
  • git reset --hard — nunca descarta mudancas
  • git checkout -- . — nunca reverte tudo
  • DROP DATABASE — nunca dropa banco

Precisa de confirmacao

Tudo que nao esta nas listas acima (instalar pacotes, criar arquivos, rodar scripts, etc.) vai pedir sua aprovacao.


Workflows Sugeridos

1. Iniciar um novo projeto

1. Copie .claude/ para a raiz do projeto
2. Copie CLAUDE.template.md para CLAUDE.md na raiz
3. Preencha stack, estrutura, comandos e convencoes
4. Rode /mcp para autenticar GitHub e Figma
5. Comece a desenvolver

2. Feature nova (do design ao codigo)

1. "Busque o design da tela X no Figma"
   → Claude usa o MCP do Figma para extrair o layout

2. "Implemente esse design como componente React"
   → Skills frontend-design + react-19 + nextjs-15 ativam automaticamente

3. "Crie testes para esse componente"
   → /test-gen ou peca diretamente

4. /review
   → Revisa tudo antes de commitar

5. /pre-commit
   → Roda lint, typecheck, testes

3. Debugging de producao

1. "Esse erro esta acontecendo em producao: [erro]"
   → Agente debugger faz analise de causa raiz

2. "Busque na documentacao do [lib] como resolver isso"
   → MCP context7 busca docs atualizadas

3. Aplique o fix e rode /review + /security-check

4. Code review completo

1. /review
   → Review automatico das mudancas staged

2. "Tem alguma vulnerabilidade de seguranca?"
   → /security-check

3. "A performance esta boa?"
   → /optimize nos trechos criticos

5. Modelagem de banco de dados

1. "Projete o schema para um sistema de [dominio]"
   → Agente db-architect cria o schema

2. "Gere a migration do Prisma"
   → Claude roda npx prisma migrate dev

3. "Documente esse schema"
   → Agente docs-generator cria a documentacao

6. Refatoracao segura

1. "Refatore o modulo X para [objetivo]"
   → Agente refactorer faz mudancas incrementais

2. /test-gen para os trechos refatorados
   → Garante que nada quebrou

3. /pre-commit antes de commitar

Dicas

  • Seja especifico: "Otimize a query de listagem de produtos com paginacao" funciona melhor que "melhore a performance"
  • Use /explain antes de mudar: Se nao entende um trecho, peca explicacao antes de modificar
  • Combine agentes: Voce pode pedir review + security check + optimization em sequencia
  • Context7 para docs: Quando precisar de documentacao atualizada de qualquer lib, o Claude busca automaticamente via context7
  • Figma to code: Peca para o Claude buscar um design no Figma e implementar — ele faz o fluxo completo

Adicionando ao Setup

Nova skill

# Copiar de skills do usuario
cp -r ~/.claude/skills/nome-da-skill .claude/skills/

# Ou criar do zero
# Use /skill-creator dentro do Claude Code

Novo MCP server

claude mcp add --scope project nome-do-server -- npx -y @pacote/servidor

Novo comando

Crie um arquivo .md em .claude/commands/ com as instrucoes do comando.

Novo agente

Crie um arquivo .md em .claude/agents/ com o system prompt do agente.