rails-application-ui-blocks

Rails 应用 UI 区块

使用此技能，从 templates/application-ui 中选择、调整并集成高级 UI 区块到 Rails 视图中。

工作流

1. 确定模式：

• new-page：用于全新功能或页面
• refactor-page：用于现有视图或局部模板

2. 首先确认约束：

• 必需的交互（Turbo Frames/Streams、Stimulus targets/actions、表单语义）
• 无障碍约束（标签、键盘操作流程、ARIA）
• 现有组件边界（局部模板、辅助方法、共享布局）

3. 从目录中选择候选区块：

• 阅读 references/selection-playbook.md
• 查询 references/template-catalog.json

4. 尽量精简地集成：

• 保持现有路由、控制器和领域逻辑不变
• 分小步替换标记（先替换外壳，再替换区块，最后替换微型组件）

5. 验证：

• 确保行为、无障碍支持或测试覆盖没有损失
• 项目标准有要求时，保留现有设计令牌和类名约定

选择顺序

对于 new-page：

1. 从 ui.page-examples.* 开始，以确定页面结构。
2. 从 ui.application-shells.* 中选择外壳。
3. 从 ui.headings.* 中添加页面或区块标题。
4. 添加核心内容区块（ui.forms.*、ui.lists.*、ui.data-display.*、ui.feedback.*）。
5. 最后处理导航和叠加层细节（ui.navigation.*、ui.overlays.*）。

对于 refactor-page：

1. 保留当前的信息架构和交互约定。
2. 将每个现有 UI 区域映射到一个候选目录区块。
3. 一次替换一个区域，并运行相关测试。
4. 只有在确认存在复用需求后，才将重复标记提取到局部模板中。

注意事项

• 除非明确要求，否则不要更改控制器、模型或策略。
• 不要移除 data-controller、data-action、data-turbo-*、aria-* 或表单字段名称，除非有替代项。
• 优先调整区块以适应项目样式，而不是引入相互冲突的视觉系统。
• 如果原生组件已经能满足相同需求，避免插入与现有设计系统组件重复的区块。

输出要求

使用此技能完成任务时，请包含：

• 所选目录 ID（便于追溯）
• 使用的源模板路径
• 引入的任何行为或无障碍差异
• 有意保留未替换的内容及其原因

资源

• references/selection-playbook.md
  • 用于判断应优先检查哪些模板系列，以及何时不应使用它们。
• references/template-catalog.json
  • 包含规范区块 ID、别名和源路径。
• scripts/build_template_catalog.py
  • 模板更新后重新生成目录。

维护

当 templates/application-ui 下的文件发生更改时，重新生成目录：

python3 .agents/skills/rails-application-ui-blocks/scripts/build_template_catalog.py \
  --root .