用途：该技能面向现代 Web 应用的 UI/UX 设计、审查与改进，聚焦 React/Next.js 技术栈，产出可直接用于生产的界面实现。
主要能力：提供三层架构——TailwindCSS 负责样式与设计令牌（颜色、间距、排版、断点、暗色模式），Radix UI 提供无样式、符合 WAI-ARIA 的可访问行为原语（键盘导航、焦点管理、屏幕阅读器支持），shadcn/ui 提供开箱即用的组件（复制到代码库、自带 React Hook Form + Zod 校验、类型安全变体）。可执行 UI/UX 审查与审计（组件架构、WCAG 2.1/2.2 AA/AAA、Core Web Vitals、响应式、令牌一致性）、界面设计（原子设计、三层层级令牌、OKLCH 色彩、排版、动效）、界面改进（可访问性、性能、组件重构、视觉打磨）以及框架无关的样式集成。
使用方式：安装顺序为 TailwindCSS → shadcn/ui CLI（含 Radix 依赖）→ 按需添加组件 → 配置主题（CSS 变量 + Tailwind config）→ 设置暗色模式。设计令牌采用三层：原始值、语义、组件；Tailwind 配置使用 CSS 变量并启用 class 策略暗色模式。集成模式包括 shadcn/ui + 自定义 Tailwind、Radix 原语 + Tailwind、修改组件文件并用 CVA 扩展变体、组合原语（如 Popover + Select、Dialog + Form）。触发场景：UI/UX 审查、设计系统架构、WCAG 审计、设计令牌、色彩与排版系统、Tailwind/Radix/shadcn/ui 配置、响应式与暗色主题、组件库设计。
适用场景：管理后台、CRUD 应用、设置页、数据表格等表单密集型应用及自定义组件库建设。
限制：不适用于 React/Next.js 架构、状态管理、Server Components、后端 API、数据库与基础设施/DevOps 等话题。资料未提供收费、价格或平台信息。使用中需注意 Tailwind 无法在运行时生成动态类名、内容路径需覆盖所有组件文件、导入别名需与 tsconfig 一致，且不应移除 ARIA 属性。