skills.rest
aadilmallick
aadilmallickCOMMUNITY
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.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, theme-aware UI components in React Native with gluestack-ui v5 requires knowing compound component patterns, tva variant management, and strict semantic token rules—mistakes like using prohibited color tokens 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: Explicit allowlist (text-foreground, bg-card, border-border) and blocklist (typography-, gray-, numbered colors, arbitrary values) to guarantee light/dark mode compatibility. - Common Recipes: Pre-built patterns for profile cards, status badges, search inputs, and list items with actions. - Use Case: When building a settings screen for an Expo app, use the form component template to create a validated email input with FormControl error handling and InputSlot-wrapped icons that works in both themes. ## Quick Start Ask the AI to create a new gluestack-ui v5 component, such as a status badge with variants, following the templates and semantic token rules in this skill.

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 and variant options for properties like size and visual style. Specify defaultVariants and pass variant props when calling the generated style function.

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

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

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. Prohibited tokens include typography-*, neutral-*, gray-*, numbered colors like blue-600, arbitrary hex values, and opacity utilities.

Why does my gluestack component break in dark mode?▼

Dark mode breaks when components use hardcoded colors like bg-gray-100 or text-[#3b82f6] instead of semantic tokens. Replace all numbered color scales and arbitrary values with semantic tokens such as bg-card and text-foreground, which swap automatically via the theme.

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

Mixing View and Text from react-native with gluestack components is discouraged because primitives lack theme token support and consistent styling. Use gluestack wrappers like Box, Text, and HStack imported from @/components/ui/* instead.

Related Skills

Explore More Software Engineering Skills→
involvexinvolvex

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind v5 and react-native-css.

Community
Intermediate
TekLabsVNTekLabsVN
1

web-to-mobile

Convert an existing web project into an Expo mobile app with wired authentication.

Official
Advanced
FredoAiFredoAi

chakra-ui-refactor

Reviews and converts UI code to idiomatic Chakra UI v3 components.

Official
Intermediate
Alejandro05-afkAlejandro05-afk

expo-mobile-ui

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

Community
Intermediate