{"id":"01f5770d-d3f1-4ae0-9822-070e1e3388e4","shortId":"xTQCaj","kind":"skill","title":"cafe","tagline":"Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Cafe Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Cafe.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nA cozy café-inspired interface that blends warm tones, soft typography, and clean layouts to create a relaxed browsing experience\n\n## Style Foundations\n- Visual style: minimal, clean\n- Typography scale: desktop-first expressive scale | Fonts: primary=Poppins, display=Poppins, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#5D4432, secondary=#E9E3DD, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#F9F7F5, text=#3E2B1E\n- Spacing scale: 2/4/8/12/16/24/32/48\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":["cafe","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-cafe","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/cafe","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,303 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:52.175Z","embedding":null,"createdAt":"2026-04-18T22:11:10.052Z","updatedAt":"2026-05-02T12:53:52.175Z","lastSeenAt":"2026-05-02T12:53:52.175Z","tsv":"'1':216 '100':96 '16a34a':118 '2':227 '2.2':133 '2/4/8/12/16/24/32/48':130 '200':97 '3':238 '300':98 '3e2':126 '4':247 '400':99 '5':257 '500':100 '5d4432':114 '6':269 '600':101 '700':102 '800':103 '900':104 'aa':134 'accept':250,314 'access':131,188,249,310,395,416,419 'activ':341 'add':258 'adject':383 'aesthet':414 'alon':384 'altern':202 'ambigu':174,382 'anatomi':241,305 'anchor':385 'anti':260,323 'anti-pattern':259,322 'author':34,214 'avoid':165,169,173 'b1e':127 'behavior':177,246,309,349,366 'blend':60 'brand':52 'brows':18,72 'cafe':1,4,20,36 'cafe-inspir':3 'café':56 'café-inspir':55 'case':369 'checklist':274,329 'clariti':190 'clean':13,66,79 'code':280 'color':105,360 'color-token':359 'compon':183,235,240,302,330,458 'component-level':234,301 'concis':144,208 'concret':194,443 'confid':145 'conflict':412 'consist':184,404 'constraint':232,421 'content':254,316 'content-writ':253 'context':294 'contrast':167 'cozi':2,54 'creat':37,69 'criteria':251,315 'd97706':120 'danger':111,121 'dc2626':122 'default':195,336 'defin':228,333 'depend':380 'describ':347 'design':21,31,51,219,288,297 'design-system':30,287 'desktop':83 'desktop-first':82 'direct':46 'disabl':342 'display':90 'do-rul':436 'e9e3dd':116 'edg':368 'empti':372 'end':270 'engin':49 'error':344 'everi':394,435 'exampl':321,393,420,447 'execut':278 'exist':266,457 'expect':176,256,332 'experi':19,73 'expert':29 'explain':197 'explicit':161,363 'express':85 'f9f7f5':124 'first':84,137,181 'flag':411 'focus':140,212,339 'focus-vis':338 'follow':178 'font':87 'foundat':75,180,231,300 'gate':376 'generat':286 'goal':296 'guidanc':42,206,237,290,455 'guidelin':33,213 'help':146 'hierarchi':157 'hover':337 'implement':40,211,327,401 'implementation-focus':210 'implementation-readi':39 'includ':248,364,453 'inconsist':170,267 'inspir':5,57 'intent':220 'interact':138,159,245,348 'interfac':6,58 'introduc':449 'jetbrain':93 'keep':158,205 'keyboard':136,351 'keyboard-first':135 'label':175,371 'languag':422 'layout':14,67 'least':441 'level':236,303 'load':343 'local':409 'long':370 'low':166 'migrat':263,454 'minim':78 'mission':25 'mono':92,94 'must':397,424 'negoti':428 'neutral':108 'new':451 'non':427 'non-negoti':426 'note':264 'novelti':192 'off':200 'one':222,407,442 'one-off':406 'opinion':207 'optim':410 'output':283 'overflow':374 'pair':434 'palett':106 'pattern':261,324,452 'pointer':352 'poppin':89,91 'possibl':204 'practic':38 'prefer':149,402 'preserv':155 'primari':88,107,113 'priorit':187,418 'prohibit':326 'propos':225 'provid':193 'qa':273,328 'qualiti':375 'raw':153 'readi':41 'recommend':433 'relax':17,71 'relev':346 'requir':282,311,334 'respons':308,365 'restat':217 'review':281 'rhythm':172 'rule':147,162,226,304,331,378,387,429,438 'scale':81,86,129 'secondari':115 'semant':150 'sentenc':223 'skill':23 'skill-cafe' 'soft':10,63 'source-bergside' 'space':128,171,356 'specifi':239 'standard':319 'state':141,160,242,307,335,355,373 'statement':396 'structur':284,293 'style':74,77 'success':109,117 'surfac':123 'system':22,32,289,403 't-exampl':445 'testabl':313,399 'text':125,168 'threshold':391 'token':112,151,229,298,361,390 'tone':9,62,143,318 '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':354 'trade':199 'trade-off':198 'typographi':11,64,80,357 'ui':268 'uncertain':186 'univers':24 'usag':362 'use':47,291,423 'valu':154 'variant':243,306 'visibl':139,340 'visual':76,156 'warm':8,61 'warn':110,119 'wcag':132 'weight':95 'workflow':215 'write':142,255","prices":[{"id":"1a9c4249-9d8b-4c69-b7b2-0f0ce327acd9","listingId":"01f5770d-d3f1-4ae0-9822-070e1e3388e4","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:10.052Z"}],"sources":[{"listingId":"01f5770d-d3f1-4ae0-9822-070e1e3388e4","source":"github","sourceId":"bergside/awesome-design-skills/cafe","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/cafe","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:10.052Z","lastSeenAt":"2026-05-02T12:53:52.175Z"}],"details":{"listingId":"01f5770d-d3f1-4ae0-9822-070e1e3388e4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"cafe","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":"f55eecfa73212e80ce06cfe22095bc5e7517c4c3","skill_md_path":"skills/cafe/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/cafe"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"cafe","license":"MIT","description":"Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/cafe"},"updatedAt":"2026-05-02T12:53:52.175Z"}}