{"id":"0bbe2c4e-bf03-4335-86ab-b90a79e01f63","shortId":"BsfEJG","kind":"skill","title":"shadcn-tools","tagline":"Use when editing shadcn/ui code, components.json, cn() utility, Radix primitives, shadcn add workflows, dialogs, forms, data tables, command palettes, or Tailwind component composition.","description":"# shadcn/ui (Flow Tools)\n\n<workflow>\n\n## 🚀 Official shadcn/ui Skills (Highly Recommended)\n\nFor component discovery, CLI mastery, and pattern enforcement, we highly recommend installing the official shadcn/ui agent skills:\n\n- **shadcn**: Official skill for adding components and ensuring proper composition.\n\n**Installation:**\n\n```bash\nnpx skills add shadcn/ui\n```\n\n## Supplemental Patterns\n\nThe patterns below provide additional context for Flow-specific copy-paste workflows and SPA navigation.\n\n---\n\n## SPA Integration Notes\n\nWhen 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.\n\n<example>\n\n```tsx\nimport { Link } from '@tanstack/react-router'\nimport { Button } from \"@/components/ui/button\"\n\n<Button asChild>\n  <Link to=\"/settings\">Go to Settings</Link>\n</Button>\n```\n\n</example>\n\n</workflow>\n\n<guardrails>\n## Guardrails\n\n- **Use `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.\n- **Prefer Semantic Colors:** Use shadcn's semantic color variables (e.g., `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.\n- **Avoid Hardcoded Values:** Never use arbitrary padding, margin, or font sizes. Stick to the Tailwind utility classes provided by the shadcn configuration to maintain design consistency.\n- **Keep Components Atomic:** Refactor shadcn components only for global application consistency. Avoid making a component \"do too much\"; use composition instead.\n</guardrails>\n\n<validation>\n## Validation\n\n- **Confirm `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.\n- **Audit Semantic Theming:** Check that custom styles do not bypass the CSS variable-based theming system (e.g., using `text-red-500` instead of a variable defined in the theme).\n</validation>","tags":["shadcn","tools","flow","cofin","agent-skills","ai-agents","beads","claude-code","codex","cursor","developer-tools","gemini-cli"],"capabilities":["skill","source-cofin","skill-shadcn-tools","topic-agent-skills","topic-ai-agents","topic-beads","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-opencode","topic-plugin","topic-slash-commands","topic-spec-driven-development"],"categories":["flow"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cofin/flow/shadcn-tools","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cofin/flow","source_repo":"https://github.com/cofin/flow","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (2,280 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:39.428Z","embedding":null,"createdAt":"2026-04-23T13:04:01.599Z","updatedAt":"2026-05-18T19:07:39.428Z","lastSeenAt":"2026-05-18T19:07:39.428Z","tsv":"'/components/ui/button':125 '500':313 'ad':56 'add':15,66 'addit':74 'agent':50 'alway':144 'applic':98,198,244 'arbitrari':192,214 'aschild':109,131,147 'atom':237 'audit':261,291 'avoid':209,246 'base':278,305 'bash':63 'bg':184 'bg-secondari':183 'box':208 'button':123 'bypass':300 'caus':104 'check':294 'child':115,159 'class':225,273,285 'cli':38 'cn':10,258,267 'code':8,190,263 'color':172,177,194 'combin':277 'command':21 'compon':25,36,57,93,151,236,240,249,262,279 'components.json':9 'composit':26,61,254 'configur':230 'confirm':257 'consist':234,245 'context':75 'copi':81 'copy-past':80 'css':302 'custom':296 'dark':203 'data':19 'defin':318 'design':233 'dialog':17 'direct':116 'discoveri':37 'e.g':139,179,308 'edit':6 'enforc':42 'ensur':59,100,166,196,265 'especi':275 'event':168 'flow':28,78 'flow-specif':77 'font':218 'form':18 'full':105 'global':243 'go':126 'guardrail':129 'handl':169 'hardcod':188,210 'hex':189 'high':33,44 'import':118,122 'instal':46,62 'instead':186,255,314 'integr':88,135 'invalid':162 'keep':235 'link':114,119,156,164 'maintain':232 'make':247 'margin':216 'masteri':39 'merg':274 'mode':204 'much':252 'navig':86,101 'nest':163 'never':212 'note':89 'npx':64 'offici':30,48,53 'pad':215 'page':97,106 'palett':22 'pass':111,153 'past':82 'pattern':41,69,71 'prefer':170 'prevent':161 'primari':182 'primit':13 'prop':148,290 'proper':60,167 'provid':73,226,289 'radix':12 'react':142 'recommend':34,45 'red':312 'refactor':238 'reload':107 'remain':199 'rout':113,133,155 'router':138,141,143 'secondari':185 'semant':171,176,292 'set':128 'shadcn':2,14,52,150,174,229,239 'shadcn-tool':1 'shadcn/ui':7,27,31,49,67,92 'singl':96 'size':219 'skill':32,51,54,65 'skill-shadcn-tools' 'source-cofin' 'spa':85,87,99,137 'specif':79,284 'stick':220 'style':280,297 'supplement':68 'support':202 'system':307 'tabl':20 'tailwind':24,193,223 'tanstack':140 'tanstack/react-router':121 'text':181,311 'text-primari':180 'text-r':310 'themabl':200 'theme':293,306,321 'tool':3,29 'topic-agent-skills' 'topic-ai-agents' 'topic-beads' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-opencode' 'topic-plugin' 'topic-slash-commands' 'topic-spec-driven-development' 'tsx':117 'usag':260 'use':4,91,108,130,145,173,213,253,270,309 'user':288 'user-provid':287 'util':11,224,259,268 'valid':256 'valu':211 'variabl':178,304,317 'variable-bas':303 'variant':283 'variant-specif':282 'within':94 'workflow':16,83","prices":[{"id":"4221c2dd-fed0-4786-8ee8-21ad98ac93e4","listingId":"0bbe2c4e-bf03-4335-86ab-b90a79e01f63","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cofin","category":"flow","install_from":"skills.sh"},"createdAt":"2026-04-23T13:04:01.599Z"}],"sources":[{"listingId":"0bbe2c4e-bf03-4335-86ab-b90a79e01f63","source":"github","sourceId":"cofin/flow/shadcn-tools","sourceUrl":"https://github.com/cofin/flow/tree/main/skills/shadcn-tools","isPrimary":false,"firstSeenAt":"2026-04-23T13:04:01.599Z","lastSeenAt":"2026-05-18T19:07:39.428Z"}],"details":{"listingId":"0bbe2c4e-bf03-4335-86ab-b90a79e01f63","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cofin","slug":"shadcn-tools","github":{"repo":"cofin/flow","stars":11,"topics":["agent-skills","ai-agents","beads","claude-code","codex","context-driven-development","cursor","developer-tools","gemini-cli","opencode","plugin","slash-commands","spec-driven-development","subagents","tdd","workflow"],"license":"apache-2.0","html_url":"https://github.com/cofin/flow","pushed_at":"2026-04-27T19:07:26Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"577868c633aa06d0c038e660800b15b69e9b685e","skill_md_path":"skills/shadcn-tools/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cofin/flow/tree/main/skills/shadcn-tools"},"layout":"multi","source":"github","category":"flow","frontmatter":{"name":"shadcn-tools","description":"Use when editing shadcn/ui code, components.json, cn() utility, Radix primitives, shadcn add workflows, dialogs, forms, data tables, command palettes, or Tailwind component composition."},"skills_sh_url":"https://skills.sh/cofin/flow/shadcn-tools"},"updatedAt":"2026-05-18T19:07:39.428Z"}}