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.

主な機能

01Discover 70+ gluestack-ui components with detailed descriptions

02Compare and retrieve NativeWind, Themed, and Unstyled component variants

03Access full source code for direct implementation into local projects

04Analyze Storybook demos for usage patterns and composition examples

05Extract TypeScript props, peer dependencies, and technical metadata

0666 GitHub stars

ユースケース

01Rapidly scaffolding UI components in React Native or Web projects

02Auditing component APIs and TypeScript interfaces for complex integrations

03Browsing available design system components and their interactive states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han gluestack-mcp-tools

For use in Claude.ai and ChatGPT

Download Skill