home / skills / hoangnguyen0403 / agent-skills-standard / react-native-dls

react-native-dls skill

safe

This skill enforces React Native design token usage to ensure consistent theming and avoids hardcoded styles across components.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill react-native-dls

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.1 KB

---
name: React Native Design System
description: Enforce design token usage in React Native. Prevents hardcoded styles, encourages theme and design system consistency.
metadata:
  labels: [react-native, dls, design-tokens, theme, styling]
  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`.

[Usage Examples](references/usage.md)

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

## Related Topics

mobile-ux-core | react-native/performance

Overview

This skill enforces consistent design token usage across React Native projects to prevent hardcoded styles and encourage a centralized theme. It checks for inline colors, magic spacing numbers, and direct font values, steering developers to use tokens defined in theme files. The goal is predictable, themable UI and easier cross-platform maintenance.

How this skill works

The skill inspects source files for style definitions and flags literals like hex colors, numeric spacing values, and direct font sizes. It expects tokens to be referenced from theme modules such as theme/colors.ts, spacing.ts, and typography.ts and supports detection in both StyleSheet and styled-components patterns. Violations are reported with actionable guidance pointing to the proper token import and usage.

When to use it

When starting or enforcing a design system in a React Native app
During code reviews to catch hardcoded UI values
In CI pipelines to prevent regressions that bypass theme tokens
When migrating legacy code toward centralized theming
In teams aiming for consistent cross-platform visuals

Best practices

Define all colors, spacing, and typography tokens in dedicated theme files (theme/colors.ts, spacing.ts, typography.ts).
Always import tokens (e.g., colors.primary, spacing.md, typography.h1) instead of using literals.
Apply tokens consistently across StyleSheet.create and styled-components to keep parity.
Provide descriptive token names (primary, surface, muted, large, small) instead of numeric names.
Document token intent and mapping to platform-specific variants for iOS/Android as needed.

Example use cases

Rejecting an inline color like '#FF0000' and suggesting colors.error from theme/colors.ts.
Catching padding: 16 in a component and recommending spacing.md or spacing.lg.
Replacing fontSize: 20 with typography.h1 to ensure consistent headings across screens.
Running checks in CI to block PRs that introduce magic numbers or inline styles.
Automating migration suggestions for legacy files that use hardcoded styles.

FAQ

Does this skill work with both StyleSheet and styled-components?

Yes. It detects inline literals in StyleSheet objects and styled-components templates, recommending token imports for both patterns.

What token file locations are expected?

By default it looks for theme/colors.ts, spacing.ts, and typography.ts. You can adapt conventions to your project if needed.