// skills embutidas · 02

frontend-heroui

Constrói frontends com HeroUI: instala @heroui/react, configura provider/plugin e usa componentes do pacote em vez de CSS ad-hoc.

Metadata

params source bundled Instalada por padrão no repositório Okami-Agent. path file skills/frontend-heroui/SKILL.md triggers keywords heroui, frontend, UI, componente, dashboard, página, tela, interface, landing loaded by tool use_skill carrega o corpo completo quando a tarefa casa com a skill.

Quando usar

  • Projeto declarou HeroUI como biblioteca de UI.
  • App precisa de componentes ricos com @heroui/react.
  • O gate de UI exige provider e imports da lib.

Quando não usar

  • Projeto ShadCN.
  • Artefato HTML estático sem app.
  • Mudança puramente backend.

Fluxo recomendado

  1. Garanta React/Next + TS + Tailwind.
  2. Instale @heroui/react framer-motion.
  3. Configure plugin no Tailwind e HeroUIProvider na raiz.
  4. Importe componentes de @heroui/react.
  5. Rode build e gate.

Regras

  • Componentes vêm da HeroUI.
  • Cores e espaçamento via tema/tokens/Tailwind.
  • Sem style inline, <style> cru ou hex inline.

Checklist de conclusão

  • @heroui/react instalado.
  • HeroUIProvider envolve a app.
  • Imports vêm de @heroui/react.
  • npm run build passa.

Abrir esta página nos docs interativos