Agent skill · software engineering · heroui-inc
heroui-react
HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
Why this skill is useful
Provides specific installation commands and scripts for managing HeroUI components that the AI wouldn't reliably generate on its own.
What it needs
Requires @heroui/react, @heroui/styles, @tailwindcss/postcss, postcss, tailwind-variants, tailwindcss installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 30,318 stars on the source repository.
What this skill does
HeroUI v3 React Development Guide HeroUI v3 is a component library built on Tailwind CSS v4 and React Aria Components, providing accessible, customizable UI components for React applications. --- Installation --- CRITICAL: v3 Only - Ignore v2 Knowledge This guide is for HeroUI v3 ONLY. Do NOT apply v2 patterns — the provider, styling, and component API all changed: Feature v2 (DO NOT USE) v3 (USE THIS) ------------- --------------------------------- ------------------------------------------- Provider <HeroUIProvider> required No Provider needed Animations framer-motion package CSS-based, no extra deps Component API Flat props: <Card title="x"> Compound: <Card><Card.Header> Styling Tailwind v3 + @heroui/theme Tailwind v4 + @heroui/styles Packages @heroui/system, @heroui/theme @heroui/react, @heroui/styles CORRECT (v3 patterns) Always fetch v3 docs before implementing. --- Core Principles Semantic variants (primary, secondary, tertiary) over visual descriptions Composition over configuration (compound components) CSS variable-based theming with oklch color space BEM naming convention for predictable styling --- 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/react/components/button.mdx Modal: https://heroui.com/docs/react/components/modal.mdx Form: https://heroui.com/docs/react/components/form.mdx Getting started guides: use a concrete topic URL such as https://heroui.com/docs/react/getting-started/quick-start.mdx. Important: Always fetch component docs before implementing. The MDX docs include complete examples, props, anatomy, and API references. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills heroui-inc/heroui-react