skills.rest
infinite-loop-factory
infinite-loop-factoryOFFICIAL
Explore all skills by this author →
GitHub

gluestack-nativewind

Enforce Gluestack UI v3 and NativeWind v4 styling patterns in React Native components.

Updated Aug 23, 2026
Search Tags:#theming#tokens#react-native#design-system#ui-styling#nativewind#gluestack
One-click install
npx skills add https://github.com/infinite-loop-factory/app-factory --skill gluestack-nativewind
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gluestack-nativewind
Source: https://github.com/infinite-loop-factory/app-factory/tree/main/.agents/skills/gluestack-nativewind
Command: npx skills add https://github.com/infinite-loop-factory/app-factory --skill gluestack-nativewind

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enforces the Gluestack UI v3 design patterns and NativeWind v4 tokens to reduce styling drift, improve consistency, and speed up component development.

Core Features & Use Cases

  • Enforces Gluestack components over RN primitives to standardize theming and accessibility.
  • Promotes semantic color tokens and a spacing scale to ensure predictable visuals and performance.
  • Guides review and refactor work to align with the design system, including dark mode support and token usage.

Quick Start

Use the gluestack-nativewind skill to audit a component's styling against the design-system tokens and generate a compliant styling snippet.

Frequently Asked Questions about gluestack-nativewind

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

FAQPage Schema
How do I enforce consistent React Native component styling using a design system?▼

Enforce consistent React Native styling by applying Gluestack UI v3 components and NativeWind v4 tokens. This approach replaces standard RN primitives to reduce styling drift, standardize theming, and ensure predictable visuals across component creation and refactoring.

How do I refactor React Native components to use semantic color tokens and spacing scales?▼

Refactor React Native components by auditing existing styles and replacing hardcoded values with NativeWind v4 semantic color tokens and spacing scales. This ensures predictable visuals, improves dark mode support, and aligns components with the Gluestack design system.

Does Gluestack UI v3 work with NativeWind v4 for React Native theming?▼

Yes, Gluestack UI v3 works with NativeWind v4 to standardize React Native theming. The integration enforces className usage and semantic tokens over inline styles, ensuring accessibility and consistent visual output across new and existing screens.

What is the best way to standardize theming and reduce styling drift in React Native?▼

The best way to reduce styling drift is adopting a design system using Gluestack UI v3 and NativeWind v4. This standardizes theming by enforcing semantic color tokens, spacing scales, and className usage during component creation and code reviews.

Why should I use Gluestack components over React Native primitives for UI styling?▼

Use Gluestack components over React Native primitives to standardize theming and accessibility. This ensures components adhere to semantic color tokens and spacing scales, reducing visual inconsistencies and improving dark mode support.

Can I audit existing React Native screens against design system tokens?▼

Yes, you can audit existing React Native screens against design system tokens. The skill guides review and refactor tasks to align components with Gluestack UI v3 patterns, checking for proper semantic token usage and className compliance.

Related Skills

Explore More Design & Creative Skills→
CodySwannGTCodySwannGT
3

gluestack-nativewind

Enforce Gluestack UI v3 and NativeWind v4 styling patterns in React Native.

Community
Intermediate
jeiusjeius
1

gluestack-ui-v4:styling

Automate consistent UI styling with Gluestack UI v4 semantic tokens.

Community
Advanced
sbsbhongsbsbhong

gluestack-ui-v4:styling

Automate Gluestack v4 component styling with semantic tokens and dark mode.

Community
Intermediate
sbsbhongsbsbhong

gluestack-ui-v4:variants

Automate custom UI variant creation for Gluestack v4 components.

Community
Intermediate