Doodle Icons — плагин
Набор нарисованных от руки SVG-иконок для React со скиллом: агент ставит пакет, подключает общий фильтр и берет настоящие имена.
- 153 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл только правит код интерфейса, внешние сервисы не нужны.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/doodle-iconsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл только правит код интерфейса, внешние сервисы не нужны.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Doodle Icons, набор рисованных иконок, выпущен как пакет `@oreo-design/doodle-icons` и как скилл для агентов. Каждая иконка прорисовывает контуры и затем бесконечно подрагивает, как рисованная мультипликация. Есть статичные SVG, анимированные SVG, компонент React и отдельные иконки для shadcn/ui. Скилл объясняет агенту порядок подключения. Сначала ставится пакет, затем один раз монтируется общий `BoilFilter`, дальше иконки берутся по реальным именам, а `boilId` передается в каждую. Скилл также задает оформление набора: шрифт Schoolbell для заголовков, палитру бумаги и туши, места для анимации и места для покоя.
Для кого. Фронтендерам и дизайнерам, которые собирают лендинг или интерфейс в рисованном стиле и просят агента расставить иконки без выдуманных имен.
Подходит, если
- Лендинг в стиле тетрадного листа получает иконки с анимацией прорисовки.
- Агент подбирает иконки из готового списка вместо угадывания имен.
- В проекте на shadcn/ui копируют одну иконку как исходник.
- Рисованные заголовки и иконки должны подрагивать одним общим фильтром.
Не подходит, если
- Интерфейс строгий и корпоративный, рисованный стиль не подходит.
- Нужны иконки без анимации и с точной геометрией сетки.
- Страница рассчитана на слабые устройства, где SVG-фильтр дорог.
Пример запроса к агенту
Добавь на лендинг рисованные иконки из Doodle Icons для блока преимуществ, подключи общий фильтр и укажи имена только из реального списка.Ограничения
Анимация подрагивания построена на SVG-фильтре, поэтому на странице с сотнями иконок стоит проверить нагрузку. Параметр `draw` проигрывается заново при каждом монтировании компонента, его оставляют для героя страницы. Скилл рассчитан на стек React; для других сред берут готовые файлы SVG. Скилл знает набор по именам, поэтому после обновления пакета список имен стоит перечитать в реестре. Правила оформления относятся к стилю Oreo Design и необязательны для чужих проектов.
Как отключить. Удалите скилл из каталога скиллов агента или выполните `/plugin uninstall doodle-icons` в Claude Code и уберите пакет из зависимостей проекта.
Частые вопросы
Как подключить иконку без пакета?
Для shadcn/ui выполните `npx shadcn@latest add https://doodle.oreoui.com/r/heart.json`. Команда создаст компонент `HeartDoodle`. Вместо `heart` подойдет любое имя свободной иконки.
Зачем нужен `boilId`?
Он связывает иконку с общим фильтром, который дает подрагивание. Без него иконка остается статичной, а рядом с подрагивающими заголовками выглядит незаконченной.
Можно ли менять цвет?
Да. Контуры рисуются цветом `currentColor`, поэтому цвет задает обычный CSS текста.
Как поставить скилл?
Выполните `npx skills add oreo-design/doodle-icons`. В Claude Code работает и плагин: `/plugin marketplace add oreo-design/doodle-icons`.
Нужен ли React?
Для компонента `DoodleIcon` нужен. Без React берут файлы SVG из `icons/` и `icons-animated/`, они работают везде, где работает SVG.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныДвижок дизеринга для shadcn и скилл к нему: агент собирает фоны, графики и лоадеры из точек в цветах темы проекта.
MCP-сервер набора Keyline Icons: агент ищет иконку по имени, берет SVG и готовый импорт React без угадывания названий
Скилл fun-isometric рисует изометрические стикеры из плоских плит с контуром и оживляет их по настоящим ключевым кадрам.
Поиск и вставка иконок из более чем 150 коллекций Iconify как MCP-сервер, CLI и скилл, с записью SVG прямо в файл проекта
MCP-сервер ищет иконку coolicons по смыслу и отдает SVG с готовым импортом: агент не выдумывает имена, сборка не падает
MCP-сервер и скилл для набора из тысяч брендовых SVG-иконок: агент ищет и вставляет иконки без ключа
Коротко о README
Иконки лежат в виде SVG, пакета React и реестра shadcn. Скилл в репозитории передает агенту порядок установки и правила оформления набора.