React Native Dls

Name: React Native Dls
Author: HoangNguyen0403

ASecurity

Enforce design token usage in React Native. Use when enforcing a design system, preventing hardcoded styles, or implementing theme tokens in React Native.

549 stars
0 votes
0 copies
3 views
Added June 6, 2026

developmentreact

Security analysis

A100/100

Pro scans all 3 files and shows the line behind each finding

Scanned June 6, 2026

npx -y skills add HoangNguyen0403/agent-skills-standard --skill react-native-dls --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of React Native Dls?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for React Native Dls

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/hoangnguyen0403-react-native-dls/badge)](https://www.skillsdirectory.com/skills/hoangnguyen0403-react-native-dls)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
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 (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](references/usage.md) for design token usage examples.