atomic-design-mobile
OfficialOrganize React Native components efficiently.
Software Engineering#accessibility#atomic design#mobile development#react native#ui architecture#component organization
AuthorMolcajeteAI
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a structured approach to organizing React Native components using the Atomic Design methodology, ensuring consistency, maintainability, and accessibility in mobile application development.
Core Features & Use Cases
- Component Hierarchy: Implements the five levels of Atomic Design (Atoms, Molecules, Organisms, Templates, Screens) tailored for mobile.
- Mobile-Specific Considerations: Integrates best practices for touch targets, accessibility, and platform differences.
- Decision Flowchart: Offers a clear guide for classifying components into the correct atomic level.
- Use Case: When building a new feature in a React Native app, use this skill to determine the best way to structure and name your new UI components, ensuring they are accessible and reusable.
Quick Start
Use the atomic-design-mobile skill to classify a new button component.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 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-mobile Download link: https://github.com/MolcajeteAI/plugin/archive/main.zip#atomic-design-mobile 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.