Tamagui skill for agents
Tamagui
Four skills in the Tamagui repository: styling and themes, migration to version 3, the v6 theme family and a palette generator with preview
- 14,287 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The migration skill runs a codemod that rewrites component files across the project
- Commands through `npx` download and run packages from npm
- The theme preview passes the theme contents in the address of a page on the Tamagui site
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/tamaguiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The migration skill runs a codemod that rewrites component files across the project
- Commands through `npx` download and run packages from npm
- The theme preview passes the theme contents in the address of a page on the Tamagui site
This is third-party code. Review the repository files before installing.
What it does
The skills folder of the Tamagui repository holds four skills for Claude Code, Codex, Cursor and other agents that read the SKILL.md format. The tamagui skill teaches an agent to write components with styled(): variants, conditional values in a single string (`bg="background hover:background-hover dark:blue-500"`), tokens without a dollar sign, themes, animations and compiler behavior. Before any work it asks to run `npx tamagui generate-prompt`, which builds a tamagui-prompt.md file from the project's configuration with the real token, theme, media query and component names, so the agent uses those instead of inventing its own. The tamagui-upgrade-v3 skill drives a migration from version 2 or 1 to version 3. The agent runs `npx tamagui migrate --from v2`, which prints a step-by-step prompt, then `npx @tamagui/codemod-flat-values`, which rewrites tokens and condition objects into flat values. The skill also covers the spots the codemod cannot prove safe and the cases where values drift silently. The tamagui-v6-config skill describes the v6 theme family (light, dark, accent, brand, inverse, levels and active) and the rule for picking a theme for a selected row or card. The fourth skill, tamagui-theme-generator, designs a palette from anchor values of hue, saturation and lightness for light and dark schemes. The agent saves the result to theme.json and opens it with `npx tamagui preview-theme ./theme.json`: the theme is base64-encoded into the tamagui.dev/theme page address and decoded by the browser. With the `--print` flag the command only prints the address.
Who it is for. For developers building web and React Native apps on Tamagui who write interfaces with an agent or move a project to version 3 of the library.
Good fit when
- An agent writes Tamagui components and confuses tokens, themes or the conditional value syntax
- A project is on version 2 and needs a migration plan to version 3 with the codemod and a list of spots for manual edits
- You want to pick a brand color scheme and see it in a browser before touching `tamagui.config.ts`
- A selected row or card flickers on hover and you need to know which theme from the v6 family fits
- The project has several of its own component wrappers and the agent needs a tamagui-prompt.md file listing their names
Not a fit when
- The project has no Tamagui: the skills describe this library and its configuration only
- The project stays on version 1 or 2 and does not plan to upgrade: the skill rules are written for version 3
- You need an offline theme preview: the tamagui.dev/theme page opens in a browser from the network
- The interface is built with Svelte, Vue or without React: Tamagui is built on React
Example request
Move my project from Tamagui 2 to 3: run the codemod, show what it flagged as uncertain and go through those spots one by oneLimitations
- The folder description and the skills disagree: the skills README says to install from the `v3-beta` branch and calls main version 2, yet the skill texts are already written for version 3. Check which branch you take the folder from before installing.
- The version 3 codemod resolves only part of the sites automatically. By the author's measurement it is 80% on one codebase and 67% on another, the agent edits the rest by hand, and fractional tokens such as `$1.5` account for the biggest share of flags.
- The repository is large and the skills sit inside it next to the library code. There is no separate package for them, and they install with `npx skills add` and a folder address.
- The repository also has internal git-safety and release-safety skills in `.claude/skills`: they serve Tamagui maintainers and are not meant for users.
- The theme preview opens a Tamagui site page and the whole theme goes into the address as base64, so keep internal project names out of the palette.
How to disable. Delete the tamagui, tamagui-upgrade-v3, tamagui-v6-config and tamagui-theme-generator skill folders from the agent's skills directory (for example `.claude/skills` in the project or the home folder). The tamagui-prompt.md file in the project was created by `npx tamagui generate-prompt`, and you can delete it by hand.
FAQ
What does the tamagui skill say about conditional values?
A style value is a base followed by a chain of conditions: in `dark:hover:navy` both conditions, dark theme and hover, must match. Tokens and themes are written without a dollar sign, and multi-word names use hyphens, for example `background-hover`. When several conditions match, the more specific one wins: platform outweighs media query and state outweighs theme.
How is `npx tamagui migrate --from v2` different from the codemod?
The first command prints a step-by-step migration prompt: dependency updates, config and theme moves, replacements for deprecated APIs. The `npx @tamagui/codemod-flat-values` codemod rewrites tokens and condition objects into flat values and lists the spots it is unsure about. The tamagui-upgrade-v3 skill explains the order to run them in and how to verify the result.
How do I mark a selected row in a v6 theme?
The tamagui-v6-config skill advises switching the theme through the `theme` prop, for example `theme={selected ? 'active' : null}`, not through a variant: variants resolve after the theme is chosen and cannot change it. Under the active theme the hover background equals the resting background, so the selected row does not flicker.
What does `npx tamagui preview-theme` put into the address?
The command reads theme.json or a JSON string from the `--theme` flag, base64-encodes the theme and appends it to the tamagui.dev/theme address after a hash sign. The browser decodes it on its side and builds the styles. The `--print` flag prints the address and does not launch a browser.
Do I need to install all four skills?
No. The `npx skills add` command accepts the address of a single folder, for example `.../skills/tamagui-upgrade-v3`. The tamagui skill is enough for everyday work, and the others matter for migrations, theme design and deeper work with the v6 scheme.
Discussion
No questions or reviews yet.
Related
SkillsFour official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Creative coding skills for Claude Code: motion, micro-interactions and visual systems for web, Android and Apple
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
README in short
The repository's front page shows the logo, documentation links and recommends starting from the starter projects with `npm create tamagui@latest`. A separate file in the skills folder covers the skills: a table of three skills with their areas, two install commands (all at once or one), a section about the tamagui-prompt.md file for a specific project's configuration, and links to the docs, the upgrade guide and Discord. Each skill is a SKILL.md file, and tamagui and tamagui-upgrade-v3 also ship reference notes in a references folder.
README badge
Original SKILL.md
--- name: tamagui description: Universal React UI framework for web and native with flat conditional values. Use when building cross-platform apps with Tamagui, writing styled components, or applying tokens, themes, animations, and media queries. metadata: version: 3.0.0 --- # Tamagui Skill Universal React UI framework for web and native. In v3, conditions are flat clauses in the style value, tokens and themes are bare names, and nested condition props such as `hoverStyle` are removed. ## 1. Project Configuration First Before writing Tamagui code, generate or read the project prompt: ```bash npx tamagui generate-prompt ``` This writes `tamagui-prompt.md` containing the project's exact token names, theme keys, media breakpoints, shorthands, and components. In an existing app, always inspect and use the project's local component wrappers first before importing from raw packages. ## 2. Flat Value Grammar Every conditional style value follows this grammar: ```txt value := base? clause* clause := modifier(:modifier)*:payload ``` - Modifiers chain left-to-right: `dark:hover:navy` applies when both dark and hover match. - Payloads extend to the next top-level clause or end of string. - An empty payload is invalid. Clear a property with `none`, `transparent`, `initial`, or `unset`.