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

shadcn-ui · nexu-io — скилл для Claude Code: что делает и как установить

Скилл помогает агенту собирать структурированные и доступные UI-компоненты с shadcn/ui. Пригодится на этапе планирования интерфейса.

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

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

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

~/.claude/skills/shadcn-ui/SKILL.md

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

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

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок design-md nexu-io Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе. Claude Code CX Codex Cursor +1 3 100установок

Другие версии shadcn-ui

Похожие

argent-screenshot-diff software-mansion Сравнивает скриншоты до и после изменений в UI: ловит сдвиги в раскладке, отступах, цвете и рендере текста. Claude Code CX Codex Cursor +1 24 900установок presentation iii-hq Превращает каталог технической спецификации в интерактивную веб-презентацию. Нужен, когда спецификацию хотят показать как связный публичный дек. Claude Code CX Codex Cursor +1 3 400установок popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 готовых дизайн-систем реальных сайтов (Stripe, Linear, Vercel, Claude) с CSS-токенами, типографикой и компонентами для быстрой вёрстки в стиле известных брендов. Claude Code CX Codex Cursor +1 914установок expo-data-fetching expo Скилл настраивает сетевые запросы, кэширование и обработку ошибок в Expo. Помогает прописать состояния экранов и интеграцию с TanStack Query. Claude Code CX Codex Cursor +1 27 200установок playwright-skill lackeyjb Скилл для написания и запуска Playwright-скриптов прямо в редакторе. Автоматически находит dev-серверы, делает скриншоты, проверяет адаптивность, тестирует логины и валидирует работу сайта. Claude Code CX Codex Cursor +1 6 900установок angular-migration Seth Hobson Помогает переносить приложения с AngularJS на Angular по частям или целиком. Пригодится для гибридных приложений, замены компонентов и обновления зависимостей. Claude Code CX Codex Cursor 10 900установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о 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

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

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

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