> 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)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-native-dls?format=md"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
StyleSheetandstyled-components.
Anti-Patterns
- No Inline Colors: Use
'#FF0000'→ Error. Import fromtheme/colors. - No Magic Spacing: Use
padding: 16→ Error. Usespacing.md. - No Inline Fonts: Define
fontSize: 20→ Error. Usetypography.h1.
Related Topics
mobile-ux-core | react-native/performance
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)