{"id":"7794e6be-8ab1-45af-bb69-27ff6867cd9b","shortId":"FGEsYV","kind":"skill","title":"shadcn","tagline":"Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Shadcn Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Shadcn.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nshadcn style design\n\n## Style Foundations\n- Visual style: minimal, clean\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Geist, display=Geist, mono=Fira Code | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary | Tokens: primary=#000000, secondary=#111111, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 4/8/12/16/24/32\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states\n\n## Writing Tone\nconcise, confident, helpful\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n\n## Rules: Don't\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid ambiguous labels\n\n## Expected Behavior\n- Follow the foundations first, then component consistency.\n- When uncertain, prioritize accessibility and clarity over novelty.\n- Provide concrete defaults and explain trade-offs when alternatives are possible.\n- Keep guidance opinionated, concise, and implementation-focused.\n\n## Guideline Authoring Workflow\n1. Restate the design intent in one sentence before proposing rules.\n2. Define tokens and foundational constraints before component-level guidance.\n3. Specify component anatomy, states, variants, and interaction behavior.\n4. Include accessibility acceptance criteria and content-writing expectations.\n5. Add anti-patterns and migration notes for existing inconsistent UI.\n6. End with a QA checklist that can be executed in code review.\n\n## Required Output Structure\nWhen generating design-system guidance, use this structure:\n- Context and goals\n- Design tokens and foundations\n- Component-level rules (anatomy, variants, states, responsive behavior)\n- Accessibility requirements and testable acceptance criteria\n- Content and tone standards with examples\n- Anti-patterns and prohibited implementations\n- QA checklist\n\n## Component Rule Expectations\n- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).\n- Describe interaction behavior for keyboard, pointer, and touch.\n- State spacing, typography, and color-token usage explicitly.\n- Include responsive behavior and edge cases (long labels, empty states, overflow).\n\n## Quality Gates\n- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.\n- Every accessibility statement must be testable in implementation.\n- Prefer system consistency over one-off local optimizations.\n- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.\n\n## Example Constraint Language\n- Use \"must\" for non-negotiable rules and \"should\" for recommendations.\n- Pair every do-rule with at least one concrete don't-example.\n- If introducing a new pattern, include migration guidance for existing components.\n\n<!-- TYPEUI_SH_MANAGED_END -->","tags":["shadcn","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-shadcn","topic-agent-skills","topic-agentic-ai","topic-agentic-workflow","topic-agents","topic-ai-agents","topic-ai-tools","topic-awesome","topic-awesome-list","topic-awesome-readme","topic-claude-design","topic-codex","topic-cursor"],"categories":["awesome-design-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/bergside/awesome-design-skills/shadcn","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add bergside/awesome-design-skills","source_repo":"https://github.com/bergside/awesome-design-skills","install_from":"skills.sh"}},"qualityScore":"0.589","qualityRationale":"deterministic score 0.59 from registry signals: · indexed on github topic:agent-skills · 277 github stars · SKILL.md body (3,146 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-02T12:53:55.314Z","embedding":null,"createdAt":"2026-04-18T22:11:40.912Z","updatedAt":"2026-05-02T12:53:55.314Z","lastSeenAt":"2026-05-02T12:53:55.314Z","tsv":"'000000':84 '1':185 '100':69 '111111':86 '111827':96 '12/14/16/20/24/32':59 '16a34a':88 '2':196 '2.2':102 '200':70 '3':207 '300':71 '4':216 '4/8/12/16/24/32':99 '400':72 '5':226 '500':73 '6':238 '600':74 '700':75 '800':76 '900':77 'aa':103 'accept':219,283 'access':100,157,218,279,364,385,388 'activ':310 'add':227 'adject':352 'aesthet':383 'alon':353 'altern':171 'ambigu':143,351 'anatomi':210,274 'anchor':354 'anti':229,292 'anti-pattern':228,291 'author':29,183 'avoid':134,138,142 'behavior':146,215,278,318,335 'brand':47 'case':338 'checklist':243,298 'clariti':159 'clean':6,56 'code':67,249 'color':78,329 'color-token':328 'compon':7,152,204,209,271,299,427 'component-level':203,270 'concis':113,177 'concret':163,412 'confid':114 'conflict':381 'consist':153,373 'constraint':201,390 'content':223,285 'content-writ':222 'context':263 'contrast':136 'creat':32 'criteria':220,284 'd97706':90 'danger':91 'dc2626':92 'default':164,305 'defin':197,302 'depend':349 'describ':316 'design':3,16,26,46,50,188,257,266 'design-system':25,256 'direct':41 'disabl':311 'display':63 'do-rul':405 'edg':337 'empti':341 'end':239 'engin':44 'error':313 'everi':363,404 'exampl':290,362,389,416 'execut':247 'exist':235,426 'expect':145,225,301 'expert':24 'explain':166 'explicit':130,332 'ffffff':94 'fira':66 'first':13,106,150 'flag':380 'focus':109,181,308 'focus-vis':307 'follow':147 'font':60 'foundat':52,149,200,269 'gate':345 'geist':62,64 'generat':255 'goal':265 'guidanc':37,175,206,259,424 'guidelin':28,182 'help':115 'hierarchi':126 'hover':306 'implement':35,180,296,370 'implementation-focus':179 'implementation-readi':34 'includ':217,333,422 'inconsist':139,236 'intent':189 'interact':107,128,214,317 'introduc':418 'keep':127,174 'keyboard':105,320 'keyboard-first':104 'label':144,340 'languag':391 'least':410 'level':205,272 'load':312 'local':378 'long':339 'low':135 'migrat':232,423 'minim':5,55 'mission':20 'mono':65 'monochrom':8 'must':366,393 'negoti':397 'new':420 'non':396 'non-negoti':395 'note':233 'novelti':161 'off':169 'one':191,376,411 'one-off':375 'opinion':176 'optim':379 'output':252 'overflow':343 'pair':403 'palett':9,79 'pattern':14,230,293,421 'pointer':321 'possibl':173 'practic':33 'prefer':118,371 'preserv':124 'primari':61,80,83 'priorit':156,387 'prohibit':295 'propos':194 'provid':162 'qa':242,297 'qualiti':344 'raw':122 'readi':36 'recommend':402 'relev':315 'requir':251,280,303 'respons':277,334 'restat':186 'review':250 'rhythm':141 'rule':116,131,195,273,300,347,356,398,407 'scale':58,98 'secondari':81,85 'semant':119 'sentenc':192 'shadcn':1,15,31,48 'shadcn/ui-inspired':2 'skill':18 'skill-shadcn' 'source-bergside' 'space':97,140,325 'specifi':208 'standard':288 'state':110,129,211,276,304,324,342 'statement':365 'structur':253,262 'style':49,51,54 'success':87 'surfac':93 'system':17,27,258,372 't-exampl':414 'testabl':282,368 'text':95,137 'threshold':360 'token':82,120,198,267,330,359 'tone':112,287 'topic-agent-skills' 'topic-agentic-ai' 'topic-agentic-workflow' 'topic-agents' 'topic-ai-agents' 'topic-ai-tools' 'topic-awesome' 'topic-awesome-list' 'topic-awesome-readme' 'topic-claude-design' 'topic-codex' 'topic-cursor' 'touch':323 'trade':168 'trade-off':167 'typographi':57,326 'ui':237 'uncertain':155 'univers':19 'usag':331 'use':42,260,392 'util':12 'utility-first':11 'valu':123 'variant':212,275 'visibl':108,309 'visual':53,125 'warn':89 'wcag':101 'weight':68 'workflow':184 'write':111,224","prices":[{"id":"be7da1fc-12f8-4445-8887-4a26622c5bd1","listingId":"7794e6be-8ab1-45af-bb69-27ff6867cd9b","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"bergside","category":"awesome-design-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:11:40.912Z"}],"sources":[{"listingId":"7794e6be-8ab1-45af-bb69-27ff6867cd9b","source":"github","sourceId":"bergside/awesome-design-skills/shadcn","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/shadcn","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:40.912Z","lastSeenAt":"2026-05-02T12:53:55.314Z"}],"details":{"listingId":"7794e6be-8ab1-45af-bb69-27ff6867cd9b","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"shadcn","github":{"repo":"bergside/awesome-design-skills","stars":277,"topics":["agent-skills","agentic-ai","agentic-workflow","agents","ai","ai-agents","ai-tools","awesome","awesome-list","awesome-readme","claude-design","codex","cursor","design","design-md","design-system","google-stitch","skills"],"license":"mit","html_url":"https://github.com/bergside/awesome-design-skills","pushed_at":"2026-05-01T09:16:36Z","description":"List of awesome DESIGN.md and SKILL.md design skill files for agentic tools like Claude Design, Google Stitch, Codex, Cursor, and other AI tools","skill_md_sha":"4f93c04df5c685b8a6f845e5063f39491aad3fd0","skill_md_path":"skills/shadcn/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/shadcn"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"shadcn","license":"MIT","description":"Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/shadcn"},"updatedAt":"2026-05-02T12:53:55.314Z"}}