npx claudepluginhub cofin/flow --plugin flowThis skill uses the workspace's default tool permissions.
<workflow>
Manages shadcn/ui components and projects with documentation, CLI guidance, styling rules, form patterns, and composition principles for React/Tailwind UIs.
Manages shadcn/ui components: adds, searches, fixes, debugs, styles, composes UI. Provides project context, docs, examples, and enforces Tailwind/forms best practices.
Manages shadcn/ui components and projects: adding, searching, fixing, debugging, styling, and composing UI. Provides project context, docs, and examples for shadcn init or components.json files.
Share bugs, ideas, or general feedback.
For component discovery, CLI mastery, and pattern enforcement, we highly recommend installing the official shadcn/ui agent skills:
Installation:
npx skills add shadcn/ui
The patterns below provide additional context for Flow-specific copy-paste workflows and SPA navigation.
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>
## Guardrails
asChild for Routing: When integrating with SPA routers (e.g., TanStack Router, React Router), always use the asChild prop on shadcn components to pass the routing Link as a child. This prevents invalid nested links and ensures proper event handling.text-primary, bg-secondary) instead of hardcoded hex codes or arbitrary Tailwind colors. This ensures the application remains themable and supports dark mode out of the box.cn() Utility Usage: Audit component code to ensure the cn() utility is used for all class merging, especially when combining base component styles with variant-specific classes or user-provided props.text-red-500 instead of a variable defined in the theme).