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

gluestack-ui-v5:styling

Enforces semantic token styling patterns for gluestack-ui v5 React Native components.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling gluestack-ui v5 components with raw Tailwind colors, inline styles, or generic tokens breaks dark mode, violates the design system, and creates maintenance debt. This Skill enforces the correct v5 styling conventions so components stay theme-consistent. ## Core Features & Use Cases - Semantic Token Enforcement: Mandates tokens like text-foreground, bg-primary, and border-border while prohibiting typography-*, neutral-*, gray-*, numbered colors, and inline hex values. - Dark Mode & Variants: Covers NativeWind v5 and UniWind dark mode patterns, data-attribute state styling, and variant management with tva including parent variants and className merging. - Spacing & Layout Rules: Restricts spacing to the standard scale and prefers component props like space over arbitrary className values. - Use Case: When building a card component in a React Native app, use this Skill to style it with bg-card, text-card-foreground, and border-border so it adapts automatically to light and dark themes. ## Quick Start Style my gluestack-ui v5 card component using semantic tokens with dark mode support and tva variants.

Frequently Asked Questions about gluestack-ui-v5:styling

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

FAQPage Schema
How do I use semantic color tokens in gluestack-ui v5?▼

Use semantic tokens like text-foreground, bg-background, bg-primary, and border-border instead of raw Tailwind colors. In v5 these tokens are CSS custom properties defined in global.css via @layer theme and mapped to utilities through @theme inline.

How to implement dark mode with NativeWind v5 and UniWind?▼

Both engines use the same semantic token names mapped through @theme inline, so className code stays identical. NativeWind v5 uses prefers-color-scheme media queries with Appearance.setColorScheme, while UniWind uses .dark/.light class selectors with Uniwind.setTheme.

Why are typography and neutral tokens prohibited in gluestack-ui v5?▼

Generic tokens like typography-900 or neutral-100 are not semantic, so they break in dark mode and fail to express design intent. Replace them with text-foreground, text-muted-foreground, bg-muted, and border-border for theme consistency.

How do I create component variants with tva in gluestack-ui?▼

Import tva from @gluestack-ui/utils/nativewind-utils and define base classes plus a variants object for options like variant and size. Use defaultVariants for fallbacks, parentVariants for child components, and the class parameter to merge external className overrides.

When are inline styles acceptable in gluestack-ui v5?▼

Inline styles are acceptable only for dynamic runtime values like animation values or safe area insets, third-party components without className support, and Platform.select overrides. Everything else should use component props, className utilities, or tva variants.

Related Skills

Explore More Software Engineering Skills→
aadilmallickaadilmallick

gluestack-ui-v5:styling

Enforces semantic token styling patterns for gluestack-ui v5 with Tailwind v4.

Community
Intermediate
IgniteUIIgniteUI
169

update-component-styles

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

Official
Intermediate
EIS-ITSEIS-ITS

Frontend Accessibility

Identify and fix accessibility issues in frontend interfaces using semantic HTML, ARIA, and keyboard navigation.

Official
Intermediate
AIBiz-AutomatyzacjeAIBiz-Automatyzacje
16

expo-tailwind-setup

Configures Tailwind CSS v4 with NativeWind v5 and react-native-css for universal Expo styling.

Community
Intermediate