8 principais Claude Skills para profissionais de UI/UX

Se você passa algum tempo no r/Frontend, no r/UXDesign ou nos fóruns da Figma Community, provavelmente percebeu uma mudança na forma como designers e desenvolvedores front-end falam sobre ferramentas de IA. Dois anos atrás, a maior parte da conversa era sobre a possibilidade de a IA substituir completamente os designers. Esse receio não desapareceu (e provavelmente nunca vai desaparecer), mas agora divide espaço com um assunto mais prático: designers compartilhando fluxos de trabalho em que a IA cuida das tarefas tediosas para que eles possam se concentrar nas criativas.

Os números confirmam essa tendência. A adoção de IA entre pesquisadores de UX chegou a 80% em 2025, segundo a pesquisa anual da Loop11. Designers experientes relatam produzir um volume de trabalho antes associado a uma equipe de três pessoas, uma tendência que deu origem ao “Super-IC” (supercontribuidor individual), que trabalha como um estúdio de design de uma pessoa só. No Reddit, a recepção tem sido entusiasmada e prática. No r/webdesign e no r/Frontend, desenvolvedores estão criando protótipos completos em 30 minutos com o Claude Code. No UX Collective, designers publicam fluxos de trabalho detalhados para usar o Claude e converter designs automaticamente para o modo escuro, gerar variações acessíveis de componentes e auditar páginas com base nas diretrizes WCAG.

O ceticismo continua presente, e isso é saudável. 91% dos pesquisadores de UX se preocupam com a precisão dos resultados e as alucinações. O consenso da comunidade é claro: ferramentas de criação com IA são ótimas para montar primeiros rascunhos de mockups e estruturas iniciais, mas ainda tropeçam em ajustes personalizados, padrões de interação sutis e no tipo de discernimento de design que vem de anos observando pessoas reais enfrentarem dificuldades com interfaces reais. A IA não substitui o olhar do designer. Ela cuida do trabalho repetitivo (gerar variações responsivas, verificar taxas de contraste, criar a estrutura básica de componentes e auditar com base em listas de verificação) para que as pessoas possam dedicar mais tempo às decisões que realmente importam.

Play Video: YouTube Video: jmDLqqWxCco

Brian Clark, da Snyk, mostra como criar um site usando Bolt e Figma juntos, demonstrando o tipo de fluxo de trabalho de design assistido por IA que desenvolvedores front-end estão adotando.

Claude Skills são uma das portas de entrada mais interessantes para esse fluxo de trabalho. Se você ainda não conhece, vale a pena entender como funcionam, pois ocupam um lugar único no ecossistema do Claude.

O que são Claude Skills (e o que não são)?

O ecossistema do Claude conta com vários mecanismos de extensão, que podem ser facilmente confundidos. Veja uma explicação rápida:

• Arquivos CLAUDE.md são a memória persistente do projeto. Eles são carregados em todas as sessões e informam ao Claude coisas como “este projeto usa Tailwind v4” ou “sempre use indentação de 2 espaços”. São contexto sempre ativo, não recursos sob demanda.

