shadcn-component-boundaries — скилл для Claude Code: что делает
Задаёт правила размещения UI-компонентов в проектах с shadcn. Изолирует примитивы реестра от продуктового кода и следит за односторонними импортами.
npx skills add C3SC0-V4113/Scaffold --skill shadcn-component-boundaries -a claude-codeЧто делает shadcn-component-boundaries
Скилл регламентирует файловую структуру и правила импортов в проектах с shadcn. Он считывает components.json и определяет реальные пути к каталогам через алиасы components и ui. Это исключает догадки о том, где лежат файлы: в корневой components/ или в src/components/.
Вся папка ui отводится под примитивы из реестра shadcn. Пользовательские обёртки, секции и логика предметной области туда попадать не должны. Повторно используемые компоненты скилл направляет в папку common/, а специфичные для конкретного сценария отправляются в каталоги соответствующих фичей. Зависимости идут строго в одну сторону: feature ссылается на common, а common обращается к ui.
При наличии @shadcn/lint правило shadcn/no-restyle запрещает переопределять оформление через длинные списки классов в местах вызова. Внешний вид должен задаваться вариантами и размерами внутри самого примитива, а через className передаются только параметры раскладки. Без корректного components.json агент не сможет сопоставить алиасы и распределить файлы.
Какие задачи решает
- разделить библиотечные примитивы shadcn и бизнес-логику приложения
- предотвратить импорт компонентов фичей внутрь базовой папки
ui - вынести повторно используемые обёртки в каталог
common/ - определить точные пути к компонентам через алиасы в
components.json
Примеры запросов агенту
- Создай кнопку с индикатором загрузки и размести её по правилам shadcn.
- Проверь импорты в папке
components/uiи убери зависимости от кода фичей. - Куда положить карточку профиля пользователя по структуре проекта?
Как установить shadcn-component-boundaries
1Через Skills CLI (Vercel)
npx skills add C3SC0-V4113/Scaffold --skill shadcn-component-boundaries -a claude-code2Вручную: положить файлы
~/.claude/skills/shadcn-component-boundaries/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/shadcn-component-boundaries/
1Через Skills CLI (Vercel)
npx skills add C3SC0-V4113/Scaffold --skill shadcn-component-boundaries -a codex2Вручную: положить файлы
.agents/skills/shadcn-component-boundaries/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add C3SC0-V4113/Scaffold --skill shadcn-component-boundaries -a cursor2Вручную: положить файлы
.cursor/skills/shadcn-component-boundaries/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install C3SC0-V4113/Scaffold shadcn-component-boundaries2Вручную: положить файлы
.github/skills/shadcn-component-boundaries/SKILL.md1Через Skills CLI (Vercel)
npx skills add C3SC0-V4113/Scaffold --skill shadcn-component-boundaries -a gemini-cli2Командой платформы
gemini skills install https://github.com/C3SC0-V4113/Scaffold --path skills/shadcn-component-boundariesВручную: положить файлы
.devin/skills/shadcn-component-boundaries/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add C3SC0-V4113/Scaffold --skill shadcn-component-boundaries -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о shadcn-component-boundaries
Как установить shadcn-component-boundaries в Claude Code?
Выполните команду npx skills add C3SC0-V4113/Scaffold --skill shadcn-component-boundaries -a claude-code. Агент добавит инструкции в проект и начнёт отслеживать размещение компонентов.
Зачем нужен скилл shadcn-component-boundaries?
Он не даёт агенту смешивать примитивы shadcn с логикой приложения. Библиотечный код остаётся чистым в папке ui, а все доработки направляются в common/ или каталоги фичей.
Как скилл регулирует импорты между слоями?
Импорты разрешены строго в одном направлении: feature импортирует common, а common обращается к ui. Файлам внутри ui запрещено импортировать код из верхних слоёв.
Исходный текст
SKILL.md · Apache-2.0
--- name: shadcn-component-boundaries description: "Trigger: components/ui, shadcn, component placement, common components, feature components, atomic design. Enforce registry and product component boundaries." license: Apache-2.0 metadata: author: purrfold version: "1.0" --- # shadcn Component Boundaries ## Activation Contract Load this skill when creating, moving, wrapping, or reviewing UI components in a project that uses shadcn. ## Hard Rules 1. Resolve paths from `components.json` (its `aliases` for `components` and `ui`) or the installed shadcn skill's project-context command. Never assume `components/` versus `src/components/`. 2. Reserve the resolved `ui` directory for registry-managed primitives installed from shadcn or compatible registries. 3. Never place product-owned wrappers, composites, sections, domain components, or feature behavior in the `ui` directory. 4. Put reusable product-owned components under `common/` in the resolved components directory. 5. Put feature-owned components in a named feature folder or colocate them with that feature. 6. Compose: wrap a registry primitive from `common/` or a feature folder instead of adding product behavior to the primitive. 7. Keep dependencies one-way: feature → common → ui. The `ui` directory never imports from `common` or feature folders. 8. Use semantic tokens from the global stylesheet. Treat tokens as quarks and registry primitives as atoms; do not force molecule or organism names into paths. 9. When `@shadcn/lint` is configured, `shadcn/no-restyle` enforces the `ui` boundary: call sites may pass layout classes through `className`, but look comes from variants and sizes. Add a variant to the primitive instead of restyling at the call site. ## Decision Gates | Component ownership | Destination | | --- | --- | | shadcn or compatible registry primitive | resolved `ui` directory | | reusable product-owned component | `<components>/common/` | | feature-specific component | `<components>/<feature>/` or feature colocation | | route or page composition | framework route/page directory | | theme token | global stylesheet variables | ## Execution Steps 1. Read `components.json` and resolve the `components` and `ui` aliases to directories. 2. Search installed primitives before creating custom markup. 3. Classify ownership and reuse scope with the table above. 4. Place the component; see [references/placement-examples.md](references/placement-examples.md) for edge cases. 5. Verify no product-owned file entered `ui` and no reverse import was introduced. ## Output Contract State the ownership classification and final path for every component created or moved, and confirm the dependency direction holds. ## References - [references/placement-examples.md](references/placement-examples.md) — worked placement decisions.
© purrfold · Apache-2.0 · C3SC0-V4113/Scaffold