Auto-activate for components.json (shadcn config), cn() utility. Tailwind component expertise for shadcn/ui. Use when: using cn() utility, Radix primitives, shadcn add, copy-paste components, component CLI, dialogs, forms, data tables, or command palettes. Not for Material UI, Chakra UI, or other component libraries.
From flownpx claudepluginhub cofin/flow --plugin flowThis skill uses the workspace's default tool permissions.
references/best_practices.mdreferences/components.mdreferences/dialogs.mdreferences/forms.mdreferences/shadcn-docs.mdreferences/tables.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Shadcn/ui provides copy-paste components built on Radix UI primitives and Tailwind CSS. Components are added to your project via CLI, not installed as a dependency.
# Add components
bunx --bun shadcn@latest add button card dialog form table
For detailed guides and code examples, refer to the following documents in references/:
cn() utility.react-hook-form and zod.When using shadcn/ui components within a Single Page Application (SPA), ensure navigation does not cause full page reloads. Use asChild to pass the routing Link child directly.
import { Link } from '@tanstack/react-router'
import { Button } from "@/components/ui/button"
<Button asChild>
<Link to="/settings">Go to Settings</Link>
</Button>