Atomic Design Planning

About

This skill optimizes UI development workflows by applying Atomic Design principles to component planning and architecture. It provides a structured hierarchy—ranging from indivisible atoms to complex organisms—to help developers decide when to reuse existing components and how to categorize new ones. By integrating with planning workflows, it ensures that feature implementation starts with a reuse-first mindset, reducing code duplication and maintaining design system consistency across frontend projects.

Key Features

• Integrates with Jira workflows by suggesting subtask structures for UI implementation
• Provides a structured component hierarchy from Atoms to Pages
• Enforces a reuse-first principle to minimize redundant code
• Guides decision-making for creating versus extending existing UI elements
• Facilitates UI feature planning through standardized component categorization
• 1 GitHub stars

Use Cases

• Scaling a design system while maintaining an organized frontend architecture
• Planning new UI features and determining specific component requirements
• Evaluating whether a proposed UI element should be a new component or an extension