building-components — скилл
Скилл по спецификации components.build: как строить композитные, доступные и стилизуемые UI-компоненты и публиковать их
- 801 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл состоит из Markdown-инструкций и справочников и сам ничего не запускает
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/building-componentsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит из Markdown-инструкций и справочников и сам ничего не запускает
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл building-components превращает открытую спецификацию components.build в справочник для агента. Спецификацию написали Hayden Bleasel и автор `shadcn`, а скилл лежит в `skills/building-components` с файлом `SKILL.md` и пятнадцатью справочными материалами. Материалы идут от определений (примитив, компонент, блок, шаблон) и принципов к конкретным приемам: ARIA и управление с клавиатуры, композиция, паттерн `as-child`, полиморфные компоненты, типы TypeScript, управляемое и неуправляемое состояние, атрибуты `data-*`, дизайн-токены и стилизация. Отдельные разделы объясняют, как публиковать компоненты через реестр в стиле `shadcn`, через npm или на маркетплейсе, и как писать документацию. Примеры написаны на React и TypeScript, но принципы описаны так, чтобы подходить Vue, Svelte и Angular. Файлы справочника подтягиваются из исходников документации сайта, поэтому скилл повторяет опубликованную версию спецификации.
Для кого. Мейнтейнерам открытых библиотек компонентов и фронтенд-инженерам, которые проектируют собственную дизайн-систему и поручают агенту писать компоненты.
Подходит, если
- Агент пишет кнопку, диалог или выпадающий список, и в них нужны правильные роли ARIA и фокус
- Библиотека проектируется как набор составных частей вместо монолитного компонента с десятком свойств
- Компонент должен принимать чужой тег через `as-child`, сохраняя типы TypeScript
- Цвета и размеры выносятся в дизайн-токены с поддержкой тем
- Набор компонентов готовят к публикации в npm или в реестр в стиле `shadcn` с документацией
Не подходит, если
- Приложение собирается из готовых компонентов `shadcn/ui` без написания собственных
- Нужен конкретный API готовой библиотеки: скилл описывает принципы, а свойства Chakra или Radix в нем не перечислены
- Интерфейс не на веб-технологиях, например нативное мобильное приложение
Пример запроса к агенту
Собери по скиллу building-components компонент Dialog из составных частей с фокусом внутри окна и закрытием по EscapeОграничения
Команду `npx skills add vercel/components.build` автор не описывает: она общая для репозиториев с SKILL.md, а README отсылает к спецификации и руководству по вкладу. Скилл дает принципы и ориентируется на React и TypeScript. Для других фреймворков приемы придется переносить самостоятельно. Лицензия в метаданных репозитория не определена, README называет MIT. Скилл ничего не запускает, это набор Markdown-файлов. Качество компонентов зависит от того, как точно агент следует спецификации.
Как отключить. Удалите папку `building-components` из каталога скиллов агента, например из `.claude/skills/`.
Частые вопросы
Что такое components.build и при чем тут скилл?
Это открытая спецификация лучших практик для UI-компонентов, составленная Hayden Bleasel и автором `shadcn`. Скилл `building-components` переносит ее разделы в формат, который агент читает по запросу.
Какие темы покрывает справочник?
В нем пятнадцать файлов: определения, принципы, доступность, композиция, `as-child`, полиморфизм, типы, состояние, data-атрибуты, дизайн-токены, стилизация, реестр, npm, маркетплейсы и документация.
Подойдет ли скилл для Vue или Svelte?
Принципы описаны независимо от фреймворка, но все примеры написаны на React и TypeScript. Агент перенесет идеи композиции и доступности, а синтаксис придется сверять с вашей библиотекой.
Как скилл обновляется?
В репозитории настроен процесс `sync-skill-docs`, который подтягивает справочные файлы из документации сайта. Чтобы получить свежую версию, переустановите скилл.
Чем скилл отличается от `shadcn/ui`?
`shadcn/ui` дает готовые компоненты, а `building-components` объясняет, как проектировать собственные. Агент сочетает их, если вы строите реестр в стиле `shadcn`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
Скиллыshadcn-svelte — скилл для агентов
shadcn-svelte
Скилл по shadcn-svelte: агент читает components.json, ставит компоненты через CLI и собирает формы, диалоги и карточки по правилам библиотеки
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
shadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Скилл Nuxt UI v4: агент строит интерфейсы на Vue и Nuxt, подбирает компоненты, настраивает тему и верстает формы и дашборды
Коротко о README
README представляет components.build как формальную спецификацию для открытых UI-компонентов и перечисляет свойства, которых она добивается. Затем отсылка к руководству по вкладу и лицензии MIT.
Бейдж для README
Исходный SKILL.md
--- name: building-components description: Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation. --- # Building Components ## When to use this skill Use when the user is: - Building new UI components (primitives, components, blocks, templates) - Implementing accessibility features (ARIA, keyboard navigation, focus management) - Creating composable component APIs (slots, render props, controlled/uncontrolled state) - Setting up design tokens and theming systems - Publishing components to npm or a registry - Writing component documentation - Implementing polymorphism or as-child patterns - Working with data attributes for styling/state ## References - [definitions.mdx](./references/definitions.mdx) - Artifact taxonomy (primitives, components, blocks, templates) - [principles.mdx](./references/principles.mdx) - Core principles for component design - [accessibility.mdx](./references/accessibility.mdx) - ARIA, keyboard navigation, WCAG compliance - [composition.mdx](./references/composition.mdx) - Composable component patterns - [as-child.mdx](./references/as-child.mdx) - The as-child pattern for element polymorphism - [polymorphism.mdx](./references/polymorphism.mdx) - Polymorphic component patterns - [types.mdx](./references/types.mdx) - TypeScript typing patterns for components - [state.mdx](./references/state.mdx) - Controlled vs uncontrolled state management - [data-attributes.mdx](./references/data-attributes.mdx) - Using data attributes for styling and state - [design-tokens.mdx](./references/design-tokens.mdx) - Design token systems and theming - [styling.mdx](./references/styling.mdx) - Component styling approaches - [registry.mdx](./references/registry.mdx) - shadcn-style registry distribution - [npm.mdx](./references/npm.mdx) - Publishing components to npm - [marketplaces.mdx](./references/marketplaces.mdx) - Component marketplace distribution - [docs.mdx](./references/docs.mdx) - Writing component documentation