skills.rest
jeius
jeiusCOMMUNITY
Explore all skills by this author →
GitHub

gluestack-ui-v4:components

Enforce Gluestack UI v4 component patterns and provider setup in React projects.

1|Updated Mar 25, 2025
Search Tags:#react-native#ui-patterns#component-patterns#provider-setup#gluestack-ui#frontend-design-system#input-slot
One-click install
npx skills add https://github.com/jeius/LactaLink --skill gluestack-ui-v4-components-jeius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gluestack-ui-v4:components
Source: https://github.com/jeius/LactaLink/tree/main/.agents/skills/gluestack-ui-v4/components
Command: npx skills add https://github.com/jeius/LactaLink --skill gluestack-ui-v4-components-jeius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This sub-skill provides structured guidance on using Gluestack UI v4 components, ensuring developers adopt correct patterns, sub-component usage, and provider integration across projects.

Core Features & Use Cases

  • Guidelines for preferring Gluestack components over React Native primitives.
  • Enforcement of the Gluestack compound component pattern and required sub-components (Input with InputSlot, Button with ButtonText, etc.).
  • Clear guidance on provider setup, icon usage, and semantic token rules applicable to UI development.

Quick Start

Integrate Gluestack UI v4 components in your app and begin applying the recommended usage patterns.

Frequently Asked Questions about gluestack-ui-v4:components

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

FAQPage Schema
How do I set up the Gluestack UI provider in a React Native project?▼

To set up the Gluestack UI provider, wrap your React Native application's root component with the GluestackUIProvider to enable correct component composition and integration across your project. This establishes the foundational context required for rendering UI components.

What is the correct compound component pattern for Gluestack UI v4?▼

The correct compound component pattern in Gluestack UI v4 requires using specific sub-components together, such as wrapping InputIcon inside InputSlot and pairing Button with ButtonText. This enforces best-practice component composition and ensures proper UI hierarchy.

Should I use Gluestack UI components or standard React Native primitives?▼

You should prefer Gluestack UI components over standard React Native primitives to maintain design system consistency. Using Gluestack components ensures adherence to semantic token rules and provides structured guidelines for UI development across your project.

How do I handle icons within Gluestack UI v4 input fields?▼

To handle icons within Gluestack UI v4 input fields, wrap the InputIcon component inside an InputSlot sub-component. This enforces the required compound component pattern and ensures correct rendering and alignment within the input structure.

When do I need to apply semantic tokens in a Gluestack UI frontend design system?▼

Apply semantic tokens when implementing Gluestack UI v4 components to ensure consistent styling across your frontend design system. Enforcing semantic token usage maintains visual coherence and proper provider integration across apps.

Related Skills

Explore More Software Engineering Skills→
Eng0AIEng0AI
15

chrome-extension-boilerplate-react-vite

Scaffold Chrome extensions with React, Vite, and TypeScript.

Official
Intermediate
fantay0312fantay0312

ui-design-brain

Generate production-grade UI designs using 60+ documented component patterns.

Community
Advanced
zinohomezinohome
1

page-layout-builder

Generate page layouts and shells for common web application patterns.

Community
Intermediate
danzam98danzam98
1

stripe-level-ui

Create polished UI components in Next.js, React, and Tailwind projects.

Community
Advanced