{"id":"66afb5b8-c4fe-4421-94fc-69058cb617dd","shortId":"54YFYw","kind":"skill","title":"claude","tagline":"A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Claude Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Claude.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nA research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink. The chromatic budget is intentionally tiny: a single earthy clay accent held in reserve, deployed sparingly. Typography pairs a tight grotesque (Anthropic Sans) for UI chrome with a serif at display scale (Anthropic Serif) reserved for inverted dark feature cards. Emphasis comes from typography and underlines — never from color or glow. Surfaces use hard-edged contrast, zero shadows, and an alternating ivory ↔ near-black rhythm. Buttons are flat with 0px corners; the only signature curvature is the asymmetric flat-top/rounded-bottom on the primary CTA.\n\n## Style Foundations\n- Visual style: modern, minimal, clean\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Anthropic Sans, display=Anthropic Sans, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral, success, warning, danger | Tokens: primary=#141413, secondary=#FAF9F6, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: 4/8/12/16/24/32\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":["claude","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-claude","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/claude","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.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 826 github stars · SKILL.md body (3,946 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-18T18:53:20.662Z","embedding":null,"createdAt":"2026-05-06T12:54:20.186Z","updatedAt":"2026-05-18T18:53:20.662Z","lastSeenAt":"2026-05-18T18:53:20.662Z","tsv":"'/rounded-bottom':180 '0px':168 '1':326 '100':206 '111827':237 '12/14/16/20/24/32':194 '141413':225 '16a34a':229 '2':337 '2.2':243 '200':207 '3':348 '300':208 '4':357 '4/8/12/16/24/32':240 '400':209 '5':367 '500':210 '6':379 '600':211 '700':212 '800':213 '900':214 'aa':244 'accent':107 'accept':360,424 'access':241,298,359,420,505,526,529 'achromat':14,78 'activ':451 'add':368 'adject':493 'aesthet':6,70,524 'almost':13,77 'alon':494 'altern':158,312 'ambigu':284,492 'anatomi':351,415 'anchor':495 'anthrop':118,129,197,200 'anti':370,433 'anti-pattern':369,432 'asymmetr':176 'author':47,324 'authorit':11,75 'avoid':275,279,283 'behavior':287,356,419,459,476 'black':27,91,162 'brand':65 'budget':99 'button':164 'card':136 'case':479 'checklist':384,439 'chromat':98 'chrome':122 'clariti':300 'claud':1,33,49 'clay':106 'clean':191 'code':390 'color':145,215,470 'color-token':469 'come':138 'compon':293,345,350,412,440,568 'component-level':344,411 'concis':254,318 'concret':304,553 'confid':255 'conflict':522 'consist':294,514 'constraint':342,531 'content':364,426 'content-writ':363 'context':404 'contrast':153,277 'corner':169 'creat':50 'criteria':361,425 'cta':184 'curvatur':173 'd97706':231 'danger':222,232 'dark':134 'dc2626':233 'default':305,446 'defin':338,443 'depend':490 'deploy':111 'describ':457 'design':34,44,64,329,398,407 'design-system':43,397 'direct':59 'disabl':452 'display':127,199 'do-rul':546 'domin':31,95 'earthi':105 'edg':152,478 'editori':12,76 'emphasi':137 'empti':482 'end':380 'engin':62 'error':454 'everi':504,545 'exampl':431,503,530,557 'execut':388 'exist':376,567 'expect':286,366,442 'expert':42 'explain':307 'explicit':271,473 'faf9f6':227 'featur':135 'ffffff':235 'first':247,291 'flag':521 'flat':166,178 'flat-top':177 'focus':250,322,449 'focus-vis':448 'follow':288 'font':195 'foundat':186,290,341,410 'gate':486 'generat':396 'glow':147 'goal':406 'grotesqu':117 'guidanc':55,316,347,400,565 'guidelin':46,323 'hard':151 'hard-edg':150 'held':108 'help':256 'hierarchi':267 'hover':447 'implement':53,321,437,511 'implementation-focus':320 'implementation-readi':52 'includ':358,474,563 'inconsist':280,377 'ink':32,96 'intent':101,330 'interact':248,269,355,458 'introduc':559 'invert':133 'ivori':19,83,159 'jetbrain':203 'journal':5,69 'keep':268,315 'keyboard':246,461 'keyboard-first':245 'label':285,481 'languag':532 'least':551 'level':346,413 'live':16,80 'load':453 'local':519 'long':480 'low':276 'migrat':373,564 'minim':190 'mission':38 'modern':189 'mono':202,204 'must':507,534 'near':26,90,161 'near-black':25,89,160 'negoti':538 'neutral':219 'never':21,85,143 'new':561 'non':537 'non-negoti':536 'note':374 'novelti':302 'off':310 'one':332,517,552 'one-off':516 'opinion':317 'optim':520 'output':393 'overflow':484 'page':15,79 'pair':114,544 'palett':216 'parchment':20,84 'pattern':371,434,562 'pointer':462 'possibl':314 'practic':51 'prefer':259,512 'preserv':265 'primari':183,196,217,224 'print':7,71 'priorit':297,528 'prohibit':436 'propos':335 'provid':303 'pure':22,86 'qa':383,438 'qualiti':485 'raw':263 'readi':54 'recommend':543 'relev':456 'requir':392,421,444 'research':4,68 'research-journ':3,67 'reserv':110,131 'respons':418,475 'restat':327 'review':391 'rhythm':163,282 'rule':257,272,336,414,441,488,497,539,548 'san':119,198,201 'scale':128,193,239 'secondari':218,226 'semant':260 'sentenc':333 'serif':125,130 'shadow':155 'signatur':172 'singl':104 'skill':36 'skill-claude' 'slate':28,92 'source-bergside' 'space':238,281,466 'spare':112 'specifi':349 'standard':429 'state':251,270,352,417,445,465,483 'statement':506 'stone':10,74 'structur':394,403 'style':185,188 'success':220,228 'surfac':148,234 'system':35,45,399,513 't-exampl':555 'testabl':423,509 'text':236,278 'threshold':501 'tight':116 'tini':102 'token':223,261,339,408,471,500 'tone':253,428 'top':179 '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':464 'trade':309 'trade-off':308 'typographi':113,140,192,467 'ui':121,378 'uncertain':296 'underlin':142 'univers':37 'usag':472 'use':60,149,401,533 'valu':264 'variant':353,416 'visibl':249,450 'visual':187,266 'warm':9,18,73,82 'warn':221,230 'wcag':242 'weight':205 'white':23,87 'workflow':325 'write':252,365 'zero':154","prices":[{"id":"7ea4d076-210d-421e-88af-0c5dcba4dd1e","listingId":"66afb5b8-c4fe-4421-94fc-69058cb617dd","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-05-06T12:54:20.186Z"}],"sources":[{"listingId":"66afb5b8-c4fe-4421-94fc-69058cb617dd","source":"github","sourceId":"bergside/awesome-design-skills/claude","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/claude","isPrimary":false,"firstSeenAt":"2026-05-06T12:54:20.186Z","lastSeenAt":"2026-05-18T18:53:20.662Z"}],"details":{"listingId":"66afb5b8-c4fe-4421-94fc-69058cb617dd","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"claude","github":{"repo":"bergside/awesome-design-skills","stars":826,"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-06T18:26:50Z","description":"List of 67 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":"a4edccae3a000e805231fdfeaba68676b95b1774","skill_md_path":"skills/claude/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/claude"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"claude","description":"A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/claude"},"updatedAt":"2026-05-18T18:53:20.662Z"}}