• Comandos personalizados com barra (.claude/commands/*.md) eram modelos simples de prompt acionados por /command-name. Na prática, foram incorporados às Skills. Skills que definem um argument-hint no frontmatter podem ser chamadas como comandos com barra, enquanto as outras são ativadas de acordo com o contexto da tarefa.

• Servidores MCP são processos em execução que disponibilizam ferramentas e fontes de dados por meio do Model Context Protocol. Eles permitem que o Claude chame APIs, consulte bancos de dados ou interaja com serviços externos. Exigem um processo de servidor e código.

• Conectores do Claude conectam o Claude a serviços externos, como Slack, Figma ou Asana, por meio de servidores MCP remotos com OAuth.

• Aplicativos do Claude são as plataformas em que o Claude é executado (Claude.ai, Claude Code, dispositivos móveis e desktop), não extensões do Claude.

• Plugins são pacotes que reúnem skills, agentes, hooks e servidores MCP para distribuição.

Claude Skills são diretórios que contêm um arquivo SKILL.md (com frontmatter YAML e instruções em Markdown), além de arquivos de apoio opcionais, como scripts, modelos e documentos de referência. O que as torna únicas:

1. São diretórios, não arquivos avulsos. Uma skill pode reunir scripts de shell, auxiliares em Python, documentação de referência e arquivos de recursos junto com as instruções.

2. Divulgação progressiva. Na inicialização, o Claude carrega apenas o name e a description de cada skill do frontmatter YAML (cerca de 100 tokens por skill), de modo semelhante à inclusão das descrições de ferramentas MCP no contexto. O Claude compara sua tarefa com essas descrições para decidir qual skill ativar. Quando encontra uma correspondência, carrega as instruções completas do SKILL.md. Os arquivos de apoio (referências, scripts e recursos) só são carregados quando necessários durante a execução. Essa abordagem em três níveis mantém sua janela de contexto enxuta, mesmo com dezenas de skills instaladas. Isso também significa que o campo description da skill é essencial: descrições vagas geram ativações pouco confiáveis, enquanto descrições precisas, com frases de acionamento explícitas (como “Use esta skill quando o usuário pedir para criar componentes web”), garantem ativações consistentes.

3. Podem executar código. Skills podem incluir scripts em scripts/, que o Claude executa durante a execução. Também podem usar a sintaxe !`command` para inserir resultados dinâmicos no contexto do prompt.

4. Seguem um padrão aberto. A especificação Agent Skills foi adotada pelo Claude Code, OpenAI Codex, Cursor, Gemini CLI e outros, tornando as skills portáveis.

5. Podem ser registradas como comandos com barra. Skills que incluem o campo argument-hint no frontmatter YAML podem ser chamadas diretamente como /skill-name. Skills sem essa dica são ativadas de acordo com o contexto: o Claude as identifica automaticamente quando a descrição corresponde à sua tarefa.

A especificação oficial e a documentação de skills da Anthropic explicam o formato completo. Também vale a pena ler a publicação do blog de engenharia da Anthropic sobre Agent Skills para entender os motivos por trás do design.

Como instalar uma Claude Skill

Instalar uma skill leva cerca de 30 segundos.

No nível do projeto (compartilhada com sua equipe pelo controle de versão):

your-project/
└── .claude/
    └── skills/
        └── skill-name/
            ├── SKILL.md
            └── scripts/
                └── helper.sh

No nível do usuário (pessoal, disponível em todos os projetos):

~/.claude/
└── skills/
    └── skill-name/
        ├── SKILL.md
        └── references/
            └── REFERENCE.md

Por meio de plugins (para coleções de skills, como a da Vercel):

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

Skills no nível do projeto são compartilhadas com a equipe pelo controle de código-fonte. Skills no nível do usuário são privadas. Quando há conflito entre nomes, as skills empresariais têm prioridade sobre as pessoais, que têm prioridade sobre as do projeto.

Um alerta importante: o ecossistema Agent Skills é novo e está crescendo rapidamente, por isso a segurança da cadeia de suprimentos importa. A pesquisa ToxicSkills da Snyk encontrou injeção de prompt em 36% das skills testadas e 1.467 cargas maliciosas em todo o ecossistema. Sempre revise o arquivo SKILL.md de uma skill e todos os scripts incluídos antes de instalá-la. Trate skills como qualquer código de terceiros que você executaria no seu ambiente.

Criando uma Claude Skill? Se você está criando ou mantendo uma Claude Skill ou um servidor MCP de código aberto, o Programa Snyk Secure Developer oferece análise de segurança gratuita em nível empresarial para projetos de código aberto. A Snyk protege mais de 585.000 projetos de código aberto e oferece acesso empresarial completo, suporte pela comunidade do Discord e ajuda com integrações para mantenedores qualificados. Inscreva-se aqui se você já tem um projeto ou aqui se está começando um novo.

Agora, vamos à lista. Estas oito skills (e coleções de skills) cobrem diferentes necessidades, desde design front-end de alta fidelidade até auditoria de acessibilidade, otimização de desempenho do React, arquitetura de componentes e padrões de UI para dispositivos móveis.

1. Anthropic frontend-design

Origem: anthropics/skills (caminho: skills/frontend-design/) e anthropics/claude-code (caminho: plugins/frontend-design/) Estrelas: 65,847 (repositório skills) / 65,362 (repositório claude-code) Licença: personalizada (consulte LICENSE.txt) Última atualização: fevereiro de 2026 SKILL.md verificado: Sim

Esta é a resposta da própria Anthropic a um problema que todo designer que usa Claude Code já enfrentou: interfaces front-end geradas por IA que parecem todas iguais. Gradientes roxos genéricos em fundos brancos. As mesmas combinações de fontes Inter/Roboto. Os mesmos layouts previsíveis de cartões. A descrição da skill chama isso de “IA sem qualidade”, e suas instruções foram criadas especificamente para tirar o Claude desses padrões.

A skill parece um briefing de design escrito por uma direção criativa cansada de ver sempre os mesmos resultados. Antes de escrever qualquer código, ela orienta o Claude a considerar quatro dimensões: propósito (quem usa e por quê), tom (escolher uma direção estética específica), restrições (framework, desempenho e acessibilidade) e diferenciação (o que torna essa interface memorável).

O que ela faz

O conjunto principal de instruções abrange cinco áreas:

• Tipografia: escolha fontes marcantes e cheias de personalidade. A skill proíbe explicitamente Inter, Roboto, Arial, fontes do sistema e Space Grotesk (descrita como “usada demais pela IA”). Ela incentiva combinações inesperadas, como unir uma fonte de destaque a uma fonte refinada para o texto.

• Cores e tema: opte por uma paleta coesa. Use variáveis CSS para garantir consistência. Prefira cores dominantes com detalhes contrastantes a paletas discretas e distribuídas de maneira uniforme. Nada de clichês como roxo sobre branco.

• Movimento: priorize momentos de grande impacto. Uma única abertura de página bem coreografada, com elementos surgindo em sequência, encanta mais do que várias microinterações dispersas. Use soluções apenas com CSS para HTML e a biblioteca Motion para React.

• Composição espacial: layouts inesperados. Assimetria, sobreposição, fluxo diagonal, elementos que rompem a grade e bastante espaço negativo.

• Planos de fundo e detalhes visuais: malhas de gradientes, texturas de ruído, padrões geométricos, transparências em camadas, sombras dramáticas, bordas decorativas, cursores personalizados e sobreposições granuladas.

A abordagem é bem definida e cheia de personalidade. Ela incentiva o Claude a criar trabalhos ousados e distintos, em vez de recorrer às opções padrão. Se você estiver criando ferramentas internas, em que a consistência importa mais do que a criatividade, talvez seja melhor combinar esta skill com uma skill de sistema de design mais estruturada (veja a nº 5 ou a nº 6 abaixo). Mas, para páginas de destino, sites de marketing, portfólios e qualquer projeto que precise de personalidade visual, esta é a skill que impede o Claude de gerar sempre a mesma interface.

Instalação

Disponível em dois lugares (a mesma skill, em dois repositórios):

# From the skills repo (recommended)
git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

# Or from the claude-code plugins repo
/plugin marketplace add anthropics/claude-code
# Select frontend-design from the plugin menu
/plugin menu

Como usar

A skill é ativada automaticamente quando você pede ao Claude para criar componentes, páginas ou aplicativos web:

Build a landing page for a fintech startup. Dark, editorial tone.
Create a dashboard component for a health app. Organic, warm aesthetic.
Design a portfolio site. Brutalist, typographic focus.

Para quem é: desenvolvedores front-end e designers que querem que o Claude gere interfaces visualmente distintas, em vez de modelos genéricos. É especialmente útil para páginas de destino, sites de portfólio, páginas de marketing e qualquer projeto em que a personalidade estética seja importante.

2. Vercel web design guidelines

Fonte: vercel-labs/agent-skills (caminho: skills/web-design-guidelines/) Estrelas: 19.487 Licença: MIT Última atualização: janeiro de 2026 SKILL.md verificado: Sim

Enquanto a skill frontend-design da Anthropic se concentra na direção criativa, esta skill da Vercel prioriza a correção. Ela analisa seu código de UI existente com base nas Web Interface Guidelines, um conjunto abrangente de mais de 100 regras sobre acessibilidade, desempenho e práticas recomendadas de UX.

O que ela faz

A skill segue um fluxo de trabalho simples:

1. Busca as diretrizes mais recentes no URL de origem (as regras ficam no repositório vercel-labs/web-interface-guidelines, então estão sempre atualizadas)

2. Lê os arquivos que você especificar

3. Verifica cada arquivo com base em todas as regras

4. Apresenta os resultados em um formato conciso de file:line

As próprias diretrizes abrangem pontos que profissionais experientes de UI/UX verificam durante a revisão de código, mas que podem passar despercebidos quando falta tempo: atributos ARIA adequados, estados de foco visíveis, campos com rótulos, tamanho das áreas de toque, suporte a movimento reduzido, HTML semântico, navegação por teclado, hierarquia correta de títulos e muito mais.

Esta não é uma skill criativa. É um controle de qualidade. Pense nela como um linter de boas práticas de UI/UX que detecta problemas capazes de reprovar uma auditoria WCAG ou prejudicar a usabilidade para pessoas que usam teclado e leitores de tela.

Instalação

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/web-design-guidelines ~/.claude/skills/

Ou pelo marketplace de plugins:

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

Uso

A skill é registrada como um comando de barra, com uma dica de argumento para especificar arquivos:

/web-design-guidelines src/components/**/*.tsx
Review my UI code for accessibility issues
Audit this page against web interface best practices
Check my form components for WCAG compliance

Para quem é: Pessoas que desenvolvem o front-end e querem verificações automatizadas de qualidade de UI/UX durante o desenvolvimento. Profissionais de engenharia de sistemas de design que precisam garantir a consistência em uma base de código. Qualquer pessoa que esteja se preparando para uma auditoria de acessibilidade.

Conteúdos relacionados da Snyk:

• 10 práticas recomendadas de segurança para React

• Materiais de aprendizado sobre segurança em JavaScript

3. Práticas recomendadas para React da Vercel

Fonte: vercel-labs/agent-skills (caminho: skills/react-best-practices/) Estrelas: 19.487 Licença: MIT Última atualização: janeiro de 2026 SKILL.md verificado: Sim

Desempenho também é uma questão de UX. Uma interface linda que leva 4 segundos para ficar interativa oferece uma experiência ruim, por melhor que seja a tipografia. Esta skill da Vercel Engineering reúne 57 regras de otimização de desempenho em 8 categorias, priorizadas pelo impacto.

O que ela abrange

A ordem de prioridade faz diferença. Ela reflete a experiência prática de engenharia da Vercel: eliminar cascatas de requisições e otimizar o tamanho do bundle têm muito mais impacto no desempenho percebido do que ajustar o comportamento de novas renderizações. Muitos desenvolvedores (e assistentes de IA) vão direto para useMemo e React.memo, quando o verdadeiro gargalo é uma cascata de chamadas de API sequenciais ou um arquivo barrel que importa toda a biblioteca de ícones.

Cada regra inclui uma breve explicação, código incorreto com uma explicação do problema, código correto também explicado e contexto adicional. O diretório de regras contém arquivos Markdown individuais para cada regra, permitindo que Claude consulte a explicação completa quando necessário.

Destaques específicos:

• async-suspense-boundaries: use Suspense para transmitir conteúdo, em vez de esperar todos os dados antes de renderizar

• bundle-barrel-imports: importe diretamente e evite arquivos barrel (um problema comum em bibliotecas de sistemas de design)

• bundle-dynamic-imports: use next/dynamic para componentes pesados

• rerender-derived-state: inscreva-se em valores booleanos derivados, não em valores brutos

• rendering-content-visibility: use content-visibility do CSS em listas longas

• rendering-activity: use o componente Activity para padrões de exibição e ocultação

Instalação

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-best-practices ~/.claude/skills/

Uso

A skill é ativada automaticamente ao trabalhar com código React ou Next.js:

Review this component for performance issues
Refactor this page to eliminate data fetching waterfalls
Optimize the bundle size of this Next.js app
Why is this component re-rendering unnecessarily?

Para quem é: Pessoas que desenvolvem com React e Next.js e querem que Claude escreva código com bom desempenho por padrão. Profissionais de engenharia de sistemas de design que criam bibliotecas de componentes em que o desempenho em escala é importante.

Play Video: Can This New AI Write Safe Code? (Claude 3.7 Sonnet)

Brian Clark, da Snyk, testa se o código gerado pelo Claude passa nas verificações de segurança e encontra vulnerabilidades reais, como negação de serviço por expressão regular. Skills como React Best Practices, da Vercel, ajudam Claude a gerar código eficiente e alinhado a padrões estabelecidos.

Conteúdos relacionados da Snyk:

• A vulnerabilidade CRÍTICA do Next.js que você precisa conhecer (vídeo: YouTube)

• Segurança no NPM: como evitar ataques à cadeia de suprimentos

• 10 práticas recomendadas de segurança para npm

4. Padrões de composição da Vercel

Fonte: vercel-labs/agent-skills (caminho: skills/composition-patterns/) Estrelas: 19.487 Licença: MIT Última atualização: janeiro de 2026 SKILL.md verificado: Sim

Se você já herdou um componente React com 15 props booleanas (isCompact, showHeader, isRounded, hasBorder, isHighlighted...), sabe qual problema esta skill resolve. O excesso de props booleanas é um dos anti-padrões mais comuns em sistemas de design. Isso dificulta entender, testar e ampliar os componentes.

Esta skill ensina a Claude padrões de composição que podem ser ampliados: componentes compostos, provedores de contexto, variantes explícitas e arquiteturas adequadas de gerenciamento de estado.

O que ela abrange

Entre os principais padrões estão:

• architecture-avoid-boolean-props: não adicione props booleanas para personalizar o comportamento. Use composição. Esta é a regra fundamental e a que mais melhora a qualidade da API do componente.

• architecture-compound-components: estruture componentes complexos com um contexto compartilhado (como funcionam <Select>, <Select.Trigger> e <Select.Content> no Radix UI).

• state-decouple-implementation: somente o provedor sabe como o estado é gerenciado. Os componentes usam uma interface simples.

• state-context-interface: defina uma interface genérica com estado, ações e metadados para injeção de dependências.

• patterns-explicit-variants: crie componentes de variantes explícitas em vez de modos booleanos (por exemplo, <Alert.Destructive> em vez de <Alert isDestructive>).

• patterns-children-over-render-props: use children para composição em vez de props renderX.

• react19-no-forwardref: no React 19 ou posterior, não use forwardRef; use o novo hook use() em vez de useContext().

Cada arquivo de regra no diretório rules/ inclui exemplos de código incorreto e correto, com explicações que tornam esses padrões concretos, não abstratos.

Instalação

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/composition-patterns ~/.claude/skills/

Uso

A skill é ativada durante o trabalho na arquitetura de componentes:

Refactor this component to use compound components instead of boolean props
Design a flexible API for this dropdown component
Review this component library for composition anti-patterns
How should I structure this complex form component?

Para quem é: Profissionais de engenharia de sistemas de design, responsáveis pela manutenção de bibliotecas de componentes e pessoas que desenvolvem componentes de UI reutilizáveis. Esta skill é especialmente útil ao criar APIs de componentes que serão usadas por outros desenvolvedores.

5. UI/UX pro max

Fonte: nextlevelbuilder/ui-ux-pro-max-skill Estrelas: 29.636 Licença: MIT Última atualização: fevereiro de 2026 SKILL.md verificado: Sim

Esta é a skill de inteligência de design mais abrangente do ecossistema atual. Enquanto a skill frontend-design da Anthropic ajuda Claude a desenvolver senso estético e as skills da Vercel se concentram em padrões de engenharia, UI/UX Pro Max oferece a Claude um banco de dados de design pesquisável: mais de 50 estilos de UI, 97 paletas de cores, 57 combinações de fontes, 99 diretrizes de UX e 25 tipos de gráfico em 9 stacks de tecnologia.

O que ela faz

A skill vem com uma ferramenta CLI em Python (scripts/search.py) que Claude executa para consultar o banco de dados de design. O fluxo de trabalho tem quatro etapas:

Etapa 1: analise os requisitos. Extraia da solicitação do usuário o tipo de produto, as palavras-chave de estilo, o setor e a stack.

Etapa 2: gere o sistema de design (obrigatório). Execute --design-system para obter recomendações abrangentes com justificativas. A ferramenta pesquisa 5 domínios em paralelo (produto, estilo, cor, landing page e tipografia), aplica regras de raciocínio de um conjunto de dados CSV e retorna um sistema de design completo: padrão, estilo, cores, tipografia, efeitos e anti-padrões a evitar.

Etapa 3: complemente com pesquisas detalhadas. Consulte domínios individuais (estilo, gráficos, UX, tipografia e landing page) para obter mais detalhes.

Etapa 4: consulte as diretrizes da stack. Obtenha práticas recomendadas de implementação para a stack específica (html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose).

A skill também oferece suporte a sistemas de design persistentes com um padrão de arquivo principal e substituições. Executar --design-system --persist cria o arquivo design-system/MASTER.md (a fonte global da verdade) e o diretório design-system/pages/ para substituições específicas de cada página. É um recurso bem pensado para projetos maiores, em que uma página de dashboard pode precisar de regras de densidade diferentes das de uma página de marketing, embora compartilhem a mesma paleta principal e tipografia.

Categorias de regras por prioridade

A acessibilidade ocupa a primeira posição. A skill verifica contraste mínimo de 4,5:1, contornos de foco visíveis, texto alternativo descritivo, rótulos ARIA, navegação por teclado e rótulos adequados nos formulários. A lista de verificação antes da entrega abrange qualidade visual, interação, contraste nos modos claro e escuro, layout e acessibilidade.

Um detalhe prático: a skill inclui uma seção chamada "Regras comuns para uma UI profissional", que reúne problemas frequentemente ignorados. Nada de ícones emoji (use SVGs). Use o cursor pointer em todos os elementos clicáveis. Transições suaves de 150 a 300 ms. No modo claro, cartões de vidro precisam de bg-white/80 ou mais opacidade, não de bg-white/10. Verifique a visibilidade das bordas nos modos claro e escuro.

Instalação

git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cp -r ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max ~/.claude/skills/

Ou pelo marketplace de plugins:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin menu

Uso

Design a landing page for a beauty spa wellness service
Build a SaaS dashboard with dark mode
Create a fintech crypto trading interface
Review this component for UX anti-patterns

A skill também permite pesquisas diretas pela CLI:

# Generate full design system
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Search specific domains
python3 skills/ui-ux-pro-max/scripts/search.py "glassmorphism dark" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography

Para quem é: Designers e desenvolvedores que querem que Claude tome decisões de design bem fundamentadas, com base no tipo de produto, no setor e na direção estética, em vez de gerar opções genéricas. O recurso de sistema de design persistente é especialmente útil para equipes que trabalham em aplicações com várias páginas.

6. Bencium UX designer

Fonte: bencium/bencium-claude-code-design-skill Estrelas: 72 Licença: Não especificada Última atualização: novembro de 2025 SKILL.md verificado: Sim (2 arquivos SKILL.md: bencium-controlled-ux-designer e bencium-innovative-ux-designer)

Esta é a abordagem mais completa dos fundamentos de design de UX em uma única skill no ecossistema Claude Skills. Enquanto outras skills se concentram em um tema específico (acessibilidade, desempenho, estética), a skill da Bencium é um guia completo de design de UX com mais de 28.000 caracteres, que aborda pensamento de design, padrões visuais, design de interação e acessibilidade em um único pacote coeso.

O repositório oferece duas variantes:

• bencium-innovative-ux-designer: incentiva escolhas de design ousadas, criativas e diferenciadas (com uma filosofia semelhante à skill frontend-design da Anthropic, mas com muito mais profundidade)

• bencium-controlled-ux-designer: para projetos em que consistência e controle são mais importantes do que criatividade

As duas incluem os mesmos documentos de referência: ACCESSIBILITY.md, RESPONSIVE-DESIGN.md, MOTION-SPEC.md e DESIGN-SYSTEM-TEMPLATE.md.

O que ela abrange

Filosofia central de design:

• Simplicidade pela redução (comece com a complexidade e remova elementos deliberadamente até chegar à solução mais simples e eficaz)

• Honestidade dos materiais (materiais digitais têm propriedades únicas; aproveite-as)

• Hierarquia funcional (crie hierarquia com escala tipográfica, contraste de cores e relações espaciais)

• Atenção obsessiva aos detalhes (cada pixel é uma decisão intencional)

• Linguagem visual coerente (cada elemento deve comunicar visualmente sua função)

• Tecnologia invisível (as pessoas se concentram no conteúdo e nos objetivos, não em entender a interface)

Padrões de design visual:

• Arquitetura completa do sistema de cores (paleta neutra de base + paleta de destaque, com regras de aplicação para fundos, texto, botões, indicadores de status e estados interativos)

• Excelência tipográfica (tipografia funcional vs. emocional, escala tipográfica, regras de espaçamento e legibilidade, tipografia responsiva e orientações específicas para botões, rótulos de formulário, campos e mensagens de erro)

• Layout e design espacial (equilíbrio composicional, disciplina de grade, direcionamento da atenção)

Design de interação:

• Padrões de manipulação direta (arrastar e soltar em vez de botões para cima/baixo; edição em linha em vez de formulários separados)

• Feedback imediato em até 100 ms para cada interação

• Padrões que permitem corrigir erros (estratégias de prevenção + recuperação)

• Divulgação progressiva (resumo, detalhes, avançado)

• Padrões modernos de UX: interfaces conversacionais, layouts adaptativos, expressão visual marcante

Documentos de referência:

• ACCESSIBILITY.md com orientações completas sobre WCAG 2.1/2.2

• RESPONSIVE-DESIGN.md com estratégias para pontos de quebra

• MOTION-SPEC.md com curvas de easing, tabelas de duração e padrões de animação específicos para cada estado

• DESIGN-SYSTEM-TEMPLATE.md para iniciar um sistema de design consistente

Instalação

git clone https://github.com/bencium/bencium-claude-code-design-skill.git

# Choose one (or install both):
cp -r bencium-claude-code-design-skill/bencium-innovative-ux-designer ~/.claude/skills/
cp -r bencium-claude-code-design-skill/bencium-controlled-ux-designer ~/.claude/skills/

Uso

A skill é ativada durante a criação de componentes, páginas ou aplicações web:

Build a checkout flow with proper error handling and recovery
Design a settings page with progressive disclosure
Create an onboarding wizard with direct manipulation patterns
Review this form for UX issues

Para quem é: Designers de UX e desenvolvedores front-end que querem que Claude entenda e aplique os fundamentos do design de UX, e não apenas preferências estéticas. As duas variantes (inovadora e controlada) permitem adaptar a skill a projetos criativos ou sistemáticos.

7. Plugin AccessLint

Fonte: accesslint/claude-marketplace Estrelas: 8 Licença: MIT Última atualização: novembro de 2025 SKILL.md verificado: Sim (skills em plugins/accesslint/skills/: contrast-checker, refactor, use-of-color, link-purpose)

AccessLint é um kit de ferramentas de acessibilidade criado especificamente para Claude. Ao contrário dos recursos de acessibilidade integrados a outras skills desta lista (que abordam acessibilidade como um entre vários aspectos), o AccessLint tem foco exclusivo nesse tema. Ele inclui quatro skills especializadas, um agente de revisão com IA e um servidor MCP integrado para análise programática de contraste de cores.

O que inclui

4 skills:

1 agente:

O agente accesslint:reviewer realiza revisões abrangentes de código quanto à acessibilidade, em várias etapas. Ele analisa sua base de código em busca de problemas de conformidade com os níveis A e AA da WCAG 2.1, percorre o código para entender todo o contexto e gera relatórios de auditoria estruturados, com problemas priorizados, níveis de gravidade e referências à WCAG.

Servidor MCP:

O plugin também inclui um servidor MCP (@accesslint/mcp) que disponibiliza três ferramentas:

• calculate_contrast_ratio: calcula a proporção de contraste WCAG entre duas cores

• analyze_color_pair: análise detalhada de aprovação/reprovação para todos os tipos de conteúdo e níveis da WCAG

• suggest_accessible_color: sugere alternativas de cores acessíveis que atendem aos requisitos da WCAG e preservam a intenção do design

As ferramentas MCP ficam disponíveis para todas as outras skills e agentes, então você pode combinar o AccessLint com as demais skills de design desta lista. As ferramentas de verificação de contraste são especialmente úteis quando combinadas com skills que geram paletas de cores.

Cobertura da WCAG

O plugin verifica a conformidade com os níveis A e AA, incluindo:

• Perceptível: textos alternativos, estrutura semântica, contraste de cores

• Operável: navegação pelo teclado, gerenciamento de foco, visibilidade do foco

• Compreensível: rótulos claros, identificação de erros, comportamento consistente

• Robusto: uso adequado de ARIA, nomes e funções acessíveis

Instalação

# Via plugin marketplace
/plugin marketplace add accesslint/claude-marketplace
/plugin install accesslint@accesslint

Ou manualmente:

git clone https://github.com/accesslint/claude-marketplace.git
cp -r claude-marketplace/plugins/accesslint/skills/* ~/.claude/skills/

Uso

Check the contrast ratio between #333 and #f5f5f5 for normal text
Review src/components/ for accessibility issues
Fix accessibility problems in this form component
Check if my status indicators rely solely on color

Para quem é: Profissionais de engenharia de UI/UX que levam acessibilidade a sério. Equipes de sistemas de design que precisam garantir a conformidade com a WCAG. Desenvolvedores que se preparam para auditorias de acessibilidade. Apesar do número baixo de estrelas (8), a skill tem alta qualidade e escopo bem definido.

Recursos relacionados da Snyk:

• O que é cross-site scripting (XSS)? (relevante porque o XSS costuma explorar campos de formulário mal tratados, o que se relaciona às questões de acessibilidade sobre rótulos adequados e HTML semântico)

• Como uma política de segurança de conteúdo pode prevenir XSS?

8. Vercel React Native Skills

Fonte: vercel-labs/agent-skills (caminho: skills/react-native-skills/) Estrelas: 19.487 Licença: MIT Última atualização: janeiro de 2026 SKILL.md verificado: Sim

A UI/UX para dispositivos móveis tem suas próprias limitações de desempenho e padrões de interação. Aplicativos React Native e Expo precisam manter 60 fps em dispositivos com pouca memória, lidar com navegação baseada em gestos e respeitar convenções de plataforma que variam entre iOS e Android. Esta skill reúne os padrões mais importantes para o desempenho de interfaces móveis.

O que abrange

O desempenho de listas é considerado crítico porque listas são o gargalo de desempenho mais comum em aplicativos móveis. As 8 regras abrangem: usar FlashList em vez de FlatList, memorizar itens da lista, estabilizar referências de callbacks, evitar objetos de estilo em linha, extrair funções de renderização, otimizar imagens em listas, mover tarefas pesadas para fora dos itens e usar tipos de item em listas heterogêneas.

Os padrões de UI incluem 10 regras específicas para dispositivos móveis:

• Use expo-image para todas as imagens (em vez do componente Image integrado ao React Native)

• Prefira Pressable a TouchableOpacity

• Trate as áreas seguras em ScrollViews

• Use contentInset para cabeçalhos em visualizações com rolagem

• Use menus de contexto e modais nativos

• Use onLayout em vez de measure() para medir visualizações

• Use StyleSheet.create ou NativeWind para estilizar

As regras de animação priorizam propriedades aceleradas pela GPU: anime apenas transform e opacity, use useDerivedValue para animações calculadas e use Gesture.Tap em vez de Pressable para interações controladas por gestos.

Instalação

git clone https://github.com/vercel-labs/agent-skills.git
cp -r agent-skills/skills/react-native-skills ~/.claude/skills/

Uso

Why is this FlatList scrolling slowly?
Optimize the performance of this React Native list
Implement a smooth page transition animation
Review this Expo app for performance issues

Para quem é: Desenvolvedores de React Native e Expo que criam aplicativos móveis em que o desempenho da interface é importante. Engenheiros de sistemas de design que mantêm bibliotecas de componentes multiplataforma.

Onde encontrar e instalar Claude skills (marketplaces, GitHub e diretórios da comunidade)

A Anthropic apresentou as Agent Skills em outubro de 2025, mas não existe um único site oficial de marketplace. Para designers que usam o aplicativo Claude.ai, as skills ficam em Customize, Skills, Browse skills. Lá você encontra skills da Anthropic e de parceiros como Notion, Figma e Atlassian, além de poder enviar as suas próprias. A Anthropic também publica exemplos de skills em github.com/anthropics/skills, incluindo opções relevantes para design, como frontend-design.

Além dos repositórios oficiais, milhares de skills da comunidade estão espalhadas pelo GitHub, em listas selecionadas como travisvn/awesome-claude-skills e VoltAgent/awesome-agent-skills, bem como em diretórios não oficiais que as reúnem. Como uma skill é uma pasta SKILL.md com scripts opcionais executados pelo Claude, uma skill maliciosa pode ocultar um reverse shell nessas instruções e acioná-lo assim que for carregada. Pesquisas sobre marketplaces de skills envenenadas também descobriram que scanners automatizados de skills criam uma falsa sensação de segurança, pois instruções aparentemente inofensivas podem ser encadeadas para obter acesso ao shell. Revise qualquer skill de uma fonte não oficial antes de instalá-la e limite os recursos a que ela pode ter acesso.

Segurança ao instalar skills

Há uma ironia em usar skills de IA para aprimorar seu fluxo de trabalho de design enquanto o próprio ecossistema de skills apresenta riscos de segurança. O estudo ToxicSkills da Snyk constatou que 13% das skills testadas continham falhas críticas de segurança, e algumas tentaram ativamente exfiltrar credenciais. A pesquisa SKILL.md to Shell Access demonstrou como três linhas de Markdown em um arquivo de skill podem conceder a um invasor acesso ao shell da sua máquina.

Antes de instalar qualquer skill:

1. Leia o SKILL.md e todos os scripts incluídos. Skills são arquivos Markdown e scripts de shell, não binários compilados. Você pode ler cada linha.

2. Verifique a origem. Skills de organizações estabelecidas (Anthropic, Vercel) e mantenedores conhecidos oferecem menos riscos. Skills da comunidade exigem mais atenção.

3. Revise as permissões. O campo de frontmatter allowed-tools mostra quais ferramentas uma skill pode usar. Uma skill que precisa de acesso a Bash merece mais atenção do que uma que usa apenas Read e Grep.

4. Use a Snyk para fazer uma análise. Se você já usa Snyk Code ou a integração MCP da Snyk, pode analisar scripts de skills da mesma forma que qualquer outro código.

5. Tenha cuidado especial com skills que incluem scripts Python. UI/UX Pro Max (#5) inclui uma ferramenta de pesquisa em Python. Leia scripts/search.py antes de executá-la. Neste caso, a ferramenta consulta dados CSV locais e é segura, mas o princípio geral continua válido.

As skills desta lista vêm de fontes confiáveis e têm licenças claras. Mas o princípio geral continua valendo: confie, mas verifique.

Play Video: YouTube Video: ky6o6PXCXos

Brian Clark, da Snyk, mostra como criar um aplicativo seguro com Claude Code e, em seguida, analisa o código gerado pela IA em busca de vulnerabilidades. Esse é o mesmo fluxo de análise e correção que você pode aplicar aos scripts das skills antes de instalá-las.

Conclusão

Claude Skills ocupam um espaço intermediário entre “apenas um prompt” e uma “integração completa”. Para profissionais de engenharia de UI/UX, elas resolvem um problema real: assistentes de programação com IA são poderosos, mas tendem a gerar resultados genéricos quando não recebem o contexto certo. Uma skill bem elaborada fornece esse contexto em um pacote que carrega com eficiência e é ativado quando necessário.

O cenário se divide em algumas categorias:

• Para direção criativa: as skills Frontend Design, da Anthropic, e UX Designer, da Bencium, incentivam Claude a criar designs distintos e intencionais, em vez de recorrer aos padrões da IA.

• Para inteligência de design: UI/UX Pro Max oferece a Claude um banco de dados pesquisável de estilos, paletas, fontes e diretrizes de UX.

• Para qualidade e conformidade: Web Design Guidelines, da Vercel, e AccessLint ajudam a garantir que os resultados atendam aos padrões de acessibilidade e às boas práticas da web.

• Para padrões de engenharia: React Best Practices, Composition Patterns e React Native Skills, da Vercel, codificam o conhecimento de desempenho e arquitetura que diferencia bibliotecas de componentes profissionais de protótipos.

A abordagem mais eficaz é combinar habilidades de várias categorias. Instale a habilidade Frontend Design para garantir qualidade estética, a Web Design Guidelines para atender aos requisitos de acessibilidade e a React Best Practices para melhorar o desempenho. Elas não entram em conflito. Pelo contrário, se complementam, cada uma acrescentando uma camada diferente de qualidade ao que o Claude produz.

A adoção de ferramentas de IA pela comunidade de UI/UX não tem como objetivo substituir o discernimento de design. A ideia é eliminar atritos nas tarefas que designers e desenvolvedores front-end já sabem executar, mas consideram entediantes: criar variações acessíveis de componentes, verificar taxas de contraste, fazer auditorias com base em listas de boas práticas e escrever layouts responsivos. As habilidades formalizam essa delegação.

Se você já usa Claude Code no desenvolvimento front-end, instalar algumas dessas habilidades é um investimento de 5 minutos que vale a pena desde a primeira vez que o Claude gera uma página de destino com personalidade tipográfica de verdade, identifica uma falha de acessibilidade antes que ela chegue à produção ou refatora um componente cheio de props para transformá-lo em um padrão de componente composto mais organizado.

Se você está procurando servidores MCP em vez de Claude Skills, confira nossos 14 servidores MCP para engenheiros de UI/UX.