Can I use this for both React and React Native projects?

Absolutely. This skill covers the unified theming system used by gluestack-ui to ensure consistent styling across both web and mobile platforms.

How does it handle dark mode implementation?

It provides best practices for both system-based automatic dark mode and manual theme toggles using React context and local storage.

Is this compatible with Expo?

Yes, the skill includes configuration examples specifically optimized for Expo, including platform-specific styling for iOS and Android.

Does this skill support NativeWind configuration?

Yes, it provides full configuration and styling guidance for NativeWind (Tailwind CSS for React Native) within the gluestack-ui ecosystem.

Does it help with custom brand colors?

Yes, it includes patterns for extending the base gluestack-ui theme with custom semantic color palettes and brand-specific tokens.

Gluestack UI Theming

Name: Gluestack UI Theming
Author: TheBushidoCollective

byTheBushidoCollective

•

デザインツール

Customizes gluestack-ui themes and design tokens using NativeWind for consistent React and React Native styling.

概要

This skill provides deep expertise in the gluestack-ui theming system, enabling developers to build scalable and maintainable user interfaces across web and mobile platforms. It covers the complete design workflow, from initial GluestackUIProvider setup and NativeWind configuration to advanced design token implementation and platform-specific styling. By emphasizing semantic tokens and professional implementation patterns, it helps developers create robust design systems that support dark mode, custom brand palettes, and high-performance styling in Expo and React Native environments.

主な機能

Reusable style utility patterns using clsx and tailwind-merge
Advanced dark mode implementation with automatic and manual toggle patterns
Comprehensive design token management for colors, typography, and spacing
72 GitHub stars
Seamless NativeWind and Tailwind CSS integration for cross-platform styling
Expert guidance on extending base themes without overriding core functionality

ユースケース

Implementing a persistent dark mode system in an Expo or React Native app
Building a custom brand design system on top of gluestack-ui components
Refactoring hardcoded styles into a centralized, semantic token system

概要

主な機能

Reusable style utility patterns using clsx and tailwind-merge
Advanced dark mode implementation with automatic and manual toggle patterns
Comprehensive design token management for colors, typography, and spacing
72 GitHub stars
Seamless NativeWind and Tailwind CSS integration for cross-platform styling
Expert guidance on extending base themes without overriding core functionality

ユースケース

Implementing a persistent dark mode system in an Expo or React Native app
Building a custom brand design system on top of gluestack-ui components
Refactoring hardcoded styles into a centralized, semantic token system