shadcn-ui · nexu-io — скилл для Claude Code: что делает и как установить
Скилл помогает агенту собирать структурированные и доступные UI-компоненты с shadcn/ui. Пригодится на этапе планирования интерфейса.
npx skills add nexu-io/open-design --skill shadcn-ui -a claude-codeЧто делает shadcn-ui
shadcn-ui помогает агенту создавать UI-компоненты с помощью shadcn/ui. Скилл подключается к циклу дизайна Stitch и подсказывает рабочий процесс для структурированных компонентов с учётом доступности.
Запись в OpenDesign нужна, чтобы агент находил скилл во время планирования. Полный upstream-процесс использует исходные assets, scripts и references, поэтому после установки стоит проверить, что пакет с ними добавлен в активную директорию skills.
Скилл рассчитан на Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Это повод заранее проверить путь установки для выбранного агента: у каждой платформы он свой.
Какие задачи решает
- собрать UI-компоненты с shadcn/ui
- спланировать структуру интерфейса
- учесть доступность компонентов
- подключить workflow Stitch к работе агента
- найти скилл во время планирования
Примеры запросов агенту
- Собери форму входа с помощью `shadcn-ui` и учти доступность компонентов.
- Используй `shadcn ui`, чтобы спланировать структуру страницы и набор UI-компонентов.
- Подключи `shadcn components` к циклу дизайна Stitch для текущего интерфейса.
Как установить shadcn-ui
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill shadcn-ui -a claude-code2Вручную: положить файлы
~/.claude/skills/shadcn-ui/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/shadcn-ui/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill shadcn-ui -a codex2Вручную: положить файлы
.agents/skills/shadcn-ui/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill shadcn-ui -a cursor2Вручную: положить файлы
.cursor/skills/shadcn-ui/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design shadcn-ui2Вручную: положить файлы
.github/skills/shadcn-ui/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill shadcn-ui -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/shadcn-uiВручную: положить файлы
.devin/skills/shadcn-ui/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill shadcn-ui -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора106
Весь набор →Другие версии shadcn-ui
Похожие
Вопросы о shadcn-ui
Как установить shadcn-ui в Claude Code?
Выполните по порядку: npx skills add nexu-io/open-design --skill shadcn-ui -a claude-code, затем повторите npx skills add nexu-io/open-design --skill shadcn-ui -a claude-code, после чего проверьте файл ~/.claude/skills/shadcn-ui/SKILL.md.
Что делает shadcn-ui?
Скилл помогает агенту собирать структурированные UI-компоненты с shadcn/ui и учитывать доступность. Он также связывает работу с циклом дизайна Stitch.
Что нужно для полного workflow shadcn-ui?
Полный upstream-процесс использует оригинальные assets, scripts и references. Их нужно добавить в активную директорию skills, если требуется весь workflow.
Исходный текст
SKILL.md · Apache-2.0
--- name: shadcn-ui description: | Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly. triggers: - "shadcn" - "shadcn ui" - "shadcn components" - "accessible components" od: mode: design-system category: design-systems upstream: "https://github.com/google-labs-code/skills" --- # shadcn-ui > Curated from Google Labs (Stitch). ## What it does Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly. ## Source - Upstream: https://github.com/google-labs-code/skills - Category: `design-systems` ## How to use This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/google-labs-code/skills ``` Then ask the agent to invoke this skill by name (`shadcn-ui`) or with one of the trigger phrases listed in this skill's frontmatter.
© nexu-io · Apache-2.0 · nexu-io/open-design