What is Atomic Design in React Native?

It is a methodology for creating design systems by breaking interfaces down into five levels: atoms, molecules, organisms, templates, and pages, ensuring modularity and reusability.

Does this skill work with any UI library?

This specific skill is tailored for Gluestack UI v3 and NativeWind v4, though the organizational principles can be adapted for other libraries.

How does it handle state management?

It enforces rules where atoms are stateless, molecules handle UI-only state, and pages handle global state and data fetching, keeping the architecture clean.

Where should I store Gluestack components?

Gluestack UI components are treated as foundation atoms and should remain in the components/ui directory, while project-specific atoms go in components/atoms.

How does this benefit AI-assisted development?

It provides Claude Code with specific guardrails and architectural patterns, ensuring the AI generates code that matches your project's folder structure and dependency rules.

Atomic Design for Gluestack UI

Name: Atomic Design for Gluestack UI
Author: CodySwannGT

byCodySwannGT

•

Mobile Development

Enforces the atomic design methodology for organized and scalable React Native/Expo component architectures using Gluestack UI.

This skill streamlines frontend development by implementing Brad Frost's atomic design hierarchy—atoms, molecules, organisms, templates, and pages—within Expo and React Native projects using Gluestack UI v3 and NativeWind. It provides automated governance for component categorization and directory structure, ensuring that UI elements are correctly placed and dependency rules are respected. By using this skill, developers can maintain a clean separation of concerns, where atoms remain stateless and business logic is properly isolated within page components, leading to a more maintainable and robust codebase.

Key Features

01Provides state management guidelines for different component complexities

02Enforces strict directory structures for project-specific atoms and molecules

03Validates import directions to prevent circular and upward dependencies

041 GitHub stars

05Standardizes component categorization into five distinct atomic levels

06Integrates Gluestack UI v3 components as the foundational atom library

Use Cases

01Refactoring monolithic component libraries into an organized atomic structure

02Architecting a new React Native application with a scalable design system

03Enforcing design system consistency across large development teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add codyswanngt/lisa atomic-design-gluestack

For use in Claude.ai and ChatGPT

Key Features

01Provides state management guidelines for different component complexities

02Enforces strict directory structures for project-specific atoms and molecules

03Validates import directions to prevent circular and upward dependencies

041 GitHub stars

05Standardizes component categorization into five distinct atomic levels

06Integrates Gluestack UI v3 components as the foundational atom library

Use Cases

01Refactoring monolithic component libraries into an organized atomic structure

02Architecting a new React Native application with a scalable design system

03Enforcing design system consistency across large development teams