Skills
.Work. You
Rest

gluestack-ui-v4:styling

Official

Enforce consistent Gluestack v4 styling patterns.

Software Engineering#styling#spacing#dark-mode#semantic-tokens#tva#gluestack-ui#className-merging
Authorgluestack
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a centralized guide for consistent Gluestack UI v4 styling, ensuring semantic tokens, spacing, dark mode, TVA-based variants, and className merging are applied uniformly across components.

Core Features & Use Cases

  • Semantic token guidance: Standardizes token usage (colors, backgrounds, borders) to avoid raw values.
  • ** TVA-based styling**: Demonstrates how to define and apply variants with TVA for scalable theming.
  • Dark mode & CSS variables: Shows best practices for dark mode using CSS variables and data attributes.
  • Spacing & layout patterns: Encourages adherence to a standard spacing scale and layout utilities.
  • ClassName merging best practices: Provides patterns for merging custom classNames without inline styles.
  • Use Case: A UI library team standardizes component themes across an app by following the provided tokens, TVA definitions, and layout examples.

Quick Start

Refer to the styling guide to start applying semantic tokens, TVA variants, and dark mode patterns in your Gluestack UI v4 components.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: gluestack-ui-v4:styling
Download link: https://github.com/gluestack/agent-skills/archive/main.zip#gluestack-ui-v4-styling

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.