specsfy-specialist-reui

用于产品界面的 ReUI

Specsfy 有明确主张：对于 React 和 Tailwind 界面，shadcn/ui 提供基础组件，ReUI 提供免费的组合组件。这是 Promovaweb 构建 CRUD 和产品页面的默认基础。

适用场景

用于需要免费 ReUI 组件的 React 页面。在 Laravel 中，当 React 前端已通过 Inertia、Vite 或其他集成完成配置时使用。在 Next.js、Astro 或纯 React 中，保留由宿主框架定义的路由和 hydration。

流程

1. 阅读 INTERFACE.md、技术栈、components.json、Tailwind、本地基础组件和受影响的页面。如果 INTERFACE.md 不存在，请先执行 $specsfy-setup，再创建界面。
2. 在初始化 registry 前，确认 React 19、Tailwind CSS v4 和 shadcn/ui。将 $specsfy-specialist-shadcn-ui 与此技能一起加载，以初始化或审核 components.json、别名、主题和基础组件。
3. 阅读 references/setup.md，以准备项目并选择已使用的 Base UI 或 Radix 变体。
4. 使用 references/catalog-free.md 只选择免费的、与既定流程兼容的项目。创建替代方案前，还要阅读 references/components-free.md，了解所有公开组件系列。对于使用 React 的 Laravel 项目，必须阅读 references/shadcn-components.md。
5. 使用 registry 返回的 npx shadcn@latest add 命令安装所需的最小集合，切勿手动复制 URL 或高级版项目。
6. 在调整系统数据、操作、状态、路由和权限前，先阅读项目的 API 和实际示例。
7. 将界面拆分为 React 组件：页面负责组合流程；领域组件集中处理网格、表单、筛选器和操作；可复用的基础组件和组合组件放在项目已定义的目录中。
8. 使用每个新建或修改的模块更新 INTERFACE.md：记录文件、shadcn/ui 或 ReUI 来源、用途、props 和事件、状态、无障碍性、使用方，以及复用或扩展规则。
9. 使用项目的测试、类型检查、lint 和构建验证页面。

规范

• 所有使用 React 和 Tailwind 的 CRUD 界面都以 ReUI 作为视觉基础：查询使用 Data Grid 或 List，筛选使用 Filters，创建和编辑使用 Form 和 ReUI 字段， 上下文操作使用 Dialog 或 Sheet，反馈和状态使用 Alert/Badge。如果免费目录 已能满足交互需求，就不要手动创建替代方案。
• 在带详情的列表中，Data Grid 应使整行都可点击，并支持键盘访问。按钮、 复选框和内部菜单应放在独立的操作层中，例如 TableRowAction，以免误打开 详情。
• 创建和编辑时，按区块使用 Form：左侧为上下文信息，右侧为字段面板；宽屏 断点下使用两列布局，移动端使用一列。
• 每个页面都要有 Breadcrumb，包含当前团队名称、模块和当前标题。在 Laravel 中，复用布局中已有的 Breadcrumb 或 Breadcrumbs，以及路由使用 的类型定义。
• 在 components.json 中注册 @reui，使用 https://reui.io/r/{style}/{name}.json；c-* 项目均为免费。
• 保留已有的 primitives 库：Base UI 和 Radix 的 API 不同，尽管 Tailwind 样式等效。
• 仅在页面使用时添加 ReUI 的语义化成功、信息、警告、反转和破坏性操作 tokens。
• 在 Laravel 中，保留 Form Requests、policies 和服务器端验证；ReUI 能改善 用户体验，但不能取代 PHP 契约。
• 在 Laravel 中，先完成 Vite、Inertia React、React 19、Tailwind v4 和 shadcn/ui，再接入 ReUI registry。Blade、Livewire 和 Vue 必须先在 spec 中记录迁移方案，之后才能接入 React 组件。
• 使用适用于实际任务的复合组件，并提供真实数据，以及空、加载、错误、成功、 键盘和焦点状态。
• 不要在单个路由中集中实现网格、表单、筛选器、对话框、侧边面板或可复用 卡片。将每个部分提取为职责和 API 明确的 React 组件。
• 在 INTERFACE.md 中记录所有使用的 ReUI 和 shadcn/ui 免费组件，以及每个 自定义 React 区块，并说明其用途、路径、API、状态、使用方和正确的复用或 扩展方式。

反模式

• 使用高级区块、图标或模板；此 skill 仅使用免费目录，且不会创建 REUI_LICENSE_KEY。
• 为安装组件而将现有的 Radix primitives 迁移到 Base UI，或反向迁移。
• 复制演示数据、缺失的 imports 或目录中虚构的 API。
• 将视觉验证视为授权或持久化验证。
• 未先查询 ReUI 免费目录，就自行创建表格、筛选器、模态框、上传功能或 CRUD 表单。

验证

• 执行检测到的项目命令，并测试键盘导航、焦点、响应式布局、主题和页面状态。
• 确认每个已安装的项目都以 @reui/c- 开头，或是 registry 自行安装的公共 依赖。
• 结束前检查 components.json、imports 和已添加的 tokens。

相关 Skills

• $specsfy-specialist-react 负责 React 状态和测试。
• $specsfy-specialist-tailwind-css 负责 Tailwind tokens 和工具类。
• $specsfy-specialist-shadcn-ui 负责 primitives 和 components.json。
• $specsfy-specialist-laravel 负责 Laravel 后端、Inertia、授权和测试。
• $specsfy-specialist-ui-design 和 $specsfy-specialist-ux-design 在选择 组件前定义用户体验。

阅读 references/standards.md 了解官方来源、tokens 和命令，并在使用 ReUI 时查阅 setup 和目录参考资料。