atomic-design-planning
CommunityBuild reusable UI components efficiently.
Software Engineering#scalability#frontend architecture#design systems#atomic design#ui components#component reuse
Authorjclfocused
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps developers and designers organize UI components using the Atomic Design methodology, promoting consistency, reusability, and a scalable frontend architecture. It guides decisions on when to create new components versus reusing existing ones.
Core Features & Use Cases
- Atomic Design Guidance: Provides a clear hierarchy of Atoms, Molecules, Organisms, Templates, and Pages.
- Reuse-First Principle: Emphasizes searching for and adapting existing components before creating new ones.
- Decision Support: Offers a decision table and anti-pattern avoidance tips for component creation.
- Use Case: When planning a new feature that requires a user profile card, this skill helps determine if existing Button, Avatar, and Text atoms can be combined into a new Molecule or Organism, or if a completely new component is truly necessary.
Quick Start
Use the atomic-design-planning skill to guide the creation of a new user profile card component.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 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-planning Download link: https://github.com/jclfocused/claude-agents/archive/main.zip#atomic-design-planning 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 223,000+ vetted skills library on demand.