用途
当 React 界面需要基于 assets/components/ 下版本化的 231 个 TSX 示例来创建时触发此技能。也用于在不引入运行时库的前提下，比较导航、表单、数据、反馈、营销或排版等变体。若只是修复状态、effects 或并发问题且没有视觉工作，应改用 $specsfy-specialist-react。该技能始终与 $specsfy-specialist-ui-design 配合使用，后者在挑选资产之前决定层级、构图与密度。
主要能力
- 在 references/catalog.md 中选择组件族，并只列出 assets/components/<familia>/ 下的候选资产。
- 用尽可能少的 TSX 文件比较变体，并将参考适配到项目已观察到的 tokens、组件、路由、数据和约定，不用示例结构替换本地架构。
- 实现所有相关状态，并验证行为、外观、响应式与可访问性。
- 对完整页面，读取 references/composition-map.md；进行增量选择时，读取 references/conversation-flow.md。
- 将 assets/ 中的文件视为可复制参考，绝不当作包或运行时依赖。
使用方式
- 声明联合使用，先加载 $specsfy-specialist-design-system 与 $specsfy-specialist-ui-design，再选择参考。以 DESIGNSYSTEM.MD 作为宏观来源，以 INTERFACE.md 作为本地记录。
- 检查消费项目的 React 版本、框架、Tailwind、设计系统、本地组件、图标与测试策略。若存在 shadcn/ui，先用 $specsfy-specialist-shadcn-ui 确认每个组件的 primitives 基础，再适配资产。
- 与 UX 和 UI 确认主任务、屏幕、信息流、表单、打开方式、层级、构图、密度、状态与断点。目录不负责决定这些内容。
- 对于带认证的 CRUD，优先选择 PageHeader、DataGrid、DetailLists、表单与反馈族。对于仪表盘，选择 PageHeader、过滤器、指标、主视图与详细调查。在查询目录之前保持各界面彼此区分。
- 适配时保留语义、键盘、焦点、aria-*、sr-only、alt、dark mode 与有用的断点。优先使用消费项目中已发布的 tokens、primitives、Link、图片和组件。
- 替换 mock 数据、外部 URL、href="#" 和演示文案。使用资产显式依赖（如 Headless UI 或 Heroicons）前先确认；未经授权不得安装包。
- 保持由 $specsfy-specialist-ui-design 定义的构图；某个示例可用并不构成增加一个区块的理由。
适用场景
- 落地页、营销页、导航、表单、数据、反馈与排版等界面构建。
- 带认证的 CRUD 界面：DataGrid 列表、DetailLists 详情、所有界面使用 PageHeader，创建与编辑表单按区块组织为两列响应式布局。
- 仪表盘：使用与问题、范围、过滤器、指标和屏幕状态兼容的 ReUI 区块或 shadcn/ui primitives。
- 通过点击或键盘让 DataGrid 行打开详情，并用 TableRowAction 或等效方式保护按钮、复选框和内部菜单。
- 在所有屏幕渲染 Breadcrumb，保留活动团队名、模块与当前屏幕。在 Laravel 中复用布局中已有的 Breadcrumb 或 Breadcrumbs，而不新建 primitive。
限制
- 必须与 $specsfy-specialist-ui-design 配合使用；目录不决定任务、层级与构图。
- 资产的显式依赖需先确认，未授权不得安装包。
- 不得复制整个页面并保留 mock 数据、不存在的 imports 或 # 链接；示例若如此会从参考变成耦合债务。
- 不得在未定义任务与层级前按外观挑选资产。
- 不得安装示例提到的所有依赖而不映射本地 primitives；否则会产生两套并存的组件与 tokens 来源。
- 不得为便利把静态组件变成 Client Components。
- 需运行消费项目已定义的测试、lint 与 typecheck；验证 nominal、loading、empty、error、disabled 与 permission denied 状态（在相关时）；检查移动端与桌面端、缩放、溢出、短/长内容、键盘、焦点、对比度与 reduced motion。
- 未演示键盘交互、异常状态与受支持断点无溢出前，不得声称界面已集成。
- 需确认已读取 DESIGNSYSTEM.MD，且任何视觉例外都有记录范围。
- 字段错误需以红色显示在字段下方，聚焦第一个错误并保留取值。
- 相关技能：$specsfy-specialist-interface-experience、$specsfy-specialist-shadcn-ui、$specsfy-specialist-ui-design、$specsfy-specialist-design-system、$specsfy-specialist-react、$specsfy-specialist-tailwind-css、$specsfy-specialist-web-accessibility、$specsfy-specialist-nextjs 或 $specsfy-specialist-astro。读取 references/standards.md 了解选择、适配、状态、依赖与证明规则，其余 references/ 文件仅在流程要求相应步骤时加载。