React Native Design System
Priority: P1 (HIGH)
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.
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.
References
See references/usage.md for design token usage examples.
Canonical response anchors
When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
