Agent-Skills.md

Agent Skills: React Native Design System

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)

UncategorizedID: hoangnguyen0403/agent-skills-standard/react-native-dls

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/react-native/react-native-dls

Skill Files

Browse the full folder contents for react-native-dls.

Download Skill

Loading file tree…

skills/react-native/react-native-dls/SKILL.md

Skill Metadata

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. (triggers: **/*Screen.tsx, **/*Component.tsx, **/theme/**, **/styles/**, 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 for design token usage examples.