Agent skill · software engineering · heroui-inc
heroui-native
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.
Why this skill is useful
Provides specific installation commands and scripts for using the HeroUI Native library with React Native, which the AI may not know.
What it needs
Requires @gorhom/bottom-sheet, heroui-native, react-native-gesture-handler, react-native-reanimated, react-native-safe-area-context, react-native-svg, react-native-worklets, tailwind-merge, tailwind-variants installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 30,318 stars on the source repository.
What this skill does
HeroUI Native Development Guide HeroUI Native is a component library built on Uniwind (Tailwind CSS for React Native) and React Native, providing accessible, customizable UI components for mobile applications. --- Installation --- CRITICAL: Native Only - Do Not Use Web Patterns This guide is for HeroUI Native ONLY. Do NOT apply HeroUI React (web) patterns — the package, styling engine, and color format all differ: Feature React (Web) Native (Mobile) ------------ -------------------- ----------------------------------- Styling Tailwind CSS v4 Uniwind (Tailwind for React Native) Colors oklch format HSL format Package @heroui/react heroui-native Platform Web browsers iOS & Android Always fetch Native docs before implementing. --- Core Principles Semantic variants (primary, secondary, tertiary) over visual descriptions Composition over configuration (compound components) Theme variables with HSL color format React Native StyleSheet patterns with Uniwind utilities --- Accessing Documentation & Component Information For component details, examples, props, and implementation patterns, always fetch documentation: Using Scripts Direct MDX URLs Component docs: fetch .mdx with a concrete kebab-case slug. Run node scripts/listcomponents.mjs when the slug is unknown, and never fetch a URL that still contains a placeholder. Examples: Button: https://heroui.com/docs/native/components/button.mdx Dialog: https://heroui.com/docs/native/components/dialog.mdx TextField: https://heroui.com/docs/native/components/text-field.mdx Getting started guides: use a concrete topic URL such as https://heroui.com/docs/native/getting-started/quick-start.mdx. Important: Always fetch component docs before implementing. The MDX docs include complete examples, props, anatomy, and API references. --- Installation Essentials Quick Install Framework Setup (Expo - Recommended) 1. Install dependencies: 2. Create global.css: 3. Wrap app with providers: Critical Setup Requirements 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills heroui-inc/heroui-native