Skill1.5k estrellas del repoactualizado yesterday

icon-system

The icon-system skill generates comprehensive icon system specifications that define grid foundations, sizing standards across five scales, naming conventions by category, and implementation guidance. Use this when establishing or documenting a scalable icon system that requires visual consistency, accessibility compliance, and clear contribution workflows across design and development teams.

Ver fuente Repositorio: designer-skills

Instalar en Claude Code

Copiar

git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/icon-system && cp -r /tmp/icon-system/design-systems/skills/icon-system ~/.claude/skills/icon-system

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

# 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

Del mismo repositorio

design-critiqueSkill

Facilitate structured design critiques with clear feedback frameworks and actionable outcomes.

design-debt-auditSkill

Identify, categorize, and prioritize accumulated design inconsistencies and structural problems across a product.

design-impact-reportingSkill

Communicate design's contribution to business and user outcomes in terms that resonate with stakeholders.

design-qa-checklistSkill

Create QA checklists for verifying design implementation accuracy.

design-review-processSkill

Establish design review gates with criteria, checklists, and approval workflows.

design-sprint-planSkill

Plan and facilitate design sprints from challenge framing through prototype testing.

handoff-specSkill

Create developer handoff specifications with measurements, behaviors, assets, and edge cases.

team-workflowSkill

Design team workflows covering task management, collaboration rituals, and tooling.