Agent skill

Uniwind

by Ohh-889 in Ohh-889/skyroc

Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.

MITAuto-check passedFrontend & Design

Install Uniwind

skills CLI
$ npx skills add Ohh-889/skyroc --skill uniwind -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Ohh-889/skyroc uniwind --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Ohh-889/skyroc.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/uniwind .claude/skills/uniwind && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
uniwind
GitHub stars
795
Token cost
~1.4k tokens
SKILL.md length
608 words
Files
10 (incl. references)
Skills in repo
18
Repo updated
First seen
Licence
MIT

At a glance

Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.

  • Works in 12 steps: Tailwind v4 only — Use @import… → Never construct classNames dynamically —… → Never use cssInterop or remapProps —… → …
  • Debugging components in a React Native project that uses Uniwind classNames
  • SKILL.md covers Critical Rules, Reference Routing, Workflow and Related Skills
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Uniwind is an agent skill from Ohh-889/skyroc. Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent- color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, LayoutDirection, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and…

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including reference files (for example `references/component-bindings.md`, `references/css-and-utilities.md` and `references/integrations.md`).

It sits in Frontend & Design, covering Cross-platform mobile apps, CSS and styling and Design tokens. It works with Tailwind CSS, React Native, React and Expo. The repository describes itself as: Skyroc 是一个基于 React 19 + TypeScript 的跨端前端工程化 monorepo:既提供开箱即用的 Web 中后台模板(Admin / RuoYi 对接版)和 Expo 移动端业务模板,也把请求、状态、日志、主题、双端 UI 组件库等能力沉淀为边界清晰的 workspace 包。 The licence is MIT.

When your agent uses it

  • Debugging components in a React Native project that uses Uniwind classNames
  • Tasks that involve Cross-platform mobile apps
  • Tasks that involve CSS and styling

Example prompts

  • “/uniwind”

Workflow steps

12 steps, taken from the first numbered list in SKILL.md.

  1. Tailwind v4 only — Use @import 'tailwindcss' not @tailwind base. Tailwind v3 is not supported.
  2. Never construct classNames dynamically — Tailwind scans at build time. bg-${color}-500 will NOT work. Use complete string literals…
  3. Never use cssInterop or remapProps — Those are NativeWind APIs. Uniwind does not override global components.
  4. No tailwind.config.js — All config goes in global.css via @theme and @layer theme.
  5. No ThemeProvider required — Use Uniwind.setTheme() directly.
  6. withUniwindConfig must be the outermost Metro config wrapper.
  7. NEVER wrap react-native or react-native-reanimated components with withUniwind — View, Text, Pressable, Image, TextInput, ScrollView…
  8. Font families: single font only — React Native doesn't support fallbacks. Use --font-sans: 'Roboto-Regular' not 'Roboto', sans-serif.
  9. All theme variants must define the same set of CSS variables — If light defines --color-primary, then dark and every custom theme must…
  10. accent- prefix is REQUIRED for non-style color props — This is crucial. Props like color (Button, ActivityIndicator), tintColor (Image)…
  11. rem default is 16px — NativeWind used 14px. Set polyfills: { rem: 14 } in metro config if migrating.
  12. cssEntryFile must be a relative path string — Use './global.css' not path.resolve(__dirname, 'global.css').

What it can do on your machine

Read from SKILL.md and the folder at commit 10ddd27. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • docs.uniwind.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Uniwind loads about 1.4k tokens when it runs, and up to ~22k if it reads all its reference files. Until then it costs about 146 tokens; SKILL.md has 608 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~146
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~22k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Ohh-889/skyroc at commit 10ddd27, republished under its MIT licence (© Ohh-889). 608 words, ~1,421 tokens.

Download SKILL.mdSave it as .claude/skills/uniwind/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.
name
uniwind
description
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent-* color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, LayoutDirection, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and Uniwind Pro features. Does not cover NativeWind migration.

Uniwind

Uniwind 1.7.0+ / Uniwind Pro 1.2.1+ / Tailwind CSS v4 / React Native 0.81+ / Expo SDK 54+

If user has lower version, recommend updating to 1.7.0+ (free) / 1.2.1+ (Pro) for best experience.

LayoutDirection is available from Uniwind 1.8.0+.

Uniwind brings Tailwind CSS v4 to React Native. All core React Native components support the className prop out of the box. Styles are compiled at build time — no runtime overhead.

