Enforce design token usage in React Native. Use when enforcing a design system, preventing hardcoded styles, or implementing theme tokens in React Native.
---
name: react-native-dls-794206e9811b
description: Enforce design token usage in React Native. Use when enforcing a design system, preventing hardcoded styles, or implementing theme tokens in React Native.
metadata:
triggers:
files:
- '**/*Screen.tsx'
- '**/*Component.tsx'
- '**/theme/**'
- '**/styles/**'
keywords:
- StyleSheet
- styled-components
- theme
- colors
- spacing
---
# 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](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:
- Define
- theme tokens
- Additional task-grounded exact anchors: Enforce; Reference---
name: react-native-dls-794206e9811b
description: Enforce design token usage in React Native. Use when enforcing a design system, preventing hardcoded styles, or implementing theme tokens in React Native.
metadata:
triggers:
files:
- '**/*Screen.tsx'
- '**/*Component.tsx'
- '**/theme/**'
- '**/styles/**'
keywords:
- StyleSheet
- styled-components
- theme
- colors
- spacing
---
# 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](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:
- Define
- theme tokens
- Additional task-grounded exact anchors: Enforce; ReferenceImported from the listed AgentSkill.sh category. Complete supplied package files and notices are retained. Required external tools and credentials are not installed. No bundled code was executed during import. Individual agent task behavior has not been tested.