1. Habit
  2. Skills
  3. Uniwind skill
uni-stack · 4K installs

Uniwind skill
Runs by itself, component files change.

React Native styles follow Uniwind rules.

Install the Uniwind skill and make it a habit: follow https://gethabit.dev/skills/uni-stack/uniwind.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

4K installs2K starsMIT licenceSource on GitHub ↗

Uniwind

by uni-stack · 4K installs

The skill

Uniwind skill covers Tailwind CSS v4 styling for React Native with Uniwind: setup, Metro config, global.css themes, className and accent- props, variants, withUniwind, safe areas and troubleshooting.

Only when you ask.

The habit

React Native styles follow Uniwind rules.

↻ Runs by itselfcomponent files change

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

component files change. Runs in GitHub Actions or Claude Code routine.

  • ↻ component files change
  • pull_request paths: src/**, app/**, global.css

02

It checks its work

rule scan count zero. If a check fails, it tells you.

  • ✓no className is built with a template string
  • ✓no cssInterop or remapProps call exists
  • ✓no tailwind.config.js file exists
  • ✓no react-native core component is wrapped with withUniwind

03

It remembers

Uniwind issue log. The next run reads it first: open rule violations and the Uniwind version in use.

loops/uniwind-style-rules-loop/log.md

One run, step by step.
Then it stops.

Stop ruleStops after the changed files of one pull request, at most 30 files.

  1. 01

    Identify the task

    Decide whether the change is setup, styling, theming, variants or integrations.

  2. 02

    Read the reference

    Read the matching file in references/, such as styling-patterns.md or theming.md.

  3. 03

    Scan the rules

    Check each changed file against the critical rules, including accent- props and single font families.

  4. 04

    Check themes

    Make sure every theme in global.css defines the same CSS variables.

  5. 05

    Verify unsure APIs

    Check unclear APIs against the official Uniwind docs instead of guessing.

  6. 06

    Log findings

    Record each violation with its file and the rule it breaks.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Uniwind skill helps.

Use it when

  • ✓ You style React Native with Tailwind
  • ✓ You set up Uniwind themes
  • ✓ Styles do not apply as expected

Skip it when

  • – You migrate from NativeWind
  • – You build a web-only app

Questions

Uniwind skill, answered.

Why can't I build class names dynamically?

Tailwind scans at build time, so a class like bg-${color}-500 never gets generated.

How do I color an ActivityIndicator?

Use colorClassName with an accent- class instead of a text color in className.

Does it cover NativeWind migration?

No. That is a separate migrate-nativewind-to-uniwind skill.

How do I install the Uniwind skill?

Copy the prompt at the top into your agent. It installs the skill from uni-stack/uniwind and sets up the habit. Or run npx skills add uni-stack/uniwind --skill uniwind.

Is the Uniwind skill free?

Yes. It is published under MIT. Habit is free too.

Uniwind. Now as a habit.

Install the Uniwind skill and make it a habit: follow https://gethabit.dev/skills/uni-stack/uniwind.md

  • Free
  • No account
  • Undo in one line

All uni-stack skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by uni-stack, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.