Critical Rules

  1. Tailwind v4 only — Use @import 'tailwindcss' not @tailwind base. Tailwind v3 is not supported.
  2. Never construct classNames dynamically — Tailwind scans at build time. bg-${color}-500 will NOT work. Use complete string literals, mapping objects, or ternaries.
  3. Never use cssInterop or remapProps — Those are NativeWind APIs. Uniwind does not override global components.
  4. No tailwind.config.js — All config goes in global.css via @theme and @layer theme.
  5. No ThemeProvider required — Use Uniwind.setTheme() directly.
  6. withUniwindConfig must be the outermost Metro config wrapper.
  7. NEVER wrap react-native or react-native-reanimated components with withUniwind — View, Text, Pressable, Image, TextInput, ScrollView, FlatList, Switch, Modal, Animated.View, Animated.Text, etc. already have full className support built in. Wrapping them with withUniwind will break behavior. Only use withUniwind for third-party components (e.g., expo-image, expo-blur, moti).
  8. Font families: single font only — React Native doesn't support fallbacks. Use --font-sans: 'Roboto-Regular' not 'Roboto', sans-serif.
  9. All theme variants must define the same set of CSS variables — If light defines --color-primary, then dark and every custom theme must too. Mismatched variables cause runtime errors.
  10. accent- prefix is REQUIRED for non-style color props — This is crucial. Props like color (Button, ActivityIndicator), tintColor (Image), thumbColor (Switch), placeholderTextColor (TextInput) are NOT part of the style object. You MUST use the corresponding {propName}ClassName prop with accent- prefixed classes. Example: <ActivityIndicator colorClassName="accent-blue-500" /> NOT <ActivityIndicator className="text-blue-500" />. Regular Tailwind color classes (like text-blue-500) only work on className (which maps to style). For non-style color props, always use accent-.
  11. rem default is 16px — NativeWind used 14px. Set polyfills: { rem: 14 } in metro config if migrating.
  12. cssEntryFile must be a relative path string — Use './global.css' not path.resolve(__dirname, 'global.css').
  13. Deduplicate with cn() when mixing custom CSS classes and Tailwind — Uniwind does NOT auto-deduplicate. If a custom CSS class (.card { padding: 16px }) and a Tailwind utility (p-6) set the same property, both apply with unpredictable results. Always wrap with cn('card', 'p-6') when there's overlap.
  14. Important utilities are supported — Tailwind important modifier works in classNames with ! at the end: bg-red-500!, active:bg-red-500!, ios:pt-12!. Leading !bg-red-500 syntax is deprecated. Important utilities override non-important utilities for the same style property, but inline style still overrides className.
Show full SKILL.md (185 more words)Show less

Reference Routing

Read only relevant bundled reference files under references/ after identifying the user's task:

  • Setup/config install issues: references/setup.md
  • React Native component className props, accent color props, or component examples: references/component-bindings.md
  • Third-party components, withUniwind, dynamic class names, tailwind-variants, cn, or important utilities: references/styling-patterns.md
  • Themes, CSS variables, ScopedTheme, LayoutDirection, color spaces, or runtime variable APIs: references/theming.md
  • Platform, data, state, responsive, or safe-area utilities: references/variants-and-selectors.md
  • CSS functions, custom CSS, @utility, @theme, fonts, or gradients: references/css-and-utilities.md
  • React Navigation, UI kits, support matrix, or unsupported classes: references/integrations.md
  • Uniwind Pro installation, animations, diagnostics, group variants, default styles, native insets, or theme transitions: references/pro.md
  • Broken styles, setup diagnostics, errors, cache issues, FAQ answers, MCP, or related skills: references/troubleshooting.md

Workflow

  1. Identify whether user needs setup, styling, theming, variants, integrations, Pro, or troubleshooting help.
  2. Read the matching reference file before giving detailed guidance or editing code.
  3. Apply the Critical Rules above even if the selected reference omits them.
  4. Do not guess Uniwind APIs. If unsure, verify against official docs: https://docs.uniwind.dev/llms-full.txt

NativeWind migration is intentionally separate. Use the migrate-nativewind-to-uniwind skill when the user wants to migrate from NativeWind.

© Ohh-889, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 9 other files (references) in .agents/skills/uniwind of Ohh-889/skyroc.

  • SKILL.md
  • references/component-bindings.md
  • references/css-and-utilities.md
  • references/integrations.md
  • references/pro.md
  • references/setup.md
  • references/styling-patterns.md
  • references/theming.md
  • references/troubleshooting.md
  • references/variants-and-selectors.md

