What is the gluestack-nativewind skill?

It is a specialized governance tool for Claude Code that ensures all UI components follow Gluestack v3 and NativeWind v4 styling rules for better maintainability and performance.

Does this skill allow standard React Native primitives?

No, the skill actively discourages primitives like View and Text in favor of Gluestack's Box and Text components to ensure proper theming and accessibility.

How does it handle dark mode?

It enforces the use of CSS variables with the 'dark:' prefix to ensure seamless and performant theme switching within the NativeWind environment.

Why use this over standard Tailwind CSS?

This skill specifically promotes semantic tokens and component-based patterns optimized for mobile performance, accessibility, and cross-platform consistency in React Native.

Gluestack & NativeWind Design Patterns

Name: Gluestack & NativeWind Design Patterns
Author: CodySwannGT

byCodySwannGT

•

デザインツール

Enforces standardized Gluestack UI v3 and NativeWind v4 styling patterns for consistent mobile and web interfaces.

This skill optimizes Claude's ability to build and maintain user interfaces by enforcing strict adherence to Gluestack UI v3 components and NativeWind v4 styling. It prevents the use of raw React Native primitives, replaces hardcoded values with semantic design tokens, and ensures layouts follow a consistent spacing scale. By eliminating inline styles and promoting reusable variant patterns via TVA (Tailwind Variant Authority), it helps developers build performant, dark-mode-ready, and highly maintainable design systems within the Expo and React Native ecosystems.

主な機能

01Enforcement of semantic color tokens over arbitrary hex codes or raw Tailwind colors

021 GitHub stars

03Implementation of dark mode support using CSS variables and NativeWind prefixes

04Integration with TVA for creating scalable, variant-based component styling

05Automatic conversion of React Native primitives to themed Gluestack UI components

06Standardization of layouts using a predefined spacing scale to reduce design debt

ユースケース

01Refactoring legacy React Native codebases to use modern Gluestack UI and NativeWind patterns

02Ensuring style consistency across large team projects by validating against a strict design system

03Rapidly building accessible, themed mobile interfaces using standardized sub-component patterns

主な機能

01Enforcement of semantic color tokens over arbitrary hex codes or raw Tailwind colors

021 GitHub stars

03Implementation of dark mode support using CSS variables and NativeWind prefixes

04Integration with TVA for creating scalable, variant-based component styling

05Automatic conversion of React Native primitives to themed Gluestack UI components

06Standardization of layouts using a predefined spacing scale to reduce design debt

ユースケース

01Refactoring legacy React Native codebases to use modern Gluestack UI and NativeWind patterns

02Ensuring style consistency across large team projects by validating against a strict design system

03Rapidly building accessible, themed mobile interfaces using standardized sub-component patterns