O que userinterface-wiki faz?
Melhores práticas de UI/UX para interfaces web. Use ao revisar animações, CSS, áudio, tipografia, padrões de UX, pré-carregamento ou implementações de ícones. Abrange 11 categorias desde princípios de animação até tipografia. Gera descobertas no formato arquivo:linha.
Categorias
- Princípios de Animação – Garanta transições suaves, use
will-changecom moderação, evite animações desnecessárias. - Implementação de Áudio – Prefira formatos modernos (AAC, Opus), forneça controles e evite reprodução automática.
- Design de CSS – Utilize nomes de classe semânticos, evite
!important, mantenha a especificidade baixa. - Padrões de UX – Forneça feedback, estados vazios e tratamento de erros.
- Estratégias de Pré-carregamento – Use
<link rel="preload">para recursos críticos, evite pré-carregamento excessivo. - Implementação de Tipografia – Carregue fontes web de forma eficiente, forneça fallbacks e use
font-display: swap. - Ícones – Prefira SVG inline para ícones, forneça atributos
aria-hiddene cores consistentes. - Acessibilidade – Garanta contraste de cor, suporte a navegação por teclado e textos alternativos.
- Responsividade – Use consultas de mídia (
media queries) e unidades relativas, teste em dispositivos reais. - Desempenho – Minimize reflows e repaints, use
content-visibilitye carregamento preguiçoso (lazy loading). - Segurança – Evite injeção de CSS, sanitize entradas do usuário.
Como Usar
Adicione este skill ao seu agente de IA (Claude Code, Cursor, ou Codex) e use o comando:
@raphaelsalaja/userinterface-wiki review <caminho/para/arquivo-ou-diretório>
Exemplo de Saída
arquivo:linha: [Categoria] Descrição do problema
Exemplo:
styles.css:42: [Design de CSS] Uso excessivo de `!important` – considere refatorar para aumentar especificidade ou usar variáveis CSS.
Contribuição
Pull requests são bem-vindos! Adicione novas categorias ou melhore as existentes no diretório ./rules/.
Licença
MIT