Open the folder on GitHubat commit 10ddd27

Compare with similar skills

Uniwind next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Uniwind compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Uniwind this skillOhh-889/skyroc795—~1.4kAutomated safety check: PassMIT
Design SystemWrongStack/WrongStack370—~3.9kAutomated safety check: PassMIT
Tailwind V4 Shadcnever-works/ever-works1622 repos~3.8kAutomated safety check: PassMIT
Shadcn Tailwind UILiarMTTT/TavernWeave153—~1.7kAutomated safety check: PassCustom licence
Tailwind V4 Shadcnaiskillstore/marketplace4301 repos~4.8kAutomated safety check: PassNone
Tailwind V4 Shadcnsecondsky/claude-skills227—~4kAutomated safety check: PassMIT

Similar skills

  • Design System

    WrongStack/WrongStack

    Use this skill BEFORE writing or restyling ANY user-facing interface.

    370 GitHub stars~3.9k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed
  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    153 GitHub stars~1.7k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • Tailwind V4 Shadcn

    aiskillstore/marketplace

    Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture.

    430 GitHub starsUsed in 1 repo~4.8k tokens
    Frontend & DesignAuto-check passed
  • Tailwind V4 Shadcn

    secondsky/claude-skills

    | Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    227 GitHub stars~4k tokensUpdated 11 days ago
    Frontend & DesignAuto-check passed
  • Frontend UI Standards

    MaxHan7/frontend-ui-standards-skill

    A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.

    106 GitHub stars~2.4k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

More from Ohh-889/skyroc

All 18 skills in this repo
  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Auto-check passed
  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Auto-check passed
  • Brand

    Ohh-889/skyroc

    Brand voice, visual identity, messaging frameworks, asset management, brand consistency.

    795 GitHub starsUsed in 13 repos~733 tokens
    Auto-check passed
  • Senior Frontend

    Ohh-889/skyroc

    Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.

    795 GitHub starsUsed in 2 repos~1.1k tokens
    Auto-check: notes
  • Design

    Ohh-889/skyroc

    Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations…

    795 GitHub starsUsed in 9 repos~3.1k tokens
    Auto-check passed
  • Frontend Testing

    Ohh-889/skyroc

    Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities.

    795 GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

Questions about Uniwind

What does Uniwind do?

Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc. Uniwind is an agent skill from Ohh-889/skyroc. Uniwind — Tailwind CSS v4 styling for React Native.

When should I use Uniwind?

Uniwind fits situations like: debugging components in a React Native project that uses Uniwind classNames; tasks that involve Cross-platform mobile apps; tasks that involve CSS and styling.

How do I install Uniwind in Claude Code?

Run `npx skills add Ohh-889/skyroc --skill uniwind -a claude-code`. Or copy the skill folder (.agents/skills/uniwind in Ohh-889/skyroc) into .claude/skills/uniwind in your project. Claude Code loads it when a task matches its description.

How do I install Uniwind in Codex?

Run `npx skills add Ohh-889/skyroc --skill uniwind -a codex`. Or copy the skill folder (.agents/skills/uniwind in Ohh-889/skyroc) into .agents/skills/uniwind in your project. Codex loads it when a task matches its description.

Can I use Uniwind in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Ohh-889/skyroc --skill uniwind -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/uniwind, .gemini/skills/uniwind, .github/skills/uniwind and .opencode/skills/uniwind in your project.

What does Uniwind need to run?

SKILL.md names no scripts, command-line tools or credentials: Uniwind is instructions for the agent only.

Does Uniwind access the network?

SKILL.md names 1 domain. As links in the text: docs.uniwind.dev. This is read from the text; nothing was executed.

Is Uniwind safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Uniwind use?

Uniwind is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Uniwind use?

About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 20k tokens, read only when the agent opens those files.

What are the alternatives to Uniwind?

Skills that share tags, products or a category with Uniwind: Design System (WrongStack/WrongStack, 370 stars), Tailwind V4 Shadcn (ever-works/ever-works, 162 stars), Shadcn Tailwind UI (LiarMTTT/TavernWeave, 153 stars) and Tailwind V4 Shadcn (aiskillstore/marketplace, 430 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Uniwind?

Ohh-889 (a GitHub user) maintains it in Ohh-889/skyroc, which has 795 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on September 1, 2026.

Source: Ohh-889/skyroc on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.