skills.rest
homeslands
homeslandsCOMMUNITY
Explore all skills by this author →
GitHub

design-tokens

Provides design tokens and styling rules for React Native components using NativeWind.

Updated Aug 19, 2026
Search Tags:#theming#styling#design tokens#tailwind#dark mode#react native#nativewind
One-click install
npx skills add https://github.com/homeslands/trend-ui --skill design-tokens-homeslands
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/homeslands/trend-ui/tree/main/app/order-ui/src/.claude/skills/design-tokens
Command: npx skills add https://github.com/homeslands/trend-ui --skill design-tokens-homeslands

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling React Native components consistently across light and dark modes is error-prone when developers hard-code colors, spacing, or shadows. This Skill centralizes the project's design tokens so every UI element follows the same theme system. ## Core Features & Use Cases - Color Token Reference: Maps semantic colors (primary, destructive, success, warning) and theme variables to NativeWind utility classes with light/dark values. - Typography & Spacing Standards: Defines BeVietnamPro font weights, text size classes, padding/margin scales, and border radius tokens. - Cross-Platform Shadow Guidance: Documents the iOS-only limitation of NativeWind shadow classes and the Android elevation equivalents. - Use Case: When building a new button component, reference this Skill to apply bg-primary px-4 py-3 rounded-lg with proper dark mode variants instead of hard-coding hex values. ## Quick Start Use the design-tokens skill to style this new card component with the correct theme colors, spacing, and dark mode support.

Frequently Asked Questions about design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use design tokens in React Native with NativeWind?▼

Apply Tailwind utility classes like bg-primary, text-foreground, or border-border that map to CSS variables defined in global.css. For non-Tailwind contexts such as ActivityIndicator, import the colors object from the constants module.

How to add dark mode support to React Native components?▼

Use NativeWind dark variant classes such as bg-white dark:bg-gray-900 or semantic tokens like bg-card and text-foreground that automatically switch values. Avoid hard-coded colors like text-black which break theme switching.

Why are NativeWind shadow classes not visible on Android?▼

NativeWind shadow-* classes only render on iOS. For Android, add an elevation value via inline style, for example style={{ elevation: 4 }} alongside shadow-md, to achieve the equivalent visual depth.

What font weights does BeVietnamPro support in this project?▼

BeVietnamPro is configured with four weights: Regular 400 via font-sans, Medium 500 via font-sans-medium, SemiBold 600 via font-sans-semibold, and Bold 700 via font-sans-bold. Weight utilities like font-semibold also work.

When should I use semantic colors instead of Tailwind palette colors?▼

Use semantic tokens like bg-destructive or text-muted-foreground whenever a color carries meaning, since they adapt to light and dark themes. Reserve palette colors like bg-green-50 for status indicators with explicit dark variants.

Related Skills

Explore More Software Engineering Skills→
softwarebyzesoftwarebyze

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 for Expo projects.

Community
Intermediate
IgniteUIIgniteUI
169

update-component-styles

Update component styles across themes using the SCSS to Lit CSS workflow.

Official
Intermediate
idy-00idy-00

design-qa

Set up design QA gates covering token lint, accessibility, contrast, and visual regression testing.

Community
Advanced
TMHSDigitalTMHSDigital
2

mobile-component-patterns

Generate typed React Native components with StyleSheet or NativeWind and testing scaffolds.

Community
Intermediate