heroui-react
The heroui-react skill provides guidance and automation for building React applications using HeroUI v3, Tailwind CSS v4, and React Aria. It facilitates component installation, documentation retrieval, and implementation of compound component patterns.
Is heroui-react safe to install?
Review the source first: our audit of heroui-react's source files found 10 shell commands, 7 external URLs, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill executes shell commands and performs network requests to fetch documentation and install packages.
How we audit skills: our security review methodology.
Who is this skill for?
React developers building user interfaces with the HeroUI v3 component library.
What can you do with it?
- Installing HeroUI v3 dependencies
- Retrieving component documentation and source code
- Implementing compound components like Card, Modal, and TextField
- Configuring Tailwind CSS v4 and HeroUI styles
- Accessing theme variables and theming documentation
How good is this skill?
Quality score: 5/10. The skill provides clear, version-specific instructions and includes necessary scripts for documentation and setup.
What does the skill file contain?
# 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 ```bash 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) | | ------------- | -------------...
Frequently asked questions
Does HeroUI v3 require a provider component?
No, HeroUI v3 does not require a provider component.
Which version of Tailwind CSS is required for HeroUI v3?
Tailwind CSS v4 is mandatory.
How should I handle component events for accessibility?
Use the onPress event handler instead of onClick.
What pattern should I use for components like Card?
Use the compound component pattern with dot-notation subcomponents, such as Card.Header and Card.Content.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
emil-design-eng
114.3KDevelopers and designers building user interfaces who want to improve the feel and responsiveness of their software
This skill provides design engineering guidance based on Emil Kowalski's philosophy for UI polish, component design, and animation. It includes specific frameworks for animation decision-making, CSS transition techniques, and component interaction patterns.
make-interfaces-feel-better
37.7KFrontend developers and designers using AI agents to review UI code or implement design system improvements
This skill provides design engineering principles for polishing user interfaces. It guides the agent in reviewing and implementing UI details such as typography, animations, border radii, optical alignment, and performance optimizations.