icon-system — скилл для Claude Code: что делает и как установить
Задаёт правила для системы иконок: сетку 24x24px, шкалу размеров, именование и доступность. Пригодится при наведении порядка в дизайн-системе проекта.
npx skills add Owl-Listener/designer-skills --skill icon-system -a claude-codeЧто делает icon-system
Скилл превращает агента в специалиста по иконкам интерфейса. Он формулирует спецификацию графики: определяет базовую сетку 24x24px, толщину линий, скругления углов и линейку размеров от XS (12–16px) до XL (48px+). Для стилей разделяет контурные, залитые и дуотоновые варианты.
Внутрь заложена жёсткая схема именования: icon-[категория]-[имя]-[вариант]. Для категорий выделен фиксированный набор, куда входят action, navigation, status и другие группы. В поставку входят SVG-файлы, спрайты, обёртки для компонентов и библиотека Figma. Доступность тоже зафиксирована. Обязательны aria-hidden или текстовая метка, дублирование текстом для ключевых действий и область нажатия от 44x44px.
Для масштабной графики этот скилл не годится — в описании прямо указано использовать illustration-style.
Какие задачи решает
- задать единую сетку 24x24px и шкалу размеров иконок
- стандартизировать имена SVG-файлов по схеме с категориями
- прописать требования доступности и размер зоны нажатия от 44x44px
- подготовить спецификацию для экспорта спрайтов и компонентов
Примеры запросов агенту
- Опиши спецификацию иконок для дизайн-системы с базовой сеткой 24x24px
- Разложи иконку корзины по правилам именования icon-[category]-[name]-[variant]
- Сформируй чек-лист доступности для SVG-иконок в интерфейсе
Как установить icon-system
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill icon-system -a claude-code2Вручную: положить файлы
~/.claude/skills/icon-system/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/icon-system/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill icon-system -a codex2Вручную: положить файлы
.agents/skills/icon-system/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill icon-system -a cursor2Вручную: положить файлы
.cursor/skills/icon-system/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills icon-system2Вручную: положить файлы
.github/skills/icon-system/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill icon-system -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/icon-systemВручную: положить файлы
.devin/skills/icon-system/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill icon-system -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о icon-system
Как установить icon-system в Claude Code?
Выполните команду npx skills add Owl-Listener/designer-skills --skill icon-system -a claude-code. Либо сохраните файл по пути ~/.claude/skills/icon-system/SKILL.md.
Что делает скилл icon-system?
Он создаёт спецификации интерфейсных иконок: сетку, размеры от XS до XL, схему имён, форматы экспорта и правила доступности.
Подойдёт ли этот скилл для сложных иллюстраций?
Нет, он рассчитан только на иконки. Для сюжетных и интерфейсных иллюстраций автор рекомендует скилл illustration-style.
Исходный текст
SKILL.md · MIT
--- name: icon-system description: Specify an icon system — grid, sizing, stroke weight, naming, categories, and implementation. Use when standardising iconography. For broader illustration, use `illustration-style` (ui-design). --- # 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
© Owl-Listener · MIT · Owl-Listener/designer-skills
