shadcn/ui

Установка

npx skills add shadcn/ui

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл подгружает в контекст агента конфигурацию проекта из components.json и список уже установленных компонентов. Дальше агент сначала ищет готовый компонент в реестрах командой shadcn search, берет документацию через shadcn docs и добавляет код в проект через CLI, а не пишет разметку с нуля. Набор правил запрещает типичные ошибки: ручные цвета вместо семантических токенов, space-y вместо gap, самодельные формы без Field. Отдельно в репозитории есть MCP-сервер shadcn, который дает агенту поиск и установку элементов из любых реестров, включая приватные.

Для кого. Для фронтенд-разработчиков на React и Tailwind, которые собирают интерфейс на shadcn/ui с помощью агента.

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

Собери страницу настроек профиля на shadcn: вкладки, карточки и форму с валидацией

Ограничения

Скилл вызывает npx shadcn@latest, поэтому нужен Node.js и доступ к npm и реестру ui.shadcn.com. Правила рассчитаны на актуальную версию shadcn/ui с Tailwind, в старых проектах часть советов может не совпасть с кодом.

Как отключить. Удалите папку shadcn из каталога скиллов агента. MCP-сервер уберите из конфигурации клиента, например из .mcp.json.

Проверка безопасности

• Агент запускает npx shadcn и записывает файлы компонентов в проект
• Код компонентов скачивается из внешних реестров

Коротко о README

Корневой README короткий и отправляет в документацию на ui.shadcn.com. На странице Skills описана установка через npx skills add shadcn/ui и состав скилла: контекст проекта, команды CLI, темы, создание реестров и связь с MCP. На странице MCP есть команды mcp init для Claude Code, Cursor, VS Code, Codex и OpenCode и примеры конфигурации. Лицензия MIT.

SKILL.md

---
name: shadcn
description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
user-invocable: false
allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
---

# shadcn/ui

A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.

> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.

## Current Project Context

```json
!`npx shadcn@latest info --json`
```

The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.

## Principles

1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.

## Critical Rules

These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.

Похожие