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

gluestack-ui-v5:creating-components

Creates React Native components using gluestack-ui v5 with Tailwind v4 semantic tokens and tva variants.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building custom UI components in React Native with gluestack-ui v5 requires knowing the correct component composition patterns, semantic token rules, and variant APIs—mistakes like using prohibited color tokens or skipping sub-components break dark mode and fail code review. ## Core Features & Use Cases - Component Templates: Six ready-to-adapt templates covering simple components, tva-based variants, compound components, form inputs, stateful interactions, and loading states. - Semantic Token Enforcement: Strict rules on allowed tokens (text-foreground, bg-card, border-border) versus prohibited ones (gray-, typography-, numbered colors) to guarantee dark mode compatibility. - Common Recipes: Production patterns for profile cards, status badges, search inputs, and list items with actions. - Use Case: When asked to build a login form, follow the form component template to compose FormControl, Input with InputSlot-wrapped icons, and error handling using only semantic tokens. ## Quick Start Ask the AI to create a new component, such as a profile card or search input, using gluestack-ui v5 components and semantic Tailwind tokens.

Frequently Asked Questions about gluestack-ui-v5:creating-components

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

FAQPage Schema
How do I create a component with variants in gluestack-ui v5?▼

Use the tva function from @gluestack-ui/utils/nativewind-utils to define base styles plus variant and size options with defaultVariants. Apply parentVariants for child components so text styles respond to the parent's variant state.

How to build a form input with validation in gluestack-ui?▼

Wrap Input in FormControl with isInvalid set from your error state, then add FormControlLabel, FormControlError, and FormControlHelper sub-components. Always wrap InputIcon inside InputSlot, and use keyboardType and autoCapitalize props on InputField.

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

Only semantic tokens are allowed: text-foreground, text-muted-foreground, bg-card, bg-background, border-border, and primary/secondary/destructive/accent variants with alpha values. Prohibited tokens include gray-*, neutral-*, typography-*, numbered colors like red-500, and arbitrary hex values.

Why does my gluestack component break in dark mode?▼

Dark mode breaks when components use hardcoded color scales like bg-gray-100 or text-slate-700 instead of semantic tokens. Replace them with semantic equivalents such as bg-muted and text-foreground, which map to theme-aware values.

Can I mix React Native primitives with gluestack-ui components?▼

No, mixing View and Text from react-native with gluestack components is explicitly discouraged. Use gluestack wrappers like Box, Text, and Heading imported from @/components/ui/* to keep styling consistent with the design system.

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
alejandro-technologyalejandro-technology

create-screen

Generate React Native UI screens with view files, route registration, and stack navigator entries.

Community
Intermediate
suhwansuhwan

theme-system

Implement a three-tier token system enabling dark mode in Next.js and Tailwind apps.

Community
Advanced
Alejandro05-afkAlejandro05-afk

expo-mobile-ui

Generate Expo/React Native mobile UI code with NativeWind, Tamagui, or StyleSheet.

Community
Intermediate