Exploded — скилл
Скилл Claude Code раскладывает живой UI-компонент на слои отрисовки в изометрии с размерами, токенами и состояниями.
- 58 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл отрисовывает компонент в браузере и читает его стили, не меняя код проекта.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/explodedОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл отрисовывает компонент в браузере и читает его стили, не меняя код проекта.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Exploded берет названный компонент интерфейса, отрисовывает его и разбирает в изометрии на слои: тень, поверхность, обводка, внутренние поверхности, содержимое и кольцо фокуса. Состояния переключаются: наведение, фокус, нажатие, отключение, ошибка, включено и выключено, а также собственные. Псевдоклассы `:hover`, `:focus` и `:active` включаются правкой правил CSS, указатель не нужен. Принцип проекта: ничего не перерисовывается и ни одно число не вводится вручную. Каждый слой — клон живого компонента с вычисленными стилями браузера, числа берутся из `getComputedStyle` и геометрии, названия токенов из реально написанных правил CSS. Нажатие `T` показывает значения как токены, например `--radius-md`, а жестко заданные значения остаются числами, и расхождение видно сразу. Встроенная проверка убеждается, что каждая краска попала ровно на один слой, а копия отличается от живого компонента не более чем на 0,5 пикселя. Установка: `npx skills add diip3sh/exploded`.
Для кого. Дизайнерам и фронтенд-разработчикам, которые документируют компоненты дизайн-системы и сверяют спецификацию с реальным кодом.
Подходит, если
- Для документации нужна схема кнопки со всеми состояниями и размерами.
- Спецификация разошлась с кодом, и значения надо снять с живого компонента.
- Хочется увидеть, какие токены реально использует поле ввода, а какие значения заданы жестко.
- Нужен чертеж компонента с отступами, радиусами и тенями для передачи дизайнеру.
Не подходит, если
- Нужен макет в Figma, а не страница из рабочего кода.
- Компонента нет в браузере: скилл работает только с живой разметкой.
- Ожидается готовая статическая картинка без запуска страницы.
Пример запроса к агенту
Через exploded задокументируй нашу кнопку со всеми состояниями для документации Next.js.Ограничения
Скилл работает с компонентами, которые отрисовываются в браузере: токены читаются из правил CSS, которые написал автор, а переменные, заданные не в CSS, остаются числами. Светлая краска, например белый текст, получает подложку цвета реальной поверхности под ней. Нужна среда с запуском страницы и доступом к DOM. Файл лицензии: MIT. Последний коммит от 13 октября 2026 года, репозиторий небольшой и содержит лишь `SKILL.md` и каталог `runtime`. Для самостоятельной вставки используйте `Exploded.mount()` из `runtime/exploded.js`.
Как отключить. Удалите папку `~/.claude/skills/exploded` или выполните удаление через менеджер `skills`. Файлы `runtime/exploded.css` и `runtime/exploded.js` в вашем проекте удаляются вручную.
Частые вопросы
Как вызвать скилл?
Командой `/exploded` с описанием, например `/exploded spec sheet for the email field and the switch, dark theme`. Агент подключает скилл и сам, если нужна документация компонента.
Какие слои показывает?
Тень, поверхность, обводку, внутренние поверхности (чипы, ползунки, аватары), содержимое и кольцо фокуса. Кольцо фокуса в покое остается пунктирным и пустым.
Откуда берутся числа и токены?
Числа из `getComputedStyle`, блоков разметки и текстовых диапазонов, а названия токенов из CSS-правил автора. Поэтому спецификация не может разойтись с релизом.
Можно ли подключить рантайм напрямую?
Да: подключите `runtime/exploded.css` и `runtime/exploded.js`, затем вызовите `Exploded.mount(элемент, { target, title, states })`.
С какими агентами работает?
С Claude Code, Cursor, Codex и любым агентом, который читает скиллы.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл Claude, который по названию предмета рисует изометрический чертеж в одном HTML-файле с рабочими кнопками
Маркетплейс плагинов и скиллов Claude Code для 3D, анимации и современного веба: Three.js, GSAP, React Three Fiber, Babylon.js
Скилл Claude превращает сайты, картинки и файлы Figma в дизайн-систему: Markdown, токены DTCG и промпты для сборки элементов
Набор скиллов, токенов и правил, который делает из Claude дизайн-архитектора: DTCG-токены, компоненты, доступность и объективные проверки качества
Скилл собирает компоненты Framer на Three.js, WebGL и GSAP: 3D, шейдеры и анимация по прокрутке в одном TSX-файле.
Скилл для пиксель-арта в Claude Code: спрайты, анимации и эффекты строятся по референсу и проверяются кадр за кадром
Коротко о README
Скилл и рантайм раскладывают компонент на слои с живыми замерами. Состояния включаются без указателя, токены берутся из CSS автора, а аудит сверяет копию с оригиналом.