core-components — скилл для Claude Code: дизайн-токены и UI
Скилл для Claude, который заставляет агента собирать интерфейс из компонентов вашей библиотеки и дизайн-токенов вместо сырых значений.
npx claude-code-templates@latest --skill development/core-componentsЧто делает core-components
Скилл описывает правила работы с внутренней библиотекой компонентов. Вместо View и Text из react-native агент импортирует Box, Text, HStack, VStack, Button, Input, Card из components/core. Отступы, цвета и размеры шрифта задаются токенами: $4 вместо 16, $textPrimary вместо #333333.
Внутри — таблицы токенов и готовые шаблоны разметки: экран, форма, строка списка. Есть раздел с антипаттернами, где показано, что считается ошибкой: инлайн-стили, жёстко прописанные цвета, прямые импорты платформенных компонентов. Отдельный блок про пропсы компонентов советует типизировать их через те же токены, например padding?: '$2' | '$4' | '$6'.
Скилл предполагает, что у вас уже есть своя библиотека с путём components/core и набор токенов с такими именами. Если в проекте другие имена или обычный CSS, таблицы придётся переписывать под себя — иначе агент начнёт ссылаться на несуществующие компоненты.
Какие задачи решает
- заменить жёстко прописанные отступы и цвета на дизайн-токены
- перевести экран с сырых
ViewиTextна компоненты своей библиотеки - собрать форму из
InputиButtonпо одному шаблону - описать типы пропсов компонента через токены
- проверить разметку на типовые антипаттерны вроде инлайн-стилей
Примеры запросов агенту
- Собери экран профиля на
BoxиVStack, отступы только через токены - Перепиши этот компонент: убери инлайн-стили и хардкод цветов
- Сделай строку списка с аватаром и подписью по шаблону из скилла
Как установить core-components
1Через claude-code-templates
npx claude-code-templates@latest --skill development/core-components2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill core-components -a claude-code3Вручную: положить файлы
~/.claude/skills/core-components/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/core-components/
Вручную: положить файлы
.agents/skills/core-components/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/core-components/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates core-components2Вручную: положить файлы
.github/skills/core-components/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/core-componentsВручную: положить файлы
.devin/skills/core-components/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о core-components
Как установить core-components в Claude Code?
Через шаблоны: npx claude-code-templates@latest --skill development/core-components. Второй способ — npx skills add davila7/claude-code-templates --skill core-components -a claude-code. После установки файл лежит по пути ~/.claude/skills/core-components/SKILL.md.
Что делает скилл core-components?
Задаёт агенту правила вёрстки: брать компоненты из вашей библиотеки и задавать размеры, цвета и шрифты токенами. Плюс показывает шаблоны экрана, формы и строки списка.
С чем ещё работает этот скилл?
Внутри есть отсылки к react-ui-patterns для состояний интерфейса, testing-patterns для моков компонентов и storybook для документации вариантов.
