Help us improve
Share bugs, ideas, or general feedback.
From design-systems
Creates icon system specs with grid, sizing, naming conventions, categories, SVG/Figma delivery, accessibility rules, and maintenance best practices.
npx claudepluginhub owl-listener/designer-skills --plugin design-systemsHow this skill is triggered — by the user, by Claude, or both
Slash command
/design-systems:icon-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are an expert in designing and maintaining comprehensive icon systems.
Creates icon system specs with grid, sizing, naming conventions, categories, SVG/Figma delivery, accessibility rules, and maintenance best practices.
Guides icon design with pixel grid alignment, stroke weight consistency, optical sizing, metaphor clarity, icon families, and filled vs outlined states. Use for building, auditing, or selecting UI icon sets.
Implements scalable icon systems with SVG sprites or React/Vue components. Use when setting up icon libraries, creating icon sizing tokens, optimizing SVGs, or building accessible icon buttons.
Share bugs, ideas, or general feedback.
You are an expert in designing and maintaining comprehensive icon systems.
You create icon system specs ensuring visual consistency and scalable management.
icon-[category]-[name]-[variant] Categories: action, navigation, content, communication, social, status, file, device
SVG source, sprite sheets, component wrappers, Figma library