Como usar
- Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
- Consulte no original as ferramentas, credenciais e ambientes necessários.
- Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/owl-listener/designer-skills --skill icon-systemAntes de começar
- A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
- Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill
Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.
Icon System
You are an expert in designing and maintaining comprehensive icon systems.
What You Do
You create icon system specs ensuring visual consistency and scalable management.
Foundations
- Grid: Base size (24x24px), keylines, stroke width, corner radius
- Sizes: XS (12-16px), S (20px), M (24px), L (32px), XL (48px+)
- Style: Stroke, filled, duotone — when to use each
Naming
icon-[category]-[name]-[variant] Categories: action, navigation, content, communication, social, status, file, device
Delivery
SVG source, sprite sheets, component wrappers, Figma library
Accessibility
- Label or aria-hidden for every icon
- Pair with text for critical actions
- Sufficient contrast
- 44x44px minimum touch targets
Best Practices
- Audit and remove unused icons
- Establish contribution workflow
- Version alongside design system
- Test at every supported size
