heroui-native Skill (HeroUI) for Claude: What It Does and How to Install It

Makes Claude build React Native screens with HeroUI Native, and fetch the library's current docs, components and theme from four scripts.

Installs: 11K; on skills.sh
Stars: 31.1K; on GitHub
Files: 5; besides SKILL.md
Updated: Oct 2026; last repo commit

This skill is a development guide for HeroUI Native, a component library for React Native built on Uniwind (Tailwind CSS for React Native). SKILL.md covers setup for an Expo app, the providers you must wrap the app with, compound components, semantic variants and theming. Its main rule is native only: do not apply HeroUI React (web) patterns, and always fetch the Native docs before implementing.

It loads when you build mobile UI with HeroUI Native, install heroui-native, set dark and light themes or look up component docs. It bundles four Node scripts that fetch docs from heroui.com and the HeroUI Native API. You need Node on your computer and a React Native project.

Good for

React Native and Expo developers using HeroUI Native
Teams that need Claude to stop mixing in HeroUI web patterns
Developers setting up Uniwind, dark mode and theme colors

Install heroui-native

Claude Code

1
Download the skill folder from https://github.com/heroui-inc/heroui/tree/HEAD/skills/heroui-native.
2
Put it at ~/.claude/skills/heroui-native/ so that SKILL.md sits directly inside.
3
Start a new session; the skill loads when its description matches the task.

The skill's bundled scripts run with node on your computer, so there is no Claude app upload tab. The commands in SKILL.md's own Installation section are listed in the FAQ and are not part of this box.

Built from the package data we hold. Not yet tested by us.

What's in the skill

When it loads

HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when building mobile UIs with HeroUI Native — creating Buttons, Cards, TextFields, Dialogs; installing heroui-native; configuring dark/light themes; or fetching component docs. Keywords: HeroUI Native, heroui-native, React Native UI, Uniwind, mobile components.

Sections in SKILL.md

Installation
CRITICAL: Native Only - Do Not Use Web Patterns
Core Principles
Accessing Documentation & Component Information
Using Scripts
Direct MDX URLs
Installation Essentials
Quick Install
Framework Setup (Expo - Recommended)
Critical Setup Requirements
Component Patterns
Semantic Variants
Theming

Key facts

Author: heroui (SKILL.md metadata)
License: Apache-2.0 (LICENSE.txt in the skill folder)
Installs on skills.sh: 10,994 (Nov 2, 2026)
GitHub stars: 31,082 for the whole heroui-inc/heroui repo (Nov 2, 2026)
Last repo commit: Oct 31, 2026
What it includes: 6 files including SKILL.md: LICENSE.txt and 4 Node scripts (list_components, get_component_docs, get_docs, get_theme)
Needs: Node.js to run the four scripts, and a React Native or Expo project. Installing the library uses npm
Version: 2.0.1 in the SKILL.md metadata

What it includes

Do not use HeroUI React (web) patterns
A table contrasts web and native: Tailwind v4 vs Uniwind, oklch vs HSL colors, @heroui/react vs heroui-native.
Try: “Build a settings screen with HeroUI Native cards and a dark mode toggle.”
Read · Native only rule
Lists all available HeroUI Native components
Asks native-mcp-api.heroui.com for the list and falls back to https://heroui.com/native/llms.txt.
Network · node scripts/list_components.mjs
Fetches MDX docs for components, such as Button or Card TextField
Posts the component names to native-mcp-api.heroui.com and falls back to heroui.com/docs/native/components/<name>.mdx.
Network · node scripts/get_component_docs.mjs
Prints theme variables for light and dark mode
Requests /v1/themes/variables?theme=default. If the API fails, it prints a fallback theme built into the script.
Network · node scripts/get_theme.mjs
Fetches non-component docs such as theming guides and releases
Takes a path such as /docs/native/getting-started/theming.
Network · node scripts/get_docs.mjs
npm packages, global.css imports and two required wrappers
Lists an npm i command, npx create-expo-app, a global.css with tailwindcss, uniwind and heroui-native/styles, and HeroUINativeProvider inside GestureHandlerRootView.
Runs code · Install and Expo setup
Card.Header, Card.Body and similar dot-notation parts
Use compound structure, not flat props. Native Card uses Card.Body, not Card.Content, and handlers are onPress, not onClick.
Write · Compound components
primary, secondary, tertiary, danger, danger-soft, ghost, outline
Use variants instead of raw colors so components follow the theme.
Write · Semantic variants
@theme variables in global.css, useThemeColor and Uniwind.setTheme
Theme colors use HSL. Switch light and dark mode with Uniwind.setTheme.
Write · Theming

From the official docs

Permissions

Medium risk

The main risk is that the setup commands install packages and one pipes a remote script into bash. Read each command first, and know that the scripts contact heroui.com services.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

SKILL.md lists a script piped into bash
The Installation section shows `curl -fsSL https://heroui.com/install | bash -s heroui-native`. It does not say what that script does. Read it before you run it, or skip it and use the install box. github.com
The scripts call a HeroUI API and tag requests
All four scripts call https://native-mcp-api.heroui.com (or the address in HEROUI_NATIVE_API_BASE) and add app=native-skills to the URL. get_component_docs.mjs posts the component names you ask about. Fallbacks go to https://heroui.com. github.com
The setup commands install packages
SKILL.md lists one npm i command with nine packages and an Expo setup that runs npx create-expo-app and npm i. Run these in the project you mean to change. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. The scripts fetch and print docs, but SKILL.md also lists install commands.
Talks to	native-mcp-api.heroui.com (docs, component list, theme). heroui.com (fallback docs, /install script, native/llms.txt). npm registry, when you run the install commands
Scopes	Runs node scripts that make HTTPS requests to native-mcp-api.heroui.com and heroui.com SKILL.md lists npm i commands, npx create-expo-app and a curl script piped to bash Claude writes components, global.css and theme code in your project

Questions

What does the heroui-native skill do?

It teaches Claude to build mobile screens with HeroUI Native and keeps it away from the web library. Claude also runs four scripts to fetch current component docs and theme values.

How is it different from HeroUI React?

This skill is for React Native only. SKILL.md says the web package is @heroui/react with Tailwind CSS v4 and oklch colors, while Native uses heroui-native with Uniwind and HSL colors. The same repo has separate heroui-react and heroui-migration skill folders.

Do I need an API key?

SKILL.md and the four scripts name none. The scripts only read an optional HEROUI_NATIVE_API_BASE variable that changes which API address they call.

What does the curl command in its Installation section do?

SKILL.md lists curl -fsSL https://heroui.com/install | bash -s heroui-native without saying what it installs. It pipes a script from heroui.com into bash, so read that script first. The install box on this page does not use it.

What do the scripts send out?

They send component names or doc paths to native-mcp-api.heroui.com, or fall back to heroui.com. Every API request adds app=native-skills to the URL, which a code comment says is for analytics, and a HeroUI-Native-Skill/1.0 user agent.

Is it safe?

The scripts fetch docs and print them. SKILL.md also lists npm install commands, npx create-expo-app and a curl-to-bash line, which change your machine or project when run. Read those commands before Claude runs them, and check which docs URL the scripts call.

Information

updated Nov 2, 2026

Repository: heroui-inc/heroui
Folder: skills/heroui-native

heroui-inc/heroui skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 6

heroui-native SKILL.md · github.com
Claude Code skills · code.claude.com
scripts/get_component_docs.mjs · github.com
scripts/get_docs.mjs · github.com
scripts/get_theme.mjs · github.com
scripts/list_components.mjs · github.com