shadcn/ui
The official shadcn/ui skill for AI agents. Find, add, compose, customize, and debug UI components using your project configuration, current component docs, and the shadcn CLI.
ウェブサイト、画像、プレゼンテーション、動画のためのオリジナルワークフロー。
The official shadcn/ui skill for AI agents. Find, add, compose, customize, and debug UI components using your project configuration, current component docs, and the shadcn CLI.
Audit a codebase, prioritize evidence-backed findings, and write implementation plans for another agent or developer.
Find, customize and integrate shadcn/ui components in an application.
Build responsive interface components with shadcn/ui, Tailwind CSS and design-system guidance.
Use whenever the user wants to build or modify a chat, agent, or tool-calling UI in a React 19 + Tailwind v4 project — especially if the code imports from `@/components/agent-elements/*` or the project has that folder on disk. Triggers: "agent chat", "tool call UI", "streaming chat", "plan approval", "AgentChat", "InputBar", "tool renderer", mentions of Agent Elements, or requests to add a new agent surface with shadcn. Do NOT use for plain chat UIs that don't need tool/plan/approval cards, or for projects already committed to a different agent UI kit.
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
丁寧につくった小さなライブラリ。新しいスキルも追加予定です。