specsfy-specialist-react-ui-components

React 界面组件

适用场景

• 当需要根据 assets/components/ 中 231 个已版本控制的 TSX 示例创建 React 界面时使用。
• 当需要比较导航、表单、数据、反馈、营销或排版变体，且不引入运行时库时使用。
• 如果没有视觉相关工作，只是修复状态、effects 或并发问题，则不要使用；改用 $specsfy-specialist-react。
• 始终与 $specsfy-specialist-ui-design 配合使用，由它在选择资源前确定层级、组合方式和密度。

工作流

1. 宣布将配合使用，并在选择参考项前加载 $specsfy-specialist-design-system 和 $specsfy-specialist-ui-design。将 DESIGNSYSTEM.MD 作为宏观依据，将 INTERFACE.md 作为本地记录。
2. 检查使用方项目的 React 版本、框架、Tailwind、设计系统、本地组件、图标和测试策略。如果项目使用 shadcn/ui，请与 $specsfy-specialist-shadcn-ui 确认每个组件的 primitives 基础，再改编资源。
3. 与 UX 和 UI 确认主要任务、页面、信息流、表单、打开模式、层级、组合方式、密度、状态和断点。目录不会替你决定这些内容。
4. 对于已认证的 CRUD，优先选择 PageHeader、DataGrid、DetailLists、表单和反馈类别。对于 dashboard，选择 PageHeader、筛选器、指标、主视图和详细分析。在查阅目录前，先区分这些界面区域。
5. 在 references/catalog.md 中选择类别，并仅列出 assets/components/<familia>/ 中的候选资源。
6. 只阅读足以比较不同变体的最少 TSX 文件。
7. 根据观察到的 tokens、组件、路由、数据和约定改编参考项；不要用示例的结构取代本地架构。
8. 实现所有相关状态，并验证行为、外观、响应式布局和无障碍性。

对于完整页面，请阅读 references/composition-map.md。要逐步进行选择，请阅读 references/conversation-flow.md。

规范

• 将 assets/ 中的文件视为可复制的参考，而非软件包或运行时依赖。
• 改编时保留语义、键盘操作、焦点、aria-*、sr-only、alt、暗色模式和实用的断点。
• 优先使用消费项目中已有的 tokens、primitives、Link、图像和组件。
• 替换模拟数据、外部 URL、href="#" 和演示文案。
• 使用资源前确认其显式依赖，例如 Headless UI 或 Heroicons；未经授权不得安装软件包。
• 保持 $specsfy-specialist-ui-design 定义的构成；有可用示例并不意味着应该添加一个区块。
• 遵循 CRUD 默认规范：列表使用 DataGrid，详情使用 DetailLists，所有界面均使用 PageHeader；创建和编辑表单按分区组织，并采用响应式双列布局。
• 让 DataGrid 行支持点击或键盘操作以打开详情，并使用 TableRowAction 或等效方案保护内部按钮、复选框和菜单。
• 每个页面都渲染 Breadcrumb，并保留当前团队名称、模块和当前页面。在 Laravel 中，复用布局中已有的 Breadcrumb 或 Breadcrumbs，而不是新建 primitive。
• 在宽屏断点下将相关字段分成两列，在移动端排成一列；长字段和错误消息使用全宽。
• 对于仪表盘，根据页面的问题、范围、筛选器、指标和状态，使用 ReUI 区块或兼容的 shadcn/ui primitives。
• 字段错误以红色显示在字段下方，并附带消息；将焦点移至第一个错误处，同时保留已填写的值。
• 通过层级、数据、文案和产品状态塑造页面个性，不要照搬目录中的通用构成。
• 涉及状态所有权、effects、并发或 React 测试时，与 $specsfy-specialist-react 配合；需要深入审计时，与 $specsfy-specialist-web-accessibility 配合。

反模式

• 复制整个页面，却保留模拟数据、不存在的导入或 # 链接；示例因此不再是参考，而变成了耦合债务。
• 在确定任务和层级之前，仅凭外观选择资源；这样会让目录主导产品，而不是服务于页面意图。
• 未梳理本地 primitives 就安装示例提及的所有依赖；这会造成两套相互竞争的组件和 tokens 来源。
• 为图方便将静态组件改成 Client Components；这会增加发送的 JavaScript，并在无必要时将展示与状态混在一起。

验证

• 运行消费项目中已定义的测试、lint 和 typecheck。
• 在相关情况下，检查 nominal、loading、empty、error、disabled 和 permission denied 状态。
• 检查移动端和桌面端、缩放、溢出、短/长内容、键盘、焦点、对比度和 reduced motion。
• 确认导入项和外部资源均存在，且未隐式引入任何软件包。
• 使用 references/interface-quality-checklist.md 和 $specsfy-specialist-ui-design 审查最终界面。
• 在展示键盘交互、异常状态以及受支持断点下无溢出之前，不要声称界面已集成。
• 确认已阅读 DESIGNSYSTEM.MD，并记录任何视觉例外的适用范围。

相关技能

• $specsfy-specialist-interface-experience 在选择 React 组件之前，组织界面 的发现与完整交付。
• $specsfy-specialist-shadcn-ui 确定 primitives 的基础并提供可适配的 组件；此技能提供可复制的 TSX 组合，而非运行时依赖。
• $specsfy-specialist-ui-design 负责组合、层级、密度和视觉一致性；此技能 提供可适配的 React 素材。
• $specsfy-specialist-design-system 在选择素材之前，负责宏观规则和 CRUD 模式。
• $specsfy-specialist-react 负责状态所有权、effects、并发和行为测试。
• $specsfy-specialist-tailwind-css 负责视觉适配中使用的 tokens 和工具类。
• $specsfy-specialist-web-accessibility 除了基础界面检查，还负责执行 WCAG 审计和辅助技术测试。
• $specsfy-specialist-nextjs 或 $specsfy-specialist-astro 负责宿主框架的 server/client 边界和路由。

请阅读 references/standards.md，了解选择、适配、 状态、依赖和验证规则，并仅在工作流中要求的步骤加载其他 references/ 文件。