Back to Details

rails-application-ui-blocks

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Rails Application UI Blocks

Rails 应用UI组件块

Use this skill to choose, adapt, and integrate premium UI blocks from 
templates/application-ui
into Rails views.
使用本技能来选择、适配并将
templates/application-ui
中的高级UI组件块整合到Rails视图中。

Workflow

工作流程

  1. Determine mode:
  • new-page for brand new features/pages
  • refactor-page for existing views/partials
  1. Identify constraints first:
  • Required interactions (Turbo Frames/Streams, Stimulus targets/actions, form semantics)
  • Accessibility constraints (labels, keyboard flow, ARIA)
  • Existing component boundaries (partials, helpers, shared layouts)
  1. Pick candidate blocks from catalog:
  • Read 
    references/selection-playbook.md
  • Query 
    references/template-catalog.json
  1. Integrate minimally:
  • Keep existing routes/controllers/domain logic unchanged
  • Replace markup in thin steps (shell first, then sections, then micro-components)
  1. Verify:
  • Ensure no loss of behavior, accessibility, or test coverage
  • Keep existing design tokens and class conventions where required by project standards
  1. 确定模式：
  • new-page：用于全新功能/页面
  • refactor-page：用于现有视图/局部视图
  1. 首先明确约束条件：
  • 必需的交互（Turbo Frames/Streams、Stimulus目标/动作、表单语义）
  • 可访问性约束（标签、键盘导航流程、ARIA属性）
  • 现有组件边界（局部视图、辅助方法、共享布局）
  1. 从组件库中挑选候选组件块：
  • 阅读
    references/selection-playbook.md
  • 查询
    references/template-catalog.json
  1. 最小化整合：
  • 保持现有路由/控制器/领域逻辑不变
  • 分步骤替换标记（先替换外壳，再替换区块，最后替换微组件）
  1. 验证：
  • 确保行为、可访问性或测试覆盖率没有损失
  • 若项目标准有要求，保留现有设计标记和类约定

Selection Order

选择顺序

For 
new-page
:
  1. Start with 
    ui.page-examples.*
    to anchor page structure.
  2. Choose shell from 
    ui.application-shells.*
    .
  3. Add page/section headings from 
    ui.headings.*
    .
  4. Add core body blocks (
    ui.forms.*
    , 
    ui.lists.*
    , 
    ui.data-display.*
    , 
    ui.feedback.*
    ).
  5. Finish with navigation and overlay details (
    ui.navigation.*
    , 
    ui.overlays.*
    ).
For 
refactor-page
:
  1. Preserve current information architecture and interaction contracts.
  2. Map each existing UI region to one candidate catalog block.
  3. Replace one region at a time and run relevant tests.
  4. Extract repeated markup into partials only after reuse is proven.
对于
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. 仅在证明需要复用后，将重复的标记提取为局部视图。

Guardrails

约束规则

  • Do not change controllers/models/policies unless explicitly requested.
  • Do not remove 
    data-controller
    , 
    data-action
    , 
    data-turbo-*
    , 
    aria-*
    , or form field names without replacement.
  • Prefer adapting blocks to project styles over introducing conflicting visual systems.
  • Avoid block insertion that duplicates existing design-system components when native components already solve the same need.
  • 除非明确要求，否则不要修改控制器/模型/策略。
  • 不要移除
    data-controller
    、
    data-action
    、
    data-turbo-*
    、
    aria-*
    或表单字段名称，除非有替代方案。
  • 优先适配组件块以符合项目样式，而非引入冲突的视觉系统。
  • 当原生组件已能满足需求时，避免插入与现有设计系统组件重复的组件块。

Output Expectations

输出要求

When completing a task with this skill, include:
  • Selected catalog IDs (for traceability)
  • Source template paths used
  • Any behavior/accessibility deltas introduced
  • What was intentionally not replaced and why
使用本技能完成任务时，需包含：
  • 所选组件库ID（用于可追溯性）
  • 使用的源模板路径
  • 引入的任何行为/可访问性变更
  • 故意未替换的内容及原因

Resources

资源

  • references/selection-playbook.md
    • Decision rules for what template families to check first, and when not to use them.
  • references/template-catalog.json
    • Canonical block IDs with aliases and source paths.
  • scripts/build_template_catalog.py
    • Regenerates the catalog after template updates.
  • references/selection-playbook.md
    • 关于优先检查哪些模板系列以及何时不使用它们的决策规则。
  • references/template-catalog.json
    • 包含别名和源路径的标准组件块ID。
  • scripts/build_template_catalog.py
    • 在模板更新后重新生成组件库。

Maintenance

维护

Regenerate the catalog when files under 
templates/application-ui
change:
bash
python3 .agents/skills/rails-application-ui-blocks/scripts/build_template_catalog.py \
  --root .
当
templates/application-ui
下的文件发生变更时，重新生成组件库：
bash
python3 .agents/skills/rails-application-ui-blocks/scripts/build_template_catalog.py \
  --root .