Tamagui
Tamagui allows you to create interactive art and experiences by drawing directly onto images, offering a unique blend of digital and analog creativity.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add tamagui npx -- -y @trustedskills/tamagui
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"tamagui": {
"command": "npx",
"args": [
"-y",
"@trustedskills/tamagui"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
The Tamagui skill enables AI agents to generate and work with code using the Tamagui React UI framework for web and native applications. It allows for creating interactive art and experiences by leveraging a compiler that optimizes designs based on project-specific configurations. The agent can utilize design tokens, themes, and responsive styles defined in a generated tamagui-prompt.md file to build user interfaces efficiently.
When to use it
- Generating UI components with pre-defined styling using tokens (e.g.,
$4,$background). - Creating themed applications by nesting and combining themes hierarchically.
- Building responsive layouts that adapt to different screen sizes based on media query breakpoints.
- Stacking components vertically or horizontally for complex layout arrangements.
- Generating code snippets for buttons, views, and text elements with specific styling variants.
Key capabilities
- Design Token Integration: Uses project-specific design tokens (e.g., space, size, color) prefixed with
$. - Theming: Supports nested and hierarchical theme structures.
- Component Styling: Creates components using the
styled()function and defines variants for different states or sizes. - Stack Components: Utilizes
XStack,YStack, andZStackfor layout management. - Responsive Styles: Implements responsive design through media query props (e.g.,
$gtSm,$gtMd).
Example prompts
- "Create a Tamagui component called 'MyCard' with a background color of $background and rounded corners."
- "Generate a YStack layout with padding of $4 and an XStack inside for label and button elements."
- “Write a Tamagui theme named ‘blue’ that inherits from the ‘dark’ theme.”
Tips & gotchas
tamagui-prompt.mdis essential: Always refer to this file for project-specific design tokens, themes, and media query names instead of relying on defaults.as constis required: When defining variants within styled components, ensure you useas const.- Prop order matters: Later props in a component definition override earlier ones.
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.