Can I see how components are composed before using them?

Yes, the get_component_demo tool provides access to Storybook examples showing real-world usage patterns and component composition.

What is the primary purpose of the gluestack-ui MCP tools?

They provide a bridge for Claude to browse the gluestack-ui repository, allowing it to fetch source code, metadata, and usage examples for UI components directly into your workspace.

Which styling variants can I retrieve with this skill?

You can access three specific variants: NativeWind (Tailwind-based), Themed (token-based), and Unstyled (base functionality without styles).

Does this skill work with React Native?

Yes, gluestack-ui is designed for high-performance React and React Native applications, and these tools provide code optimized for those environments.

How do I avoid GitHub API rate limits when using this skill?

You can configure a GITHUB_TOKEN in your environment variables or point to a local clone of the gluestack-ui repository using the GLUESTACK_PATH variable.

Gluestack UI Component Explorer

Name: Gluestack UI Component Explorer
Author: TheBushidoCollective

byTheBushidoCollective

•

デザインツール

Explores and retrieves gluestack-ui component source code, variants, and documentation using specialized MCP tools.

概要

This skill provides an expert interface for the gluestack-ui Model Context Protocol (MCP) server, allowing Claude to seamlessly browse and integrate the gluestack-ui library into your projects. It enables the discovery of over 70 components, comparison of styling variants like NativeWind, Themed, and Unstyled, and direct retrieval of production-ready source code. By accessing Storybook demos and TypeScript metadata through these tools, developers can understand complex composition patterns and API requirements without leaving their coding environment, significantly accelerating frontend development workflows.

主な機能

Discover 70+ gluestack-ui components with detailed descriptions
Compare and retrieve NativeWind, Themed, and Unstyled component variants
Access full source code for direct implementation into local projects
Analyze Storybook demos for usage patterns and composition examples
Extract TypeScript props, peer dependencies, and technical metadata
66 GitHub stars

ユースケース

Rapidly scaffolding UI components in React Native or Web projects
Auditing component APIs and TypeScript interfaces for complex integrations
Browsing available design system components and their interactive states

概要

主な機能

Discover 70+ gluestack-ui components with detailed descriptions
Compare and retrieve NativeWind, Themed, and Unstyled component variants
Access full source code for direct implementation into local projects
Analyze Storybook demos for usage patterns and composition examples
Extract TypeScript props, peer dependencies, and technical metadata
66 GitHub stars

ユースケース

Rapidly scaffolding UI components in React Native or Web projects
Auditing component APIs and TypeScript interfaces for complex integrations
Browsing available design system components and their interactive states