Skillshub react-native-dls

Enforce design token usage in React Native. Use when enforcing a design system, preventing hardcoded styles, or implementing theme tokens in React Native. (triggers: **/*Screen.tsx, **/*Component.tsx, **/theme/**, **/styles/**, StyleSheet, styled-components, theme, colors, spacing)

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/HoangNguyen0403/agent-skills-standard/react-native-dls" ~/.claude/skills/comeonoliver-skillshub-react-native-dls && rm -rf "$T"

manifest: skills/HoangNguyen0403/agent-skills-standard/react-native-dls/SKILL.md

source content

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
```
.

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.