Skills
.Work. You
Rest

rn-styling

Community

Style RN apps with BrandColors and NativeWind.

Software Engineering#theming#react-native#responsive-design#NativeWind#ui-patterns#BrandColors
AuthorCJHarmath
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the challenge of maintaining visual consistency across React Native apps by combining semantic BrandColors with flexible NativeWind utilities, providing a design-system-driven approach to styling.

Core Features & Use Cases

  • Centralized theming with BrandColors for quick, consistent color application across RN components.
  • NativeWind-based layout and spacing patterns that enforce design rules while preserving React Native semantics.
  • Platform-aware styling patterns (iOS/Android) and responsive breakpoints for Expo-based apps.

Quick Start

  1. Define a BrandColors.ts with semantic tokens (primary, background, surface, text).
  2. Install and configure NativeWind in your RN project and ensure your design system provider is in place.
  3. Start styling screens by applying NativeWind classes and referencing BrandColors values in inline styles for text and backgrounds.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: rn-styling
Download link: https://github.com/CJHarmath/claude-agents-skills/archive/main.zip#rn-styling

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.