heroui-native_skill

Overview

This skill helps developers work with HeroUI Native, a React Native component library built on Uniwind (Tailwind for React Native). It guides installation, required peers, theming with HSL variables, and correct native component patterns. Use it when implementing HeroUI Native components, customizing themes, or fetching component docs and examples.

How this skill works

The skill inspects project needs and returns concrete steps: installation commands, required peer dependencies, and framework setup (Expo recommended). It explains native-specific patterns like compound components, onPress handlers, wrapping with HeroUINativeProvider and GestureHandlerRootView, and how to fetch MDX documentation for components and theming. It flags common web->native pitfalls and provides direct links or script commands to retrieve component MDX and theme variables.

When to use it

• Setting up HeroUI Native in a new or existing React Native (Expo) app
• Installing required peer dependencies and configuring Uniwind/Tailwind
• Implementing or composing HeroUI Native components (use compound patterns)
• Customizing theme variables, switching light/dark themes, or reading HSL colors
• Fetching component documentation, examples, props, and anatomy before implementation

Best practices

• Always use Uniwind utilities and avoid web CSS files or className patterns
• Wrap the app with HeroUINativeProvider and GestureHandlerRootView early
• Use compound components (e.g., Card.Header, Card.Body) instead of flattened props
• Prefer semantic variants (primary, secondary, tertiary, danger) over raw colors
• Use onPress for interactions and Platform.OS for platform-specific behavior
• Fetch the component MDX docs before implementing to follow the native API

Example use cases

• Installing heroui-native and peer deps in an Expo project and creating global.css
• Composing a Card with Card.Header, Card.Title, Card.Body and Card.Footer
• Switching theme programmatically with Uniwind and reading theme variables via useThemeColor
• Retrieving Button or Dialog component docs via the provided MDX URLs or scripts
• Converting a web-based HeroUI component implementation into correct native patterns