Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add jpudysz/react-native-unistyles --skill react-native-unistyles-v3 -a claude-code
Open on GitHub

What 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-code

2Manually: put the files in place

~/.claude/skills/react-native-unistyles-v3/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/react-native-unistyles-v3/

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.

Similar skills

Everything for Mobile →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor