用途 该技能专注于现代 Web 应用的 UI/UX 设计、评估与改进，核心是围绕 TailwindCSS（样式）、Radix UI（行为与无障碍基础组件）、shadcn/ui（完整组件）与 React/Next.js 的技术栈架构，给出可落地的实现方式。
主要能力
- UI/UX 审查与审计：检查组件架构与复用性、WCAG 2.1/2.2 AA/AAA 无障碍、Core Web Vitals 与包体积、响应式设计、设计系统一致性、代码质量、视觉层级等。
- UI/UX 设计：组件设计、布局架构、交互状态（悬停、聚焦、加载、错误）、三层设计令牌、OKLCH 色彩系统、排版系统、动画与过渡。
- UI/UX 改进：增强无障碍、优化性能（代码分割、懒加载、虚拟化、图片优化）、细化响应式、重构组件、统一间距与色彩、完善状态管理与开发者体验。
- 样式集成：支持 Tailwind 与组件结合、CSS-in-JS、CSS Modules 以及基于令牌的跨框架设计系统。
使用方式 文档给出分层使用建议：自定义布局与静态内容直接用 TailwindCSS；需要无障碍但自定义外观时使用 Radix UI 原语；快速搭建标准界面、后台面板、CRUD 与表单密集型应用时使用 shadcn/ui。安装顺序为 TailwindCSS、shadcn/ui CLI（含 Radix 依赖）、按需添加组件、配置主题与深色模式。配置上建议使用 CSS 变量扩展主题、以 class 策略启用深色模式、配置路径别名，并采用三层令牌结构：原始值、语义令牌、组件令牌，深色模式仅切换语义令牌。颜色推荐 OKLCH 以提升感知均匀性与对比度计算可靠性。
适用场景 适合 React/Next.js 项目的界面设计评审、设计系统搭建、无障碍与对比度检查、响应式与深色模式改造、组件库设计以及表单架构设计。文档明确该技能不用于 React/Next.js 整体架构、状态管理、服务端组件、后端 API、数据库与基础设施运维等话题。
限制与注意 资料未提供收费、价格、平台或效果数据，暂未提供相关信息。文档提醒常见问题：Tailwind 不会在运行时生成动态类名、需确保 content 路径覆盖全部组件文件、检查导入别名与深色模式变量配置，且不应移除组件自带的无障碍属性。