1. Habit
  2. Skills
  3. HeroUI Native skill
heroui-inc · 11K installs

HeroUI Native skill
Runs by itself, PR changes mobile UI.

HeroUI Native code stays native.

Install the HeroUI Native skill and make it a habit: follow https://gethabit.dev/skills/heroui-inc/heroui-native.md

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

11K installs31K starsApache-2.0 licenceSource on GitHub ↗

HeroUI Native

by heroui-inc · 11K installs

The skill

The heroui native skill helps React Native developers build mobile UIs with HeroUI Native components, Uniwind styling and HSL themes, and fetches current component docs before any code is written.

Only when you ask.

The habit

HeroUI Native code stays native.

↻ Runs by itselfPR changes mobile UI

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

PR changes mobile UI. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR changes mobile UI
  • pull_request.opened or synchronize, paths: *.tsx, global.css

02

It checks its work

native pattern checks. If a check fails, it tells you.

  • ✓no import from @heroui/react
  • ✓no onClick on heroui-native components
  • ✓Card uses Card.Body, never Card.Content
  • ✓theme colors in global.css use HSL, not oklch

03

It remembers

component usage notes. The next run reads it first: components already checked and the slugs of their docs.

loops/heroui-native-check-loop/notes.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run, with at most 15 components checked.

  1. 01

    Pick up change

    A pull request that touches .tsx files or global.css starts the run.

  2. 02

    List components

    The agent runs node scripts/list_components.mjs to get the exact slugs of the touched components.

  3. 03

    Fetch the docs

    It runs node scripts/get_component_docs.mjs for each touched component and node scripts/get_theme.mjs for the theme.

  4. 04

    Check patterns

    It looks for web patterns, flattened compound components, onClick and raw colors instead of semantic variants.

  5. 05

    Check setup

    It confirms Uniwind, the two providers and HSL theme variables are in place.

  6. 06

    Report and note

    Findings and checked components go into the notes file, and a failed check notifies you.

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 HeroUI Native skill helps.

Use it when

  • ✓ You build a React Native app with HeroUI
  • ✓ You set up Uniwind and themes
  • ✓ You need current component props

Skip it when

  • – You build for the web with HeroUI React
  • – Your app uses another UI library

Questions

HeroUI Native skill, answered.

Does it fix the code?

No. It reports what breaks the native rules. You decide the fix.

Why fetch docs on every run?

The skill says to always fetch the native docs before implementing, because they hold the full props and anatomy.

Does it work for HeroUI on the web?

No. This skill covers only heroui-native for iOS and Android.

How do I install the HeroUI Native skill?

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

Is the HeroUI Native skill free?

Yes. It is published under Apache-2.0. Habit is free too.

HeroUI Native. Now as a habit.

Install the HeroUI Native skill and make it a habit: follow https://gethabit.dev/skills/heroui-inc/heroui-native.md

  • Free
  • No account
  • Undo in one line

All heroui-inc skills →More code skills →

Works in

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

Made by heroui-inc, published under Apache-2.0. 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.