atomic-components
CommunityBuild consistent UI with atomic design.
Design & Creative#frontend#react#design-system#ui-components#atomic-design#component-hierarchy#pixel-mart
Authoraboudou-cto-bloko
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Pixel-Mart frontend teams often struggle to maintain a consistent UI across components as the product grows. This skill enforces an Atomic Design approach to shape a scalable, reusable UI system by organizing components into atoms, molecules, organisms, and templates and by guiding integration with the existing shadcn/ui foundations.
Core Features & Use Cases
- Establishes a clear component taxonomy (atoms, molecules, organisms, templates) to keep UI consistent.
- Provides concrete classification rules and examples to aid new contributors.
- Guides frontend work in src/components/ with a scalable folder structure and naming conventions that support future growth in Pixel-Mart.
Quick Start
Start by organizing your UI under src/components/ into atoms, molecules, organisms, and templates.
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-components Download link: https://github.com/aboudou-cto-bloko/pixelmart/archive/main.zip#atomic-components 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.