rn-compo-style

What problem does it solve?

React Native component styles often become inconsistent and hard to maintain due to scattered inline style objects, ambiguous style naming that breaks when designs change, and unhandled iOS/Android platform-specific style differences, leading to visual bugs and slow development iteration.

Core Features & Use Cases

• Standardized Style Organization: Enforces best practices for StyleSheet.create usage, moving stable styles out of JSX to improve readability, performance, and reduce unnecessary object recreation on re-renders.
• Dynamic & Platform Style Handling: Provides clear guidance for conditional style arrays, platform-specific style branches (e.g., iOS shadows vs Android elevation), and safe usage of experimental style properties with proper fallbacks.
• Anti-Pattern Elimination: Identifies and fixes common bad practices including large inline style objects, value-tied style names (e.g., blueText), and incorrect Web CSS porting that does not work in React Native. Use case: For a legacy React Native component with 20+ inline style props and inconsistent shadow behavior across platforms, this skill restructures all styles into named StyleSheet entries, adds explicit platform-specific shadow logic, and renames ambiguous styles to match design system terminology.

Quick Start

Instruct the AI to refactor all inline styles in your React Native ProductCard component into maintainable StyleSheet.create entries, resolve iOS/Android platform style differences, and rename value-based style names to semantic role-based terms.