atomic-design-gluestack

What problem does it solve?

This Skill ensures consistent and maintainable UI component architecture by enforcing the Atomic Design methodology, specifically for React Native/Expo projects utilizing Gluestack UI and NativeWind.

Core Features & Use Cases

• Component Classification: Guides the categorization of UI elements into Atoms, Molecules, Organisms, Templates, and Pages.
• Directory Structure Enforcement: Validates correct placement of components within the project.
• Import Dependency Validation: Checks that component dependencies flow in the correct hierarchical direction.
• Use Case: When developing a new feature, use this Skill to ensure all new components are correctly classified, placed in the appropriate directories (e.g., components/atoms/, components/molecules/), and adhere to the established import rules, preventing architectural drift.

Quick Start

Use the atomic-design-gluestack skill to validate the component structure of the 'src/components' directory.