Back to Details

atomic-audit

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Atomic Design Audit (React)

Atomic Design 检查（React）

Audit 
$ARGUMENTS
for Atomic Design boundaries.
检查
$ARGUMENTS
是否符合Atomic Design的边界规范。

What to do

执行步骤

  1. Identify the component’s current layer (atom/molecule/organism/template/page) and justify.
  2. Flag boundary violations:
    • Atom doing fetching/business logic
    • Molecule importing routing
    • Organism hard-coding domain decisions
    • Template binding to real data
    • Page containing large presentational trees
  3. Propose a refactor plan:
    • New component split list with target layers
    • Suggested props contracts (data in, events out)
    • Files to create/move and exports to update
  4. Provide a minimal diff-style summary of changes (high level, not full patch) and a test plan.
  1. 确定组件当前所属的层级（atom/molecule/organism/template/page）并说明理由。
  2. 标记边界违规情况：
    • Atom 执行数据获取/业务逻辑
    • Molecule 引入路由
    • Organism 硬编码领域决策
    • Template 绑定真实数据
    • Page 包含大型展示树结构
  3. 提出重构方案：
    • 带有目标层级的新组件拆分清单
    • 建议的props契约（数据输入，事件输出）
    • 需要创建/移动的文件以及待更新的导出项
  4. 提供简化的差异式变更摘要（高层级，非完整补丁）和测试方案。

Output format

输出格式

  • Findings (bullet list)
  • Recommended layer (one line)
  • Refactor plan (numbered steps)
  • New structure (tree)
  • Test plan (checklist)
  • 检查结果（项目符号列表）
  • 建议层级（单行）
  • 重构方案（编号步骤）
  • 新结构（树形图）
  • 测试方案（检查清单）