Source profileQuality 85/100Review permissions

heroui-inc/heroui/skills/heroui-react/SKILL.md

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.

Source repository stars: 30,296
Declared platforms: 0
Static risk flags: 2
Last source update: 2026-08-04
Source checked: 2026-08-05

Decision Compatibility Install Workflow Permissions Evidence Source

Decision brief

What it does—and where it fits

HeroUI v3 is a component library built on Tailwind CSS v4 and React Aria Components, providing accessible, customizable UI components for React applications.

Best for

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.

Not for

Tasks that require unconfirmed production actions or broad system permissions.
Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

Platform	Status	Evidence	What to check
Codex	Not declared	No explicit evidence	Portability before use
Claude Code	Not declared	No explicit evidence	Portability before use
Cursor	Not declared	No explicit evidence	Portability before use
Gemini CLI	Not declared	No explicit evidence	Portability before use

Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource

npx skills add https://github.com/heroui-inc/heroui --skill "skills/heroui-react"

Safe inspection promptEditorial

Inspect the Agent Skill "heroui-react" from https://github.com/heroui-inc/heroui/blob/82e8db281f94457a6d72e046645123b698576757/skills/heroui-react/SKILL.md at commit 82e8db281f94457a6d72e046645123b698576757. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

01
Framework Setup (Next.js App Router - Recommended)
1. Install dependencies:
Install dependencies:Create/update app/globals.css:Import in app/layout.tsx:
02
Critical Setup Requirements
1. Tailwind CSS v4 is MANDATORY - HeroUI v3 will NOT work with Tailwind CSS v3 2. Use Compound Components - Components use compound structure (e.g., Card.Header, Card.Content) 3. Use onPress, not onClick - For better accessibility, use onPress event handlers 4. Import Order Matt…
Tailwind CSS v4 is MANDATORY - HeroUI v3 will NOT work with Tailwind CSS v3Use Compound Components - Components use compound structure (e.g., Card.Header, Card.Content)Use onPress, not onClick - For better accessibility, use onPress event handlers
03
Installation
Review the “Installation” section in the pinned source before continuing.
Review and apply the “Installation” source section.
04
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:
This guide is for HeroUI v3 ONLY. Do NOT apply v2 patterns — the provider, styling, and component API all changed:Always fetch v3 docs before implementing.
05
CORRECT (v3 patterns)
Always fetch v3 docs before implementing.
Always fetch v3 docs before implementing.

Permission review

Static risk signals and limitations

Network access

medium · line 11

The documentation includes network, browsing, or remote request actions.

curl -fsSL https://heroui.com/install | bash -s heroui-react

Runs scripts

medium · line 73

The documentation asks the agent to run terminal commands or scripts.

node scripts/list_components.mjs

Runs scripts

medium · line 76

The documentation asks the agent to run terminal commands or scripts.

node scripts/get_component_docs.mjs Button

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial

Signal	Value	Evidence type	Meaning
Quality score	85/100	Computed	Documentation, specificity, maintenance, and trust rules
Repository stars	30,296	Source	Repository attention, not individual Skill quality
Compatibility	0 platforms	Source	Declared in the catalog source record
Usage guide	automated source guide	Editorial	Generated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository: heroui-inc/heroui
Skill path: skills/heroui-react/SKILL.md
Commit: 82e8db281f94457a6d72e046645123b698576757
License: Apache-2.0
Collected: 2026-08-05
Default branch: v3

View the original SKILL.md

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

