Claude Code Skill refatora componentes React usando princípios de 'Não Me Faça Pensar'

Uma nova habilidade desenvolvida pela comunidade para o Claude Code aplica os princípios de usabilidade de Steve Krug do livro Don't Make Me Think a componentes React. A habilidade detecta automaticamente seu sistema de design (shadcn/ui, MUI, Chakra, Mantine, Ant ou customizado) e usa primitivas existentes em vez de reinventá-las.

O que ela faz

A habilidade pega um componente React e o refatora para usabilidade, fazendo o seguinte:

• Remove "happy talk" e parágrafos de instrução
• Torna a CTA principal óbvia
• Corrige estados de carregamento/vazio/erro que levam a becos sem saída
• Ajusta rótulos (ex.: "Por favor, insira seu primeiro nome" → "Primeiro nome")
• Melhora a hierarquia visual e a escaneabilidade

O autor criou a habilidade porque o Claude (e a maioria dos LLMs) tendem a gerar UIs que são tecnicamente funcionais, mas poluídas, prolixas e difíceis de escanear. Esta habilidade força a remoção de tudo até que apenas o essencial permaneça.

Instalação

npx skills add gashiartim/ux-enhancer

Independente de framework

A habilidade detecta automaticamente seu sistema de design — shadcn/ui, MUI, Chakra, Mantine, Ant ou customizado — e usa seus componentes existentes em vez de criar novos.

Repositório e feedback

O código-fonte está disponível em github.com/gashiartim/ux-enhancer. O autor aceita feedback e PRs, e está curioso para saber se a habilidade é acionada de forma confiável ou se a descrição precisa de ajustes.