atomic-audit

Original：🇺🇸 English

Translated

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.

1installs

Sourceandireuter/skills-webapp

Added on2026-03-15

NPX Install

npx skill4agent add andireuter/skills-webapp atomic-audit

SKILL.md Content

View Translation Comparison →

Atomic Design Audit (React)

Audit

$ARGUMENTS

for Atomic Design boundaries.

What to do

Identify the component’s current layer (atom/molecule/organism/template/page) and justify.
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
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
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)