atomic-design-pattern
CommunityEnforce atomic UI design for scalable components.
Design & Creative#react#design-system#ui-components#atomic-design#component-hierarchy#atoms-molecules-organisms
Authorngmthaq
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Organizing a growing UI codebase becomes hard without a clear design system. Atomic Design provides a structured hierarchy (Atoms, Molecules, Organisms, Templates, and Pages) to ensure consistency and reusability across components.
Core Features & Use Cases
- Enforces five-level component hierarchy: Atoms, Molecules, Organisms, Templates, and Pages, to promote reuse and consistency.
- Helps teams scale UI systems by decoupling concerns and clarifying responsibilities at each level.
- Useful for design handoff, documentation, and onboarding new engineers or designers to a shared design language.
Quick Start
Organize your UI triplets into five levels and apply the Atomic Design pattern in your component library across React, Vue, Angular, or Flutter.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: atomic-design-pattern Download link: https://github.com/ngmthaq/my-copilot/archive/main.zip#atomic-design-pattern Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.