Global Atomic Design

Atomic design breaks UI into five hierarchical levels: atoms (basic elements like buttons), molecules (simple component groups), organisms (complex sections), templates (page layouts), and pages (full screens). This Skill guides Claude to apply these levels consistently, ensuring reusable, scalable components that fit your design system and maintain consistency across your frontend codebase.

Yes. This Skill enforces global atomic design standards across projects by validating component naming conventions, folder structures, and cross-file consistency. It integrates with repository tooling to catch deviations from your documented atomic design guidelines during code generation and refactoring.

This Skill instructs Claude to decompose your existing UI into atomic building blocks—starting with atoms, composing them into molecules, then organisms—while applying standardized naming and folder structures. Repository-wide validation ensures the refactored components comply with your design system before deployment.

Atomic design eliminates fragmented UI by establishing a single source of truth for components at each level. This Skill enforces that standard, so Claude generates reusable, composable elements that fit seamlessly into your design system, reducing rework and accelerating development across teams and projects.

Yes. This Skill requires documented atomic design guidelines defining atoms, molecules, organisms, templates, and pages specific to your project. It validates component usage against those guidelines, so having clear design standards in place ensures effective enforcement and consistency.

Yes. This Skill applies global atomic design standards and repository-wide design validation across projects. It enforces naming conventions and folder structures consistently, integrating with your repository tooling to ensure component composition and cross-file consistency span multiple codebases.