skills.rest
sombek
sombekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gluestack-ui-v5

Enforces opinionated styling patterns for gluestack-ui v5 with Tailwind CSS v4 and NativeWind v5.

Updated Sep 6, 2026
Search Tags:#design system#react native#expo#nativewind#gluestack-ui#component styling#tailwind css v4
One-click install
npx skills add https://github.com/sombek/fitness-guidance-app --skill gluestack-ui-v5-sombek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gluestack-ui-v5
Source: https://github.com/sombek/fitness-guidance-app/tree/main/mobile/.agents/skills/gluestack-ui-v5
Command: npx skills add https://github.com/sombek/fitness-guidance-app --skill gluestack-ui-v5-sombek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @gluestack-ui/core, @gluestack-ui/utils, nativewind, react-native-css, uniwind, tailwindcss.

What problem does it solve? Building React Native interfaces with gluestack-ui v5 involves many styling decisions across Tailwind CSS v4, NativeWind v5, and UniWind, and inconsistent token usage or wrong component patterns break dark mode and theming. This Skill constrains the solution space to canonical patterns so components stay consistent, themeable, and cross-platform. ## Core Features & Use Cases - Opinionated styling rules: Enforces semantic color tokens only, component props over className utilities, spacing scale adherence, and compound component patterns such as InputIcon inside InputSlot. - Specialized sub-skills: Coordinates focused guides for setup and CLI installation, component creation templates, component usage, styling and theming, custom variants with tva, performance, and validation checklists. - Use Case: When creating a new profile card in an Expo app, the Skill directs you to use Gluestack Box, Heading, and Text components with semantic tokens like bg-card and text-muted-foreground, then validates the result against its anti-pattern checklist. ## Quick Start Ask the assistant to create a new gluestack-ui v5 component or review existing component styles following the semantic token and compound component rules.

Frequently Asked Questions about gluestack-ui-v5

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

FAQPage Schema
How do I set up gluestack-ui v5 in an Expo project?▼

Run npx gluestack-ui@latest init from your project root, then add components with npx gluestack-ui@latest add --all. v5 uses Tailwind CSS v4 with a CSS-first global.css file instead of tailwind.config.js, and supports NativeWind v5 or UniWind as the styling engine.

NativeWind v5 vs UniWind for gluestack-ui v5?▼

NativeWind v5 supports Expo and React Native CLI but requires PostCSS and a pinned lightningcss 1.30.1. UniWind works on Expo only, skips PostCSS entirely, and uses Uniwind.setTheme() for theme switching instead of Appearance.setColorScheme().

How do I create custom variants for gluestack-ui components?▼

Use the tva function from @gluestack-ui/utils/nativewind-utils to define base styles, variant dimensions, defaultVariants, and compoundVariants. All variant colors must use semantic tokens like bg-primary/10 and text-destructive, never numbered colors like red-500.

Does gluestack-ui v5 support Next.js or web projects?▼

Next.js support is pending NativeWind v5 web support, so the documentation recommends gluestack-ui v4 for Next.js projects. v5 currently targets Expo and React Native CLI with NativeWind v5, or Expo only with UniWind.

Why is my InputIcon not rendering correctly in gluestack-ui?▼

InputIcon must always be wrapped inside an InputSlot component, whether placed on the left or right side of the input. Using InputIcon directly as a child of Input breaks positioning, styling, and interaction handling.

Which color tokens are allowed in gluestack-ui v5 styling?▼

Only semantic tokens are allowed, such as text-foreground, text-muted-foreground, bg-card, bg-primary, and border-border, optionally with alpha values like /70. Generic tokens like typography-*, neutral-*, gray-*, and numbered colors like blue-600 are prohibited because they break dark mode.

Related Skills

Explore More Software Engineering Skills→
aadilmallickaadilmallick

gluestack-ui-v5:setup

Installs and configures gluestack-ui v5 with NativeWind v5 or UniWind on Tailwind CSS v4.

Community
Intermediate
SajinthanSajinthan

screen

Generate Expo Router screens, route groups, and layouts for React Native apps.

Community
Advanced
okatech-orgokatech-org

ui-visual-validator

Automate visual validation of UI changes against design systems and accessibility criteria.

Community
Advanced
sbsbhongsbsbhong

gluestack-ui-v4:styling

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

Community
Intermediate