react-native-unistyles-v3 — Claude Code skill: RN styling guide
A skill that walks the agent through react-native-unistyles v3: Babel or Metro setup, themes, breakpoints, variants and common breakages.
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a claude-codeWhat react-native-unistyles-v3 does
The skill kicks in when your code or prompt mentions unistyles, StyleSheet.create, withUnistyles, useUnistyles, ScopedTheme, UnistylesRuntime, breakpoints or adaptive themes. The agent reads your code first, works out what you want — first-time setup, adding a theme, responsive layout, fixing a bug — then applies v3 patterns and checks the skill's reference files for detail.
What's inside: a quick reference for the three StyleSheet.create overloads, one-time StyleSheet.configure, variants with compoundVariants, and the withUnistyles wrapper for props such as color and trackColor. A separate rules section names the usual failure points. Spreading styles as {...styles.x} breaks the C++ proxy binding. Re-exporting StyleSheet from a barrel file goes undetected by the plugin. And with no build-time integration — Babel plugin, Metro integration or RepackUnistylePlugin — styles stop reacting to theme changes. Call useVariants before touching variant styles, and always pass an object: useVariants(undefined) throws on native.
Your project needs React Native 0.81+ with the New Architecture, React 19+ and a pinned react-native-nitro-modules. On Expo, SDK 54+ plus a dev client or prebuild — Expo Go won't work here. The skill can edit files and run npx, so the agent gets write access to your repo.
What it helps with
- wire react-native-unistyles v3 into a React Native app
- move colors and typography into switchable themes
- make layouts responsive with breakpoints and miniRuntime
- define button variants and combine them in compoundVariants
- track down styles that ignore a theme switch
Example prompts for the agent
- Set up unistyles in this project: Babel plugin rooted at src and StyleSheet.configure with light and dark themes
- Add size and color variants to the button, and a border for large plus primary via compoundVariants
- Rewrite this screen with unistyles breakpoints so the container width follows rt.screen
How to install react-native-unistyles-v3
1Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a claude-code2Manually: put the files in place
~/.claude/skills/react-native-unistyles-v3/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/react-native-unistyles-v3/
1Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a codex2Manually: put the files in place
.agents/skills/react-native-unistyles-v3/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a cursor2Manually: put the files in place
.cursor/skills/react-native-unistyles-v3/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install jpudysz/react-native-unistyles react-native-unistyles-v32Manually: put the files in place
.github/skills/react-native-unistyles-v3/SKILL.md1Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a gemini-cli2Platform CLI
gemini skills install https://github.com/jpudysz/react-native-unistyles --path skills/react-native-unistyles-v3Manually: put the files in place
.devin/skills/react-native-unistyles-v3/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about react-native-unistyles-v3
How do I install react-native-unistyles-v3 in Claude Code?
Run npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a claude-code. The skill file lands at ~/.claude/skills/react-native-unistyles-v3/SKILL.md.
What does react-native-unistyles-v3 do?
It guides the agent through react-native-unistyles v3: build setup, theming, responsive styles, variants, third-party component integration and troubleshooting.
Which React Native and Expo versions are required?
React Native 0.81+ with the New Architecture, React 19+ and a pinned react-native-nitro-modules. With Expo you need SDK 54+ and a dev client or prebuild; Expo Go is not supported.