用途：在构建或修改 React UI 组件时加载该技能，提供 shadcn/ui 与组件组织的统一模式。
主要能力与用法： 1）组件库采用 shadcn/ui，复制粘贴模式，组件位于 src/components/ui/，代码归自己所有；基于 Radix UI 原语，使用 Tailwind CSS 与 CVA（class-variance-authority）管理变体。安装组件命令：npx shadcn@latest add button。 2）组件组织：src/components/ui/ 放原语（Button、Card、Dialog、Input）；src/components/layout/ 放应用外壳与导航（Header、Sidebar、PageContainer）；src/mfes/{domain}/components/ 放特定功能组件（ProductCard、OrderTable）；src/app/ 放路由组件（page.tsx、layout.tsx）。 3）编码规则：自定义 props 接口加 readonly；导出的功能组件标明返回类型；UI 原语使用 React.ComponentProps<'元素'> 与 data-slot；采用命名导出（Next.js 页面除外）；类名用 cn() 合并（clsx + tailwind-merge）。 4）变体系统：用 cva 定义 variant 与 size，key 模式包括 React.ComponentProps<'element'>、asChild + Slot 多态渲染、每个组件加 data-slot、className 传入 buttonVariants() 而非单独 cn() 参数、底部命名导出。 5）设计令牌为 CSS 变量：primary、secondary、destructive、muted、accent、background、foreground，各有 -foreground 文本配对，侧边栏有 sidebar-primary、sidebar-accent 等，通过 Tailwind 消费。 6）数据驱动组件应处理加载、错误、空三种状态（如 Skeleton、ErrorMessage、EmptyState）。 7）可访问性：使用语义 HTML（button 而非带 onClick 的 div）、Radix 原语、仅图标按钮须加 aria-label，并用键盘导航测试。
限制：资料未提供收费、价格、平台支持范围或效果数据。状态逻辑另见 managing-state 技能，API 集成见 building-api-clients，组件测试见 testing-react-ts。