用途：add-ui 是一个用于创建或重新设计 React 与 Tailwind 界面的技能，覆盖区块、页面、流程、外壳和组件。适用于需要新 UI 或 UI 改版的场景。
主要能力：支持营销与变现界面（首屏、功能、定价、评价、FAQ、CTA、博客、联系页、升级弹窗、付费墙等）、导航与外壳（导航栏、页脚、仪表盘外壳、引导页、设置）、认证与账户（登录、注册、找回与重置密码、邮箱验证、双因素认证）、电商（商品概览与列表、筛选、购物车、结算、订单摘要等）、数据界面（图表、微件、数据表格、表单、对比视图、仪表盘）。清单为示例，非穷举。
使用方式：用户通过 /add-ui 启动工作流，技能名以 add-ui 为准（某些宿主可能提供 /add 别名）。先读取 frontend-design 并遵循其上下文收集协议，复用已有上下文，仅询问关键缺口。需收集的最小实现细节包括：React 框架/运行时（React、Next.js、React Router、TanStack Start、Vite React 或带 React islands 的 Astro）、Tailwind 配置与主题令牌约定、目标插入点、是全新产物还是改版、需要区块/页面/流程/外壳/独立组件中的哪一种、质量门槛（快速草稿、可上生产、旗舰级）。改版时还需确认哪些部分必须保持可识别（内容块、区块顺序、交互模型、熟悉的可供性、品牌线索），哪些可灵活调整（样式、颜色、文案、排版、媒体处理、密度、细节语言），以及用户期望稳妥演进、广泛探索对比，还是一两个突破方向。实现默认值的优先级：先匹配现有项目的 React 框架、Tailwind 配置和组件库；全新项目且用户明确指定受支持的组件库时使用该库；全新项目且未指定时使用 frontend-design 中的框架默认值。交付模式：默认直接实现；仅当用户要求候选方案或对比时进入探索流程，未给数量时使用五个方向。
限制与注意事项：当用户要求直接实现时不得生成候选方案；不得只做换色、圆角、图标等表面差异的近似变体；不得以浏览器 DOM 注入作为主要实现策略；不得忽略现有代码库结构与样式系统；不得在用户要求保留本质时推倒既有结构；不应默认采用通用创业公司美学或噱头美学；不要把所有方案都做成高饱和、卡片堆叠、渐变和动画过载；当加载、空、错误、响应式布局等状态会实质影响产物时不得跳过；应用所选变体时应说明改动了什么。视觉验证通过后再报告已检查，未验证的视觉或行为声明应与已实现工作区分开。