Overview

The Atomic Design Audit inspects a React component (or folder) to enforce Atomic Design boundaries. It identifies the component’s current layer, flags boundary violations, and proposes a concrete refactor plan with new splits, prop contracts, and a minimal diff-style summary plus a test plan.

How This Skill Works

The audit analyzes the component’s structure and imports to determine its current Atomic layer (atom, molecule, organism, template, page), detects boundary violations, and outputs a refactor plan that includes target splits, prop contracts, file moves/exports, a high-level diff summary, and a test plan.

When to Use It

• When a component is too large or monolithic and hard to maintain
• When props are exploding across components, creating a maintenance burden
• When responsibilities are unclear or cross-layer responsibilities exist
• When boundary violations are detected (atoms performing fetches, molecules importing routing, organisms hard-coding domain decisions, templates bound to real data)
• When planning a refactor with a target Atomic layer map and a minimal diff-style change plan

Quick Start

1. Step 1: Run the audit against a path or ComponentName (argument-hint).
2. Step 2: Identify the current Atomic layer and record boundary violations (e.g., data fetching in atoms).
3. Step 3: Produce a refactor plan with new component splits, prop contracts, a minimal diff-style summary, and a test plan.

Best Practices

• Identify and justify the current Atomic layer before proposing changes
• Flag and document every boundary violation with concrete examples
• Propose clear refactor steps: new component splits, target layers, and prop contracts
• Provide a minimal diff-style summary of changes and a concrete test plan
• Specify files to create/move and exports to update to maintain clean boundaries

Example Use Cases

• Audit a large Header component that mixes layout with data fetching and split into atoms and molecules
• Refactor a Dashboard organism that contains routing decisions into separate layers
• Break down a Form component with exploding props into smaller atoms and molecules with clear contracts
• Split a List component binding to live data in a template, replacing with data-in, events-out contracts
• Audit a user profile page where the Page contains extensive presentational trees and separate into template and page layers

Frequently Asked Questions