菜单
Provides shadcn/ui component library expertise for React applications with shadcn/cli v4, preset system, RTL support, unified radix-ui, and OKLCH theming. Use when implementing UI components, design systems, CLI workflows, or registry authoring with shadcn/ui.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/modu-ai/moai-studio --skill moai-library-shadcn命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Mobile native and cross-platform development domain skill covering iOS native (Swift/SwiftUI), Android native (Kotlin/Jetpack Compose), React Native, and Flutter. Use when implementing mobile features or selecting between mobile paradigms. Harness seed: invoke builder-skill for deep sub-skills.
MoAI unified orchestrator for autonomous development. Routes natural language or subcommands (plan, run, sync, design, db, project, fix, loop, mx, feedback, review, clean, codemaps, coverage, e2e) to specialized agents.
Brand-aligned visual design system specialist for web projects. Enforces hero-first layout chaining, WCAG 2.1 AA accessibility, Lighthouse >= 80, and design token extraction from brand identity files. Covers color palettes, typography, spacing, and component specifications.
基于 SOC 职业分类
正在显示 SKILL.md
| name | moai-library-shadcn |
| description | Provides shadcn/ui component library expertise for React applications with shadcn/cli v4, preset system, RTL support, unified radix-ui, and OKLCH theming. Use when implementing UI components, design systems, CLI workflows, or registry authoring with shadcn/ui. |
| license | Apache-2.0 |
| compatibility | Designed for Claude Code |
| allowed-tools | Read, Grep, Glob, mcp__context7__resolve-library-id, mcp__context7__get-library-docs |
| user-invocable | false |
| metadata | {"version":"3.0.0","category":"library","modularized":"true","status":"active","updated":"2026-03-28","tags":"library, shadcn, enterprise, development, ui, preset, RTL, OKLCH, CLI v4, radix-ui, registry","aliases":"moai-library-shadcn"} |
| triggers | {"keywords":["shadcn","component library","design system","radix","tailwind","ui components","preset","RTL","OKLCH","radix-ui","migrate","shadcn skills","registry"]} |
Enterprise shadcn/ui Component Library Expert
Comprehensive shadcn/ui expertise covering shadcn/cli v4, preset-based design systems, RTL support, unified radix-ui package, OKLCH theming, and AI integration for modern React applications.
Core Capabilities:
When to Use:
Module Organization:
shadcn/ui is a collection of re-usable components built with Radix UI and Tailwind CSS. Unlike traditional component libraries, it is not an npm package but rather a collection of components you copy into your project.
Key Benefits include full control and ownership of components, zero dependencies beyond Radix UI primitives, complete customization with Tailwind CSS, TypeScript-first design with excellent type safety, and built-in accessibility with WCAG 2.1 AA compliance.
Architecture Philosophy: shadcn/ui components are built on top of Radix UI Primitives which provide unstyled accessible primitives. Tailwind CSS provides utility-first styling. TypeScript ensures type safety throughout. Your customization layer provides full control over the final implementation.
Form Components include Input, Select, Checkbox, Radio, and Textarea. Form validation integrates with react-hook-form and Zod. Accessibility is ensured through proper ARIA labels.
Display Components include Card, Dialog, Sheet, Drawer, and Popover. Responsive design patterns are built in. Dark mode support is included.
Navigation Components include Navigation Menu, Breadcrumb, Tabs, and Pagination. Keyboard navigation support is built in. Focus management is handled automatically.
Data Components include Table, Calendar, DatePicker, and Charts. Virtual scrolling is available for large datasets. TanStack Table integration is supported.
Feedback Components include Alert, Toast, Progress, Badge, and Avatar. Loading states and skeletons are available. Error boundaries are supported.
New Components in 2026 include Empty, Field, Item, Button Group, Spinner, Kbd, and Input Group.
Step 1: Initialize project using shadcn/cli v4. Choose a framework template (Next.js, Vite, TanStack Start, React Router, Astro, or Laravel) and optionally apply a preset for bundled design system configuration.
Step 2: The CLI generates a components.json configuration file. It detects the framework, configures Tailwind CSS (v3 or v4), sets up path aliases, and selects the base primitive library (Radix UI or Base UI).
Step 3: Add components individually using the add command. Use --dry-run to preview changes, --diff to see registry updates. The shadcn info command shows installed components and project configuration.
React 19 features include Server Components support, concurrent rendering, automatic batching, and streaming SSR.
TypeScript 5.9 provides full type safety, improved inference, and enhanced developer experience.
Tailwind CSS v4 includes CSS-first configuration, CSS variables, OKLCH color support, and container queries.
Radix UI uses the unified radix-ui package with single imports. Base UI is available as an alternative primitive library.
Integration Stack includes React Hook Form for form state, Zod for schema validation, class-variance-authority for variants, Framer Motion for animations, and Lucide React for icons.
The ShadcnUIArchitectOptimizer class uses Context7 MCP integration to design optimal shadcn/ui architectures. It initializes a Context7 client, component analyzer, and theme optimizer. The design_optimal_shadcn_architecture method takes design system requirements and fetches latest shadcn/ui and React documentation via Context7. It then optimizes component selection based on UI components and user needs, optimizes theme configuration based on brand guidelines and accessibility requirements, and returns a complete ShadcnUIArchitecture including component library, theme system, accessibility compliance, performance optimization, integration patterns, and customization strategy.
Requirements include using CSS variables for theme customization, implementing proper TypeScript types, following accessibility guidelines for WCAG 2.1 AA compliance, using Radix UI primitives for complex interactions, testing components with React Testing Library, optimizing bundle size with tree-shaking, and implementing responsive design patterns.
Critical Implementation Standards:
[HARD] Use CSS variables exclusively for color values. This enables dynamic theming, supports dark mode transitions, and maintains design system consistency across all components. Without CSS variables, theme changes require code modifications, dark mode fails, and brand customization becomes unmaintainable.
[HARD] Include accessibility attributes on all interactive elements. This ensures WCAG 2.1 AA compliance, screen reader compatibility, and inclusive user experience for users with disabilities. Missing accessibility attributes excludes users with disabilities, violates legal compliance requirements, and reduces application usability.
[HARD] Implement keyboard navigation for all interactive components. This provides essential navigation method for keyboard users, supports assistive technologies, and improves overall user experience efficiency. Without keyboard navigation, power users cannot efficiently use the application and accessibility compliance fails.
[SOFT] Provide loading states for asynchronous operations. This communicates operation progress to users, reduces perceived latency, and improves user confidence in application responsiveness.
[HARD] Implement error boundaries around component trees. This prevents entire application crashes from isolated component failures, enables graceful error recovery, and maintains application stability.
[HARD] Apply Tailwind CSS classes instead of inline styles. This maintains consistency with design system, enables JIT compilation benefits, supports responsive design variants, and improves bundle size optimization.
[SOFT] Implement dark mode support across all components. This provides user preference respect, reduces eye strain in low-light environments, and aligns with modern UI expectations.
Bundle Size optimization includes tree-shaking to remove unused components, code splitting for large components, lazy loading with React.lazy, and dynamic imports for heavy dependencies.
Runtime Performance optimization includes React.memo for expensive components, useMemo and useCallback for computations, virtual scrolling for large lists, and debouncing user interactions.
Accessibility includes ARIA attributes for all interactive elements, keyboard navigation support, focus management, and screen reader testing.
The composable pattern involves importing Card, CardHeader, CardTitle, and CardContent from the ui/card components. A DashboardCard component accepts a title and children props, wrapping them in the Card structure with CardHeader containing CardTitle and CardContent containing the children.
The Zod and React Hook Form integration pattern involves importing useForm from react-hook-form, zodResolver from hookform/resolvers/zod, and z from zod. Define a formSchema with z.object containing field validations such as z.string().email() for email and z.string().min(8) for password. Infer the FormValues type from the schema. The form component uses useForm with zodResolver passing the formSchema. The form element uses form.handleSubmit with an onSubmit handler.
Related Libraries:
Official Documentation:
Latest Versions as of March 2026:
Last Updated: 2026-03-28 Status: Production Ready
| Rationalization | Reality |
|---|---|
| "I will customize the component after copying it" | Customization without understanding the original breaks accessibility and keyboard interaction. Read the source first. |
| "I do not need the CLI, I will copy-paste from the docs" | The CLI handles dependency resolution and file placement. Manual copy misses peer dependencies and path conventions. |
| "Any color palette works, I will pick one later" | shadcn/ui uses CSS variables tied to the theme. Changing colors later means updating every component that references them. |
| "I will skip the dark mode variant for now" | shadcn components are designed for light/dark from the start. Skipping dark mode means retrofitting every component later. |
| "This component is too complex, I will build my own" | shadcn components are battle-tested for accessibility and keyboard navigation. Building your own risks regressions in both. |
