Fähigkeiten ui-skills
🎨

ui-skills

Sicher

Construa Interfaces de Usuário Consistentes com Restrições de Design

Agentes de IA frequentemente produzem código de UI inconsistente em diferentes sessões. Esta skill fornece restrições e padrões de design opinativos para garantir geração de interface consistente e acessível todas as vezes.

Unterstützt: Claude Codex Code(CC)
📊 71 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "ui-skills". Gerar um componente de card usando padrões ui-skills

Erwartetes Ergebnis:

Um componente Card reutilizável com padding consistente, border radius, shadow tokens e suporte para slots de header, body e footer. Inclui estados de hover e atributos de acessibilidade.

Verwendung von "ui-skills". Criar um diálogo modal seguindo restrições ui-skills

Erwartetes Ergebnis:

Um componente Modal com focus trap, tratamento da tecla escape, detecção de clique no backdrop e funções ARIA apropriadas para leitores de tela.

Sicherheitsaudit

Sicher
v1 • 2/25/2026

This skill contains documentation-only content (SKILL.md) with no executable code. Static analysis flagged URLs and patterns that are false positives - the URLs are GitHub repository references in documentation, not network requests. No security risks detected.

1
Gescannte Dateien
23
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
32
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Desenvolvedor Frontend Construindo um Sistema de Design

Use esta skill para gerar padrões de componentes consistentes que seguem princípios de design estabelecidos e padrões de acessibilidade.

Agente de IA Criando Componentes de UI

Permita que assistentes de codificação IA produzam código de UI que adere às restrições e padrões de design da sua equipe.

Equipe de Startup Padronizando Desenvolvimento de UI

Estabeleça um vocabulário compartilhado de padrões de UI para pequenas equipes sem recursos de design dedicados.

Probiere diese Prompts

Gerar um Componente de Botão Básico 
Usando os padrões ui-skills, gere um componente de botão com estados primário, secundário e desabilitado. Inclua atributos de acessibilidade e estados de foco.
Criar um Input de Formulário com Validação 
Aplique as restrições ui-skills para criar um componente de entrada de texto com label, placeholder, estado de erro e mensagens de validação. Siga as diretrizes WCAG.
Construir um Componente de Navegação Responsivo 
Usando padrões ui-skills, crie um componente de navegação que funciona em desktop e mobile. Inclua navegação por teclado e suporte a leitores de tela.
Projetar uma Tabela de Dados com Ordenação 
Aplique restrições ui-skills para gerar um componente de tabela de dados com colunas ordenáveis, seleção de linhas e paginação. Garanta conformidade com acessibilidade.

Bewährte Verfahren

  • Sempre defina design tokens (espaçamento, cores, tipografia) antes de gerar componentes
  • Teste componentes com navegação por teclado e leitores de tela durante o desenvolvimento
  • Documente props de componentes, estados e exemplos de uso para consistência da equipe

Vermeiden

  • Hardcoding de valores de cor em vez de usar tokens do sistema de design
  • Ignorar estados de foco e navegação por teclado em elementos interativos
  • Criar componentes excessivamente complexos que deveriam ser divididos em unidades menores

Häufig gestellte Fragen

Quais frameworks esta skill suporta?
Esta skill foca em padrões de componentes baseados em React, mas os princípios de design se aplicam a qualquer framework frontend.
Esta skill gera código CSS real?
Não, ela fornece estrutura e padrões de componentes. A estilização deve ser aplicada usando seu sistema de design existente ou framework CSS.
Como integro isso com meu sistema de design existente?
Mapeie seus design tokens (espaçamento, cores, tipografia) para os padrões desta skill antes de gerar componentes.
Posso personalizar os requisitos de acessibilidade?
Sim, a skill usa WCAG como baseline, mas você pode especificar requisitos adicionais nos seus prompts.
Esta skill é adequada para desenvolvimento mobile-first?
Sim, os padrões suportam design responsivo e abordagens mobile-first com restrições apropriadas.
Com que frequência os padrões de design são atualizados?
Os padrões evoluem com base no feedback da comunidade e melhores práticas emergentes em desenvolvimento de UI.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/ui-skills

Ref

main

Dateistruktur

📄 SKILL.md