{"id":"0bbe2c4e-bf03-4335-86ab-b90a79e01f63","shortId":"BsfEJG","kind":"skill","title":"shadcn-tools","tagline":"Flow-specific supplemental patterns for shadcn/ui. 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 t","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-04-24T07:03:19.971Z","embedding":null,"createdAt":"2026-04-23T13:04:01.599Z","updatedAt":"2026-04-24T07:03:19.971Z","lastSeenAt":"2026-04-24T07:03:19.971Z","tsv":"'/components/ui/button':142 '500':330 'activ':13 'ad':73 'add':33,83 'addit':91 'agent':67 'alway':161 'applic':115,215,261 'arbitrari':209,231 'aschild':126,148,164 'atom':254 'audit':278,308 'auto':12 'auto-activ':11 'avoid':226,263 'base':295,322 'bash':80 'bg':201 'bg-secondari':200 'box':225 'button':140 'bypass':317 'caus':121 'check':311 'child':132,176 'class':242,290,302 'cli':39,55 'cn':18,28,275,284 'code':207,280 'color':189,194,211 'combin':294 'compon':21,37,38,53,74,110,168,253,257,266,279,296 'components.json':15 'composit':78,271 'config':17 'configur':247 'confirm':274 'consist':251,262 'context':92 'copi':35,98 'copy-past':34,97 'css':319 'custom':313 'dark':220 'data':42 'defin':335 'design':250 'dialog':40 'direct':133 'discoveri':54 'e.g':156,196,325 'enforc':59 'ensur':76,117,183,213,282 'especi':292 'event':185 'expertis':22 'flow':5,45,95 'flow-specif':4,94 'font':235 'form':41 'full':122 'global':260 'go':143 'guardrail':146 'handl':186 'hardcod':205,227 'hex':206 'high':50,61 'import':135,139 'instal':63,79 'instead':203,272,331 'integr':105,152 'invalid':179 'keep':252 'link':131,136,173,181 'maintain':249 'make':264 'margin':233 'masteri':56 'merg':291 'mode':221 'much':269 'navig':103,118 'nest':180 'never':229 'note':106 'npx':81 'offici':47,65,70 'pad':232 'page':114,123 'pass':128,170 'past':36,99 'pattern':8,58,86,88 'prefer':187 'prevent':178 'primari':199 'primit':31 'prop':165,307 'proper':77,184 'provid':90,243,306 'radix':30 'react':159 'recommend':51,62 'red':329 'refactor':255 'reload':124 'remain':216 'rout':130,150,172 'router':155,158,160 'secondari':202 'semant':188,193,309 'set':145 'shadcn':2,16,32,69,167,191,246,256 'shadcn-tool':1 'shadcn/ui':10,24,44,48,66,84,109 'singl':113 'size':236 'skill':49,68,71,82 'skill-shadcn-tools' 'source-cofin' 'spa':102,104,116,154 'specif':6,96,301 'stick':237 'style':297,314 'supplement':7,85 'support':219 'system':324 'tailwind':20,210,240 'tanstack':157 'tanstack/react-router':138 'text':198,328 'text-primari':197 'text-r':327 'themabl':217 'theme':310,323,338 'tool':3,46 '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':134 'usag':277 'use':25,27,108,125,147,162,190,230,270,287,326 'user':305 'user-provid':304 'util':19,29,241,276,285 'valid':273 'valu':228 'variabl':195,321,334 'variable-bas':320 'variant':300 'variant-specif':299 'within':111 'workflow':100","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-04-24T07:03:19.971Z"}],"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-19T23:22:27Z","description":"Context-Driven Development toolkit for AI agents — spec-first planning, TDD workflow, and Beads integration.","skill_md_sha":"c987a4a136ed85a953d080e18b1299ec9b5e830f","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":"Flow-specific supplemental patterns for shadcn/ui. 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."},"skills_sh_url":"https://skills.sh/cofin/flow/shadcn-tools"},"updatedAt":"2026-04-24T07:03:19.971Z"}}