# Pesquisa: Skills Claude Code pra criação de sites Data: 2026-06-01 Pesquisado por: Mia (a pedido do Renato) --- ## 1. Skill "UI UX Max Pro" - encontrei? **SIM, achei.** Nome oficial: **UI UX Pro Max Skill** (não "Max Pro" - o vídeo inverteu a ordem). - **Criador:** `nextlevelbuilder` (GitHub) - **Repo:** https://github.com/nextlevelbuilder/ui-ux-pro-max-skill - **Site oficial:** https://ui-ux-pro-max-skill.com/ - **Versão atual:** v2.5.0 (mar/2026) - **Stars:** ~85.9k (popularidade alta) - **Confiança:** ALTA ### Comandos de instalação (via Claude Code) Método 1 - Plugin marketplace (recomendado): ``` /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill ``` Método 2 - Linguagem natural dentro do Claude Code: ``` install the UI/UX Pro Max skill ``` Método 3 - via skills CLI: ``` npx skills add nextlevelbuilder/ui-ux-pro-max-skill ``` Método 4 - CLI dedicada: ``` npm install -g uipro-cli uipro init --ai claude ``` ### O que entrega - 67 estilos de UI - 161 paletas de cores - 57 pares de fontes - 99 diretrizes de UX - 25 tipos de gráficos - 16 stacks técnicas mapeadas - 161 regras de raciocínio baseadas em indústria (e-commerce, fintech, healthcare, etc) - Engine que gera design system completo a partir do briefing do projeto - Checagens automáticas de acessibilidade (contraste, ARIA, focus states, touch targets) --- ## 2. Marketplaces / Bibliotecas mapeadas ### 2.1 Anthropic Skills (oficial) - **URL:** https://github.com/anthropics/skills - **Stars:** ~145k - **Catálogo:** 17 skills oficiais publicadas (mai/2026) - **Confiança:** ALTA (oficial Anthropic) - **Categorias:** Document (docx/pdf/pptx/xlsx), Creative & Design, Development & Technical, Enterprise & Communication - **Como instalar:** ``` /plugin marketplace add anthropics/skills /plugin install document-skills@anthropic-agent-skills /plugin install example-skills@anthropic-agent-skills ``` Ou copiar pasta da skill direto pra `~/.claude/skills/`. ### 2.2 Anthropic Claude Plugins Official - **URL:** https://github.com/anthropics/claude-plugins-official - **Confiança:** ALTA - **Descrição:** Diretório oficial Anthropic de plugins Claude Code de alta qualidade. - **Como instalar:** `/plugin install {plugin-name}@claude-plugins-official` ### 2.3 Vercel Labs Agent Skills - **URL:** https://github.com/vercel-labs/agent-skills - **Confiança:** ALTA (Vercel oficial) - **Catálogo:** Skills com 100k+ installs cada (web-design-guidelines, vercel-react-best-practices, composition-patterns) - **Como instalar:** ``` npx skills add vercel-labs/agent-skills ``` Ou para skill específica: `npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines` ### 2.4 ClaudeMarketplaces.com - **URL:** https://claudemarketplaces.com/ - **Catálogo:** 6.700+ skills, 2.500+ marketplaces, 840+ MCP servers - **Tráfego:** 200k visitas/mês - **Confiança:** MÉDIA-ALTA (maior diretório de terceiros, mas mistura tudo) - **Como funciona:** copia comando de install da página da skill, roda no terminal. ### 2.5 skills.sh - **URL:** https://www.skills.sh/agent/claude-code - **Confiança:** MÉDIA-ALTA - **Descrição:** Diretório categorizado por install count, com CLI universal `npx skills add `. ### 2.6 awesome-claude-skills (Travis VN) - **URL:** https://github.com/travisvn/awesome-claude-skills - **Confiança:** MÉDIA-ALTA - **Descrição:** Lista curada da comunidade, organizada por categoria (Document, Design & Creative, Development, Communication, Skill Creation, Community Collections). ### 2.7 awesome-claude-code (hesreallyhim) - **URL:** https://github.com/hesreallyhim/awesome-claude-code - **Stars:** ~36.8k - **Confiança:** ALTA (canônico da comunidade) ### 2.8 everything-claude-code (affaan-m) - **Stars:** ~141k - **Confiança:** ALTA (aggregator) - **Descrição:** Firehose - lista tudo, bom pra descobrir. ### 2.9 LobeHub Skills Marketplace - **URL:** https://lobehub.com/skills/ - **Confiança:** MÉDIA - **Descrição:** Cataloga skills do ecossistema, foco em organização visual. ### 2.10 Agensi - **URL:** https://www.agensi.io/ - **Confiança:** MÉDIA - **Descrição:** Marketplace com skills empacotadas em ZIP, foco em workflow git e code review. ### 2.11 mcpmarket.com - **URL:** https://mcpmarket.com/tools/skills/ - **Confiança:** MÉDIA - **Descrição:** Cataloga skills + MCP servers. ### 2.12 Tessl Registry - **URL:** https://tessl.io/registry/skills/ - **Confiança:** MÉDIA - **Descrição:** Registry de skills indexadas do GitHub. --- ## 3. Top skills recomendadas pro fluxo de sites ### 3.1 UI UX Pro Max (nextlevelbuilder) - **Fonte:** https://github.com/nextlevelbuilder/ui-ux-pro-max-skill - **Instalar:** `/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill` + `/plugin install ui-ux-pro-max@ui-ux-pro-max-skill` - **Faz:** Design system completo (paletas, tipografia, regras UX) gerado por reasoning engine baseado no nicho. - **Por que vale:** Resolve o problema "site cara de IA" - é exatamente o que o vídeo recomenda. - **Confiança:** ALTA (85.9k stars, atualizada mar/2026) ### 3.2 Frontend Design (Anthropic oficial) - **Fonte:** https://github.com/anthropics/skills (subpasta frontend-design) - **Instalar:** `npx skills add https://github.com/anthropics/skills --skill frontend-design` - **Faz:** Força Claude a sair do "AI slop" genérico, escolher tipografia distintiva, cores propositais, animações intencionais. Otimizada pra React + Tailwind. - **Por que vale:** Skill oficial Anthropic, foco em escapar do visual genérico. Complementa a UI UX Pro Max. - **Confiança:** ALTA (oficial) ### 3.3 Web Design Guidelines (Vercel Labs) - **Fonte:** https://github.com/vercel-labs/agent-skills - **Instalar:** `npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines` - **Faz:** Audita código UI contra 100+ regras de acessibilidade, ARIA, focus states, WCAG. - **Por que vale:** 322.600+ installs. Garante que site fica acessível e profissional. - **Confiança:** ALTA (Vercel oficial) ### 3.4 Vercel React Best Practices - **Fonte:** https://github.com/vercel-labs/agent-skills - **Instalar:** `npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices` - **Faz:** Aplica 57 regras de performance em React/Next.js, priorizadas por impacto (elimina request waterfalls antes de micro-otimizações). - **Por que vale:** 402.700+ installs. Site rápido = mais conversão. - **Confiança:** ALTA (Vercel oficial) ### 3.5 Composition Patterns (Vercel Labs) - **Fonte:** https://github.com/vercel-labs/agent-skills - **Instalar:** `npx skills add https://github.com/vercel-labs/agent-skills --skill composition-patterns` - **Faz:** Substitui proliferação de boolean props por compound components limpos, padrão React 19+. - **Por que vale:** Código mais manutenível, menos retrabalho em refactor. - **Confiança:** ALTA (Vercel oficial) ### 3.6 Motion / Framer Motion Skill (secondsky) - **Fonte:** https://github.com/secondsky/claude-skills (plugins/motion) - **Instalar:** Adicionar marketplace e instalar plugin motion. Skill carrega regras pra Motion lib. - **Faz:** Ensina Claude a construir animações production-ready com Framer Motion: drag-and-drop, scroll-parallax, FLIP layout, LazyMotion (reduz bundle de 34KB pra 4.6KB), prefers-reduced-motion. - **Por que vale:** É justamente a lib que o vídeo recomendou. Sem essa skill o Claude tende a usar Motion errado. - **Confiança:** MÉDIA (criador independente mas skill bem documentada, Motion lib tem 30k+ stars) ### 3.7 shadcn/ui Skill - **Fonte:** Comunidade (vários repos) - **Instalar:** via marketplace `npx skills add` apontando pro repo shadcn skills - **Faz:** Dá ao Claude contexto sobre os componentes shadcn/ui e impõe padrões de uso. - **Por que vale:** shadcn/ui é o padrão atual pra landing pages premium. Combina com Tailwind + Radix. - **Confiança:** MÉDIA-ALTA ### 3.8 Web Artifacts Builder (Anthropic oficial) - **Fonte:** https://github.com/anthropics/skills - **Instalar:** `npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder` - **Faz:** Cria artefatos HTML/React/Tailwind/shadcn/ui complexos. - **Por que vale:** Oficial Anthropic, ótima pra prototipagem rápida. - **Confiança:** ALTA ### 3.9 Luxe Next.js & Tailwind v4 Architect - **Fonte:** https://mcpmarket.com/tools/skills/luxe-next-js-tailwind-v4-architect - **Instalar:** via marketplace de origem (mcpmarket) - **Faz:** Stack premium - Next.js 16, React 19, Tailwind v4 com foco em experiências "luxury-grade". - **Por que vale:** Específica pra sites de alto padrão, exatamente o nicho de agência. - **Confiança:** MÉDIA (criador independente, mas stack moderna) ### 3.10 Corey Haines Marketing Skills (32 skills em pacote) - **Fonte:** GitHub coreyhaines31/marketingskills - **Instalar:** `npx skills add coreyhaines31/marketingskills` - **Faz:** Pack com SEO audit, AI-SEO (AEO/LLMO), page-CRO, copywriting, analytics. - **Por que vale:** Marketing direto - SEO + CRO + copy em uma instalação só. Bate certo com nicho de agência. - **Confiança:** MÉDIA-ALTA (32 skills, autor reconhecido em marketing) ### 3.11 Skill Creator (Anthropic oficial) - **Fonte:** https://github.com/anthropics/skills - **Instalar:** `npx skills add https://github.com/anthropics/skills --skill skill-creator` - **Faz:** Ajuda a criar suas próprias skills custom (pra padrões da Climb Digital). - **Por que vale:** Permite encapsular padrões da agência (tom, estrutura de proposta, brief de cliente). - **Confiança:** ALTA (oficial) ### 3.12 Frontend Slides - **Fonte:** Anthropic skills repo - **Instalar:** `npx skills add https://github.com/anthropics/skills --skill frontend-slides` - **Faz:** Cria apresentações HTML com animações ricas. - **Por que vale:** Útil pra pitches de proposta visual. - **Confiança:** ALTA --- ## 4. Como instalar uma skill no Claude Code (passo a passo geral) ### Método A - Plugin marketplace (oficial) ```bash # Adicionar marketplace de origem /plugin marketplace add / # Instalar a skill especifica /plugin install @ ``` ### Método B - skills CLI (universal) ```bash # Instala todas as skills do repo npx skills add / # Instala skill especifica do repo npx skills add / --skill # Versao com URL completa npx skills add https://github.com// --skill ``` ### Método C - Manual (drop in folder) ```bash # Clonar repo da skill git clone https://github.com//.git # Copiar pasta da skill (com SKILL.md dentro) pra: ~/.claude/skills/ # usuario (todos os projetos) # OU .claude/skills/ # projeto especifico (versionada no git) ``` ### Método D - Linguagem natural (Claude Code recente) Basta digitar no Claude Code: ``` install the skill ``` Ele busca e instala automaticamente. ### Método E - GitHub CLI ```bash gh skill install / ``` ### Onde ficam as skills - `~/.claude/skills/` - skills do usuário (cross-project) - `.claude/skills/` - skills do projeto (commitam no git) ### Como Claude carrega skills Cada skill tem um `SKILL.md` na raiz com metadados (nome, descrição, triggers). Claude lê os triggers e ativa a skill quando o pedido bate. ### Documentação oficial - https://code.claude.com/docs/en/skills - https://support.claude.com/en/articles/12512180-use-skills-in-claude --- ## 5. Recomendação final - Top 5 pra instalar AGORA Pra fluxo de criação de sites/landing pages na Climb Digital, instalar nessa ordem: ### 1. UI UX Pro Max **Justificativa:** É a skill do vídeo, validada em escala (85.9k stars), gera design system completo com paletas/fontes/UX rules específicas por nicho. Resolve diretamente o problema "site parece feito por IA". Ponto de partida obrigatório. ``` /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill ``` ### 2. Frontend Design (Anthropic oficial) **Justificativa:** Skill oficial Anthropic com foco anti-AI-slop. Complementa a UI UX Pro Max forçando escolhas de tipografia/cor distintas. Selo oficial + grátis. ``` npx skills add https://github.com/anthropics/skills --skill frontend-design ``` ### 3. Vercel React Best Practices **Justificativa:** 57 regras de performance Next.js/React priorizadas. Site rápido converte mais. 402k installs validam. ``` npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices ``` ### 4. Web Design Guidelines (Vercel Labs) **Justificativa:** Acessibilidade + WCAG + ARIA automático. Evita que cliente reclame de site quebrado em leitor de tela ou mobile. ``` npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines ``` ### 5. Motion / Framer Motion (secondsky) **Justificativa:** O vídeo recomendou Framer Motion. Essa skill garante que Claude usa Motion certo (LazyMotion, prefers-reduced-motion, FLIP layout) - sem ela ele tende a errar a API ou inflar o bundle. ``` /plugin marketplace add secondsky/claude-skills /plugin install motion@claude-skills ``` ### Bônus - se quiser ir além - **Skill Creator (Anthropic)** - pra criar skills custom com padrões da Climb (tom Renato, estrutura de proposta, brief). - **Corey Haines Marketing Skills** - SEO + CRO + copy num pack só. - **Composition Patterns (Vercel)** - código React mais limpo, menos retrabalho. --- ## Fontes - https://github.com/nextlevelbuilder/ui-ux-pro-max-skill - https://ui-ux-pro-max-skill.com/ - https://github.com/anthropics/skills - https://github.com/anthropics/claude-plugins-official - https://github.com/vercel-labs/agent-skills - https://github.com/vercel-labs/skills - https://github.com/secondsky/claude-skills - https://github.com/travisvn/awesome-claude-skills - https://github.com/hesreallyhim/awesome-claude-code - https://claudemarketplaces.com/ - https://www.skills.sh/agent/claude-code - https://code.claude.com/docs/en/skills - https://support.claude.com/en/articles/12512180-use-skills-in-claude - https://www.firecrawl.dev/blog/best-claude-code-skills - https://www.agensi.io/learn/best-claude-code-skills-2026 - https://lobehub.com/skills/ - https://mcpmarket.com/tools/skills/ - https://tessl.io/registry/skills/ --- ## Avisos finais - **Cuidado com skills de criador desconhecido** - sempre olhar stars, último commit, issues abertas. Skill executa instruções dentro do Claude, então pode ter comportamento ruim se mal escrita. - **Skills oficiais (anthropics/, vercel-labs/) são as mais seguras.** - **Stack ideal recomendada pelo conjunto:** Next.js 15+ / React 19 / Tailwind v4 / shadcn/ui / Framer Motion v12.23.24 (compatível Cloudflare Workers) / Vercel deploy. - **Antes de instalar tudo:** rodar `claude --version` pra garantir versão recente do Claude Code (suporte a `/plugin` e `npx skills`).