К основному содержанию
affpapa.org
RU EN
скилл Claude Code CX Codex Cursor GitHub Copilot

building-components — скилл для Claude Code: установка

Помогает проектировать доступные UI-компоненты, их API, темы и документацию.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add vercel/components.build --skill building-components -a claude-code
Открыть на GitHub

Что делает building-components

Скилл задаёт подход к созданию UI-примитивов, компонентов, блоков и шаблонов. Он охватывает доступность с ARIA, клавиатурной навигацией и управлением фокусом, а также composable API со слотами, render props и контролируемым или неконтролируемым состоянием.

Внутри есть справочные материалы по полиморфным компонентам, паттерну as-child, типизации TypeScript, data-атрибутам, стилям и design tokens. Отдельные разделы посвящены публикации в npm, распространению через registry или marketplace и написанию документации.

Скилл доступен для Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Поскольку рекомендации разделены по reference-файлам, при изменении компонента стоит открыть соответствующий материал, а не ограничиваться общим описанием.

Какие задачи решает

  • создать доступный UI-компонент с ARIA и клавиатурной навигацией
  • спроектировать composable API со слотами или render props
  • разделить controlled и uncontrolled state
  • настроить design tokens и темизацию
  • подготовить публикацию компонента в npm или registry

Примеры запросов агенту

  • Создай компонент `Dialog` с управлением фокусом, ARIA-атрибутами и клавиатурной навигацией.
  • Спроектируй composable API для `Select` с controlled и uncontrolled state, используя `as-child` там, где это уместно.
  • Подготовь документацию и публикацию компонента в npm, опираясь на правила из `references/npm.mdx` и `references/docs.mdx`.

Как установить building-components

1Через Skills CLI (Vercel)

npx skills add vercel/components.build --skill building-components -a claude-code

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

~/.claude/skills/building-components/SKILL.md

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

Похожие

threejs-textures CloudAI-X Скилл помогает настраивать загрузку изображений, цветовые пространства и типы текстур в Three.js r186. Пригодится при сборке материалов для WebGL или WebGPU. Claude Code CX Codex Cursor +1 12 400установок uncodixfy cyxzdev Учит агента не генерировать типичный «кодексовый» интерфейс: без градиентов, плавающих панелей и декоративных заголовков. Пригодится, когда фронтенд от ИИ выглядит слишком шаблонно. Claude Code CX Codex Cursor +1 5 600установок ui-ux-pro-max AThevon Подбирает дизайн-системы, палитры и шрифтовые пары под стек и тип продукта через локальную базу правил. Пригодится при вёрстке интерфейсов и проверке доступности. Claude Code CX Codex Cursor +1 947установок create-design-md ibelick Генерирует и обновляет файл DESIGN.md на основе репозитория или открытого сайта. Нужен, чтобы передать кодинг-агентам точный дизайн-контекст интерфейса. Claude Code CX Codex Cursor +1 4 400установок debugging-streamlit streamlit Скилл запускает отладку приложений и компонентов Streamlit через команду make debug с горячей перезагрузкой, сбором логов и скриншотами через Playwright. Claude Code CX Codex Cursor +1 493установок design-dna zanwei Разбирает референсы на токены, стиль и визуальные эффекты, затем применяет профиль к макету. Нужен для работы со скриншотами, изображениями и URL. Claude Code CX Codex Cursor +1 6 500установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о building-components

Как установить building-components в Claude Code?

Выполните npx skills add vercel/components.build --skill building-components -a claude-code, затем повторите npx skills add vercel/components.build --skill building-components -a claude-code. Файл скилла находится по пути ~/.claude/skills/building-components/SKILL.md.

Что делает building-components?

Скилл помогает создавать доступные и composable UI-компоненты, проектировать их API, настраивать design tokens и готовить документацию или публикацию.

С какими платформами совместим building-components?

Скилл рассчитан на Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.

Исходный текст

SKILL.md · Apache-2.0 
---
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

© vercel · Apache-2.0 · vercel/components.build

Смотрите также

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

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором