К основному содержанию
скилл CX Codex

shadcn-component-boundaries — скилл для Claude Code: что делает

Задаёт правила размещения UI-компонентов в проектах с shadcn. Изолирует примитивы реестра от продуктового кода и следит за односторонними импортами.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add C3SC0-V4113/Scaffold --skill shadcn-component-boundaries -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/shadcn-component-boundaries/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/shadcn-component-boundaries/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора4

Спонсоры проекта

Компании, которые помогают держать аналитику открытой