Gluestack Ui V4
Automates UI testing and validation of gluestack-ui v4 components across various browsers and devices.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add gluestack-ui-v4 npx -- -y @trustedskills/gluestack-ui-v4
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"gluestack-ui-v4": {
"command": "npx",
"args": [
"-y",
"@trustedskills/gluestack-ui-v4"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill automates UI testing and validation of gluestack-ui v4 components, enforcing opinionated styling patterns to reduce decision fatigue, improve performance, enable consistent theming, and limit design choices to canonical patterns. It guides users in creating, reviewing, refactoring, and theming components while adhering to Gluestack's core principles which prioritize semantic tokens and component copying over external dependencies. The skill is organized into sub-skills for efficient token usage.
When to use it
- Creating new components with styling.
- Reviewing existing component styles to ensure adherence to the design system.
- Refactoring styles to follow Gluestack's guidelines.
- Adding dark mode support to components.
- Copying components from gluestack-ui into your project.
Key capabilities
- Enforces opinionated styling patterns for gluestack-ui v4.
- Prioritizes Gluestack components over React Native primitives.
- Promotes the use of component props over className utilities and semantic tokens over generic or numbered color values.
- Provides ready-to-use templates (simple, variants, compound, form, interactive, loading).
- Offers common component recipes (profile cards, badges, search, lists).
- Includes a best practices checklist for component creation.
- Supports project initialization for Expo, React Native CLI, and Next.js.
Example prompts
- "Create a profile card component using Gluestack UI v4."
- "Review the styles of this existing component to ensure they follow Gluestack design patterns."
- "Show me an example of how to use semantic tokens in Gluestack UI v4."
Tips & gotchas
- Always verify the latest usage patterns at https://v4.gluestack.io/ui/docs/components/${componentName}/ before using any component.
- The skill is organized into sub-skills (setup, creating components, and components) – choose the appropriate sub-skill for your task.
- Adherence to Gluestack's principles regarding semantic tokens and styling methods is crucial for optimal results.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.