skills.rest
junevm
junevmCOMMUNITY
Explore all skills by this author →
GitHub

heroui-react

Guide React UI development with HeroUI v3, Tailwind CSS v4, and React Aria components.

Updated Aug 27, 2026
Search Tags:#theming#react#component composition#react aria#tailwind css v4#heroUI v3#documentation fetching
One-click install
npx skills add https://github.com/junevm/avtoolz --skill heroui-react-junevm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-react
Source: https://github.com/junevm/avtoolz/tree/main/.agents/skills/heroui-react
Command: npx skills add https://github.com/junevm/avtoolz --skill heroui-react-junevm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

HeroUI v3 developers need a reliable, v3-correct setup and implementation pattern for building accessible React UIs without mixing outdated v2 guidance.

Core Features & Use Cases

  • v3-Correct Implementation Guidance: Teaches that HeroUI v3 requires Tailwind CSS v4 and uses React Aria-compatible, accessible patterns (including using onPress instead of onClick).
  • Correct Component Composition: Provides the compound component pattern (e.g., Card.Header / Card.Title / Card.Description) and warns against v2 flat prop usage.
  • Documentation Retrieval Workflow: Includes deterministic scripts and direct MDX URLs for fetching component docs, styles, theme variables, and source code to accelerate implementation and troubleshooting.
  • Theming & CSS Variable Strategy: Explains how to configure light/dark theming using CSS variables with oklch values and where theme variables come from.

Quick Start

Run node scripts/list_components.mjs to discover available HeroUI v3 components, then choose one and fetch its MDX with node scripts/get_component_docs.mjs Button.

Frequently Asked Questions about heroui-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible React UIs with HeroUI v3 and Tailwind CSS v4?▼

Build accessible HeroUI v3 UIs by using Tailwind CSS v4 and React Aria components, applying onPress handlers instead of onClick for correct interaction patterns. This Skill provides v3-specific guidance for setup, theming, and compound component composition.

What's the correct component composition pattern for HeroUI v3 React components?▼

Use the compound component pattern like Card.Header, Card.Title, and Card.Description for HeroUI v3 React components. Avoid outdated v2 flat prop usage and enforce no-provider compound component patterns to ensure correct v3-only implementation.

How do I configure light and dark theming with HeroUI v3?▼

Configure light and dark theming with HeroUI v3 using CSS variables with oklch values. This Skill explains where theme variables come from and how to apply them for consistent theming across your React components.

How do I retrieve official documentation and source code for HeroUI React components?▼

Retrieve HeroUI React component documentation, styles, theme variables, and source code by running the provided scripts. Use node scripts/list_components.mjs to discover components, then node scripts/get_component_docs.mjs to fetch specific MDX docs via API-first fallback fetching.

Does HeroUI v3 require React Aria components for accessible patterns?▼

Yes, HeroUI v3 requires React Aria-compatible, accessible patterns. This Skill enforces v3-correct usage by recommending onPress handlers over onClick and ensuring your React UIs meet accessibility standards without mixing outdated v2 guidance.

Why does my HeroUI v2 flat prop usage not work with HeroUI v3?▼

HeroUI v3 drops v2 flat prop usage in favor of the compound component pattern like Card.Header and Card.Title. This Skill enforces no-provider compound component patterns to prevent mixing outdated v2 guidance with v3-correct implementation.

Related Skills

Explore More Software Engineering Skills→
beemanbeeman
12

heroui-react

Implement HeroUI v3 components in React with Tailwind CSS v4 theming.

Community
Intermediate
ruchernchongruchernchong

heroui

Build accessible React interfaces with HeroUI v3 compound components and Tailwind v4.

Community
Basic
Yuan-ZzzzYuan-Zzzz

unity-patterns

Recommend Unity design patterns for specific gameplay or system problems.

Community
Intermediate
babuallybabually
1

heroui-react

Guide HeroUI v3 React component implementation with Tailwind CSS v4 and React Aria.

Community
Intermediate