heroui

Plugin heroui from marketplace xylex-group in xylex-group/skills. Commands read from the repo's manifest — 1 month ago.

Skills (12)

• heroui-all-components

  Catalog of all HeroUI v3 React components by category (Buttons, Forms, Overlays, Navigation, etc.). Use to pick the right component, map kebab doc paths to PascalCase exports, and open per-component docs. Keywords: HeroUI components, all components, Button Modal Select Accordion catalog, @heroui/rea

• heroui-animation-and-transitions

  Animate HeroUI v3 components with built-in CSS transitions (data-entering, data-pressed, etc.), Tailwind utilities, custom keyframes, and Framer Motion / Motion. Covers state attributes, render-prop state animations, prefers-reduced-motion and data-reduce-motion, GPU-friendly properties, and will-ch

• heroui-cli

  Use heroui-cli to initialize HeroUI v3 projects, install/upgrade/uninstall @heroui/react and @heroui/styles, list packages, run doctor health checks, dump env debug info, and download agent docs via agents-md. Covers Node 22.22+, global vs dlx/npx, templates (app, pages, vite, react-router), package

• heroui-colors

  Apply HeroUI v3 semantic color roles and CSS variables: accent, default, success, warning, danger, foreground/muted, background surfaces, form fields, separators, borders, primitives (oklch). Covers soft/hover derived tokens via color-mix, light/dark defaults, overrides, custom colors with @theme in

• heroui-composition-patterns

  Build flexible HeroUI v3 UI with composition: framework-agnostic styles from @heroui/styles, polymorphic styling via buttonVariants/linkVariants and BEM, compound components (dot notation, .Root, named exports), mixing variants, custom components and tv() extensions, render prop for custom DOM/Motio

• heroui-dark-mode

  Add light, dark, and system theme switching to HeroUI v3. CSS-driven themes via class dark / data-theme on html (no HeroUI provider). Next.js with next-themes (App Router + Pages Router), custom data-theme names, plain React useTheme from @heroui/react, theme switchers, bg-background/text-foreground

• heroui-design-principles

  Apply HeroUI v3's 10 core design principles (semantic intent, accessibility, composition, progressive disclosure, predictable APIs, type safety, styles/logic split, DX, full customization, open extensibility). Use when building or reviewing HeroUI React UI, choosing Button/Chip variants, composing A

• heroui-frameworks

  Integrate HeroUI v3 with Next.js (App Router, Pages Router) and Vite. Covers heroui-cli init, first Button usage, no-provider rule, Next.js locale/RTL via I18nProvider and isRTL, Accept-Language in root layout, and CSP nonce meta for React Aria. Use when scaffolding a HeroUI app, wiring Next.js layo

• heroui-migration

  HeroUI v2 to v3 migration guide for agents. Use when migrating HeroUI v2 apps to v3, upgrading components, or accessing migration documentation. Keywords: HeroUI migration, v2 to v3, migration guide, upgrade HeroUI.

• heroui-native

  HeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when building mobile UIs with HeroUI Native — creating Buttons, Cards, TextFields, Dialogs; installing heroui-native; configuring dark/light themes; or fetching component docs. Keywords: HeroUI Native, heroui-native, Rea

• 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, @h

• heroui-styling

  Style HeroUI v3 components with className, inline style, BEM classes, data-state attributes, render-prop dynamic classes, Tailwind utilities, CSS Modules, CSS-in-JS (styled-components, Emotion), tailwind-variants wrappers, and scrollbar utilities from @heroui/styles. Keywords: HeroUI styling, BEM, b

Similar plugins