# React Native Design System

> Enforce design token usage in React Native. Prevents hardcoded styles, encourages theme and design system consistency.

- Skill: `fierzone/react-native-design-system` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add fierzone/react-native-design-system`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/react-native-design-system/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/fierzone/react-native-design-system

---


# React Native Design System

## **Priority: P1 (OPERATIONAL)**

Enforce design token usage in React Native apps.

## Guidelines

- **Structure**: Define tokens in `theme/colors.ts`, `spacing.ts`, `typography.ts`.
- **Usage**: Import tokens (`colors.primary`) instead of literals (`#000`).
- **Styling**: Compatible with `StyleSheet` and `styled-components`.

[Usage Examples](references/usage.md)

## Anti-Patterns

- **No Inline Colors**: Use `'#FF0000'` → Error. Import from `theme/colors`.
- **No Magic Spacing**: Use `padding: 16` → Error. Use `spacing.md`.
- **No Inline Fonts**: Define `fontSize: 20` → Error. Use `typography.h1`.

## Related Topics

mobile-ux-core | react-native/performance