How does this skill handle React Native accessibility?

It enforces an 'Accessible by Default' principle, providing guidance on mandatory accessibility props and ensuring a minimum 44x44pt touch target for all interactive elements.

Where should business logic live in this hierarchy?

According to this skill's guidelines, business logic typically resides in Organisms and Screens, while Atoms and Molecules remain stateless or focused on UI state.

Can I use this skill with Expo projects?

Absolutely. The skill includes patterns for Expo Router, safe area context, and other standard libraries frequently used in the Expo ecosystem.

Does this skill help with platform-specific styling?

Yes, it includes best practices for using Platform.OS and Platform.select to handle visual and functional differences between iOS and Android.

What is Atomic Design in the context of mobile development?

Atomic Design is a methodology for building design systems by breaking the UI into five distinct levels: Atoms, Molecules, Organisms, Templates, and Screens, ensuring modularity and reuse.

Atomic Design for React Native

Name: Atomic Design for React Native
Author: IvanTorresEdge

byIvanTorresEdge

Mobile Development

Organizes React Native component architecture using the Atomic Design pattern with a focus on mobile accessibility and platform-specific standards.

Acerca de

This skill provides a comprehensive framework for structuring React Native applications by categorizing components into Atoms, Molecules, Organisms, Templates, and Screens. It prioritizes an 'Accessible by Default' approach, ensuring that every UI element meets mobile-specific requirements like 44pt minimum touch targets, screen reader support, and safe area management. It is particularly useful for developers building scalable design systems who need to maintain consistency across iOS and Android while ensuring high-quality user interactions.

Características Principales

Five-level component hierarchy (Atoms to Screens)
Safe area and keyboard avoidance implementation patterns
0 GitHub stars
Standardized classification checklists for component organization
Mobile-specific accessibility and touch target enforcement
Platform-aware styling for iOS and Android

Casos de Uso

Establishing a scalable design system for a new React Native project
Auditing and improving mobile accessibility across a component library
Refactoring legacy component structures for better maintainability

Acerca de

Características Principales

Five-level component hierarchy (Atoms to Screens)
Safe area and keyboard avoidance implementation patterns
0 GitHub stars
Standardized classification checklists for component organization
Mobile-specific accessibility and touch target enforcement
Platform-aware styling for iOS and Android

Casos de Uso

Establishing a scalable design system for a new React Native project
Auditing and improving mobile accessibility across a component library
Refactoring legacy component structures for better maintainability