react-native-dls

name	react-native-dls
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 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