HeroUI as the only component library: v3 imports from @heroui/react, theme tokens from globals.css, Tailwind composition without fighting HeroUI variants, forms and accessibility hooks. Triggers on HeroUI, heroui, Button, Input, Modal, TSX UI.
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
HeroUI as the only component library: v3 imports from @heroui/react, theme tokens from globals.css, Tailwind composition without fighting HeroUI variants, forms and accessibility hooks. Triggers on HeroUI, heroui, Button, Input, Modal, TSX UI.
HeroUI components
Use with typescript-web spec and heroui-theme rule. web-accessibility rule covers baseline a11y.
Principles
HeroUI only for interactive primitives: do not add MUI, Chakra, Radix-as-primary, or duplicate kits.
Version: prefer v3 and @heroui/react imports when the repo pins v3; use legacy subpath imports only when v3 lacks the component and the gap is documented.
Theme: use CSS variables and Tailwind tokens defined in globals.css / HeroUI theme; add tokens instead of arbitrary colors on each screen.
Compound components: follow HeroUI compound APIs (Select.Trigger, etc.); do not fight internal structure with conflicting className overrides—use slots / variants when the library provides them.
Native HTML: prefer HeroUI Input, Select, Button over raw <input> for app UI unless a documented exception (e.g. file inputs where the team standardizes native).
Client boundary: files that use hooks, event handlers, or browser APIs need "use client" at the top; keep server parents passing serializable props.