curl -fsSL https://heroui.com/install | bash -s heroui-react

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`

// DO NOT DO THIS - v2 pattern
import { HeroUIProvider } from "@heroui/react";
import { motion } from "framer-motion";

<HeroUIProvider>
	<Card title="Product" description="A great product" />
</HeroUIProvider>;

CORRECT (v3 patterns)

// DO THIS - v3 pattern (no provider, compound components)
import { Card } from "@heroui/react";

<Card>
	<Card.Header>
		<Card.Title>Product</Card.Title>
		<Card.Description>A great product</Card.Description>
	</Card.Header>
</Card>;

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

# List all available components
node scripts/list_components.mjs

# Get component documentation (MDX)
node scripts/get_component_docs.mjs Button
node scripts/get_component_docs.mjs Button Card TextField

# Get component source code
node scripts/get_source.mjs Button

# Get component CSS styles (BEM classes)
node scripts/get_styles.mjs Button

# Get theme variables
node scripts/get_theme.mjs

# Get non-component docs (guides, releases)
node scripts/get_docs.mjs /docs/react/getting-started/theming

Direct MDX URLs

Component docs: https://heroui.com/docs/react/components/{component-name}.mdx

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: https://heroui.com/docs/react/getting-started/{topic}.mdx

Important: Always fetch component docs before implementing. The MDX docs include complete examples, props, anatomy, and API references.

Installation Essentials

Quick Install

npm i @heroui/styles @heroui/react tailwind-variants

Framework Setup (Next.js App Router - Recommended)

Install dependencies:

npm i @heroui/styles @heroui/react tailwind-variants tailwindcss @tailwindcss/postcss postcss

Create/update app/globals.css:

/* Tailwind CSS v4 - Must be first */
@import "tailwindcss";

/* HeroUI v3 styles - Must be after Tailwind */
@import "@heroui/styles";

Import in app/layout.tsx:

import "./globals.css";

export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html lang="en" suppressHydrationWarning>
			<body>
				{/* No Provider needed in HeroUI v3! */}
				{children}
			</body>
		</html>
	);
}

Configure PostCSS (postcss.config.mjs):

export default {
	plugins: {
		"@tailwindcss/postcss": {},
	},
};

Critical Setup Requirements

Tailwind CSS v4 is MANDATORY - HeroUI v3 will NOT work with Tailwind CSS v3
Use Compound Components - Components use compound structure (e.g., Card.Header, Card.Content)
Use onPress, not onClick - For better accessibility, use onPress event handlers
Import Order Matters - Always import Tailwind CSS before HeroUI styles

Component Patterns

All components use the compound pattern shown above (dot-notation subcomponents like Card.Header, Card.Content). Don't flatten to props — always compose with subcomponents. Fetch component docs for complete anatomy and examples.

Semantic Variants

HeroUI uses semantic naming to communicate functional intent:

Variant	Purpose	Usage
`primary`	Main action to move forward	1 per context
`secondary`	Alternative actions	Multiple
`tertiary`	Dismissive actions (cancel, skip)	Sparingly
`danger`	Destructive actions	When needed
`ghost`	Low-emphasis actions	Minimal weight
`outline`	Secondary actions	Bordered style

Don't use raw colors - semantic variants adapt to themes and accessibility.

Theming

HeroUI v3 uses CSS variables with oklch color space:

:root {
	--accent: oklch(0.6204 0.195 253.83);
	--accent-foreground: var(--snow);
	--background: oklch(0.9702 0 0);
	--foreground: var(--eclipse);
}

Get current theme variables:

node scripts/get_theme.mjs

Color naming:

Without suffix = background (e.g., --accent)
With -foreground = text color (e.g., --accent-foreground)

Theme switching:

<html class="dark" data-theme="dark"></html>

For detailed theming, fetch: https://heroui.com/docs/react/getting-started/theming.mdx

Alternatives

Compare before choosing

Computed 9123,835

alirezarezvani/claude-skills

code-to-prd

Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user interactions to produce business-readable documentation detailed enough for engineers or AI agents to fully reconstruct every page and endpoint. Works with frontend frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt), backend frameworks (NestJS, Django, Express, FastAPI), and fullstack applications. Use when users mention: generate PRD,

Computed 84237,773

affaan-m/ECC

documentation-lookup

Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma).

Computed 9619

theBGuy/GitDesktop

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view

Computed 9382

aAAaqwq/AGI-Super-Team

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: g