What is gluestack-ui?

gluestack-ui is a universal component library for React and React Native that provides unstyled, accessible components designed to work seamlessly across web and mobile platforms.

Are the components created by this skill accessible?

Yes, the skill follows gluestack-ui's focus on building accessible interfaces, emphasizing proper prop usage, ARIA-compliant patterns, and semantic sub-component structures.

How are components styled with this skill?

Components are typically styled using NativeWind, which brings Tailwind CSS-like utility classes to both the web and React Native ecosystems for rapid UI development.

Does this skill support both mobile and web development?

Yes, the gluestack-components skill covers platform-specific considerations for both React (web) and React Native (mobile) environments using a single codebase approach.

Can Claude help with the gluestack-ui CLI?

Yes, the skill includes knowledge of the gluestack-ui CLI for initializing projects and adding specific components like buttons, inputs, select menus, and modals.

Gluestack UI Components

Name: Gluestack UI Components
Author: TheBushidoCollective

byTheBushidoCollective

•

デザインツール

Builds accessible, high-performance universal user interfaces using the gluestack-ui component library for React and React Native.

The gluestack-components skill empowers Claude to architect and implement sophisticated user interfaces using gluestack-ui's unstyled, accessible component library. It provides expert guidance on component composition, semantic variants, and platform-specific considerations, ensuring seamless UI consistency across web and mobile platforms while leveraging NativeWind for styling. This skill is ideal for developers building cross-platform applications who need to implement complex UI patterns like modals, forms, and accordions following industry-standard accessibility and performance best practices.

主な機能

01Semantic styling with variants, sizes, and action-based states

02Implementation of 50+ unstyled, accessible universal components

03Integration with NativeWind and Tailwind CSS for rapid styling

0495 GitHub stars

05Cross-platform UI development for React and React Native

06Advanced component composition using sub-component patterns

ユースケース

01Creating complex, accessible forms with FormControl validation

02Implementing interactive overlays like Modals and Toast notifications

03Building a shared design system for consistent web and mobile apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han gluestack-components

For use in Claude.ai and ChatGPT

Download Skill