该技能用于在 React/Next.js/TypeScript/Tailwind 技术栈上构建或评审 SaaS 网页界面，统一应用外壳、导航、仪表盘和数据表格等模式；也适用于 Bootstrap 5 + Tabler + PHP seeder 栈（需先加载 sections/01-overview.md）。纯落地页或营销页、移动原生界面、底层 Tailwind 语法问题不适用。使用前需要目标界面类型（仪表盘、CRUD 表格、表单、设置）、认证与租户模型，以及至少一个界面的数据模型。
工作流程：先把界面放入应用外壳（侧边栏+顶栏+内容区），选择布局原语（仪表盘网格、表格、表单、带标签页的详情页），用 React Query 接数据，禁止在组件内直接 fetch，接真实数据前先补全加载、空、错误、成功四种状态，优先扩展现有共享原语，最后按 §15 做无障碍与响应式检查。
主要能力与规则：每张数据界面必须具备加载、空、错误、成功四态；表单统一用 React Hook Form + Zod 与单一 FormField 原语；所有交互控件可用键盘操作；共享模式通过已记录的 token 与组件实现；正文对比度不低于 4.5:1，18pt 以上或粗体不低于 3:1；按钮与链接使用正确元素；按钮需有启用、悬停、聚焦、按下、禁用、加载状态，标签描述结果而非模糊动作；破坏性操作使用危险变体并确认或可撤销；触控目标至少 44x44 CSS 像素。反模式包括：初次加载后整页转圈、逐路由自定义外壳、未验证的提交、只说“无数据”的空状态、焦点陷阱错误的模态、把按钮当链接、通用 CTA 文案、加载时移除按钮文字等。
产出物：应用外壳组件、路由级布局文件、可复用原语（DataTable、FormField、Dialog、EmptyState、StatusPill）、Tailwind 主题 token、无障碍检查报告，以及界面布局与状态矩阵、无障碍与响应式审查、UI 外壳与原语登记三类文档。参考资料包括 Shadcn/ui、TanStack Table、Atomic Design、React Hook Form、Zod 等免费资源；面向高端产品可加载 premium-ui-ux-design 与 premium-software-product-execution。
限制与未提供信息：资料未说明收费、价格、具体版本支持范围、性能指标或跨浏览器测试结论；具体实现细节与示例代码需按原文各部分执行。