OKAMI AGENTby OKAMI
// bundled skills · 01

frontend-shadcn

Build ShadCN UI frontends correctly: initialize the library, add components before use and enforce theme tokens instead of ad-hoc CSS.

Open in full documentationGitHub

Metadata

params source bundled Installed by default in the Okami-Agent repository. path file skills/frontend-shadcn/SKILL.md triggers keywords shadcn, frontend, UI, components, dashboard, landing loaded by tool use_skill loads the full SKILL.md when the task matches.

When to use

  • A React/Next project must use ShadCN UI.
  • contracts.ui.library: shadcn is active.
  • The work needs @/components/ui imports and Tailwind tokens.

When not to use

  • One-off HTML artifacts.
  • HeroUI projects.
  • Non-frontend tasks.
  1. Ensure React/Next + TypeScript + Tailwind.
  2. Run npx shadcn@latest init if needed.
  3. Add every component before using it.
  4. Use theme tokens and @/components/ui imports.
  5. Run build and UI gate.

Completion checks

  • The workflow was followed.
  • Relevant commands/tests/gates were run.
  • The result cites real files or observable evidence when applicable.

Open this page in the interactive docs