AgentSkillsCN

atomic-audit

针对 React 组件（或组件文件夹）进行原子设计合规性审计，并提出重构建议。当组件体积过大、props 属性激增，或职责边界模糊时，可使用此方法。

SKILL.md
--- frontmatter
name: atomic-audit
description: Audit a React component (or folder) for Atomic Design correctness and refactor recommendations. Use when components are too large, props are exploding, or responsibilities are unclear.
argument-hint: "[path or ComponentName]"
allowed-tools: Read, Grep, Glob
disable-model-invocation: true

Atomic Design Audit (React)

Audit $ARGUMENTS for Atomic Design boundaries.

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.

Output format

  • •Findings (bullet list)
  • •Recommended layer (one line)
  • •Refactor plan (numbered steps)
  • •New structure (tree)
  • •Test plan (checklist)