As melhores Skills para o seu site

ui-ux-pro-max

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Mais de 50 estilos, 161 combinações de cor, 57 pares de fontes, 99 princípios de UX e 25 tipos de gráfico. Aceita filtros por --design-system, --domain e --stack.

Fonte: nextlevelbuilder — conta pessoal, comunidade.

web-design-guidelines

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

Diretrizes de design web da Vercel.

Fonte: vercel-labs — organização oficial.

framer-motion-animator

npx skills add https://github.com/patricio0312rev/skills --skill framer-motion-animator

Guia completo de Framer Motion: variants, stagger, transições de página, scroll, gestos e acessibilidade.

Fonte: patricio0312rev — conta pessoal, comunidade.

frontend-design

npx skills add vercel-labs/agent-skills --skill frontend-design

Skill de design de front-end da Vercel, boa dupla com a web-design-guidelines.

Fonte: vercel-labs — organização oficial.

web-design-reviewer

npx skills add github/awesome-copilot --skill web-design-reviewer

Revisão e feedback de design web — o agente critica a interface em vez de só produzir.

Fonte: github — organização oficial.

shadcn

npx shadcn@latest add skills

Detecta o projeto automaticamente (se é RSC, versão do Tailwind, biblioteca de ícones) e aplica regras estritas de composição: FieldGroup, cores semânticas, layout por gap, data-icon nos ícones, além do fluxo de trabalho via CLI.

Fonte: shadcn/ui — oficial.

building-components

npx skills add vercel/components.build --skill building-components

Guia da Vercel para construção de componentes.

Fonte: vercel — organização oficial.

web-quality

npx skills add addyosmani/web-quality-skills

Provavelmente a mais valiosa da lista para "fazer um site melhor". Otimização baseada em Lighthouse e Core Web Vitals: performance, acessibilidade WCAG 2.2, SEO e boas práticas, com mais de 150 regras de auditoria. Cobre React, Vue, Angular, Svelte, Next.js, Nuxt e Astro.

Fonte: Addy Osmani, do time do Chrome no Google.

frontend-ui-engineering

npx skills add addyosmani/agent-skills --skill frontend-ui-engineering

Arquitetura de componentes, design systems, gerenciamento de estado, design responsivo e acessibilidade WCAG 2.1 AA. Dispara sozinha quando você está construindo ou modificando interface.

Fonte: Addy Osmani, do time do Chrome no Google.

ui-animation

npx skills add mblode/agent-skills --skill ui-animation

Regras de animação de UI: usar apenas transform e opacity, timing de 200–300ms, respeitar prefers-reduced-motion, princípios CSS-first. Complementa bem a framer-motion-animator.

Fonte: mblode — conta pessoal, comunidade.

next-best-practices

npx skills add vercel-labs/next-skills

Next.js 15+: convenções de arquivo, fronteiras de RSC, params assíncronos, escolha de runtime, erros de hidratação, Suspense e mais.

Fonte: vercel-labs — organização oficial.

vercel-react-best-practices

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

62 regras em 8 categorias: eliminação de waterfalls, otimização de bundle, performance no servidor, controle de re-renders, entre outras.

Fonte: vercel-labs — organização oficial.

tailwind-design-system

npx skills add wshobson/agents --skill tailwind-design-system

Design system em Tailwind v4 no modelo CSS-first: configuração via @theme, componentes com CVA, Compound Components, dark mode e animações nativas de CSS.

Fonte: wshobson — conta pessoal, comunidade.

webapp-testing

npx skills add anthropics/skills --skill webapp-testing

Testa apps web locais com Playwright em Python. Útil para validar o site depois de pronto.