{"id":"ef4f5920-fb5d-491d-99e8-32fe6a7ef090","shortId":"XZ7ueC","kind":"skill","title":"contemporary","tagline":"Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# contemporary Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for contemporary.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nContemporary UI/UX design focuses on, minimalist, accessible, and high-performance, featuring Bento grids, dark mode, and, AI-powered personalization\n\n## Style Foundations\n- Visual style: modern, minimal, bold, playful\n- Typography scale: desktop-first expressive scale | Fonts: primary=Jost, display=Jost, mono=Overpass Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral | Tokens: primary=#C800DF, secondary=#E60076, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827\n- Spacing scale: comfortable density mode\n\n\n## Accessibility\nWCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support\n\n## Writing Tone\nconcise, confident, helpful, friendly, professional\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":["contemporary","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-contemporary","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/contemporary","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,485 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.523Z","embedding":null,"createdAt":"2026-04-18T22:11:13.045Z","updatedAt":"2026-05-02T12:53:52.523Z","lastSeenAt":"2026-05-02T12:53:52.523Z","tsv":"'1':238 '100':97 '111827':125 '16a34a':117 '2':249 '2.2':133 '200':98 '3':260 '300':99 '4':269 '400':100 '44px':155 '5':279 '500':101 '6':291 '600':102 '700':103 '800':104 '900':105 'aa':134 'accept':272,336 'access':17,58,131,210,271,332,417,438,441 'activ':363 'add':280 'adject':405 'aesthet':436 'ai':70 'ai-pow':69 'alon':406 'altern':224 'ambigu':196,404 'anatomi':263,327 'anchor':407 'anti':282,345 'anti-pattern':281,344 'aria':145 'author':33,236 'avoid':187,191,195 'behavior':199,268,331,371,388 'bento':8,64 'bold':79 'brand':51 'c800df':113 'case':391 'checklist':296,351 'clariti':212 'code':302 'color':106,382 'color-token':381 'comfort':128 'compon':205,257,262,324,352,480 'component-level':256,323 'concis':164,230 'concret':216,465 'confid':165 'conflict':434 'consist':206,426 'constraint':254,443 'contemporari':1,19,35,52 'content':276,338 'content-writ':275 'context':316 'contrast':160,189 'creat':36 'criteria':273,337 'current':3 'current-era':2 'd97706':119 'danger':120 'dark':10,66 'dc2626':121 'default':217,358 'defin':250,355 'densiti':129 'depend':402 'describ':369 'design':6,20,30,50,54,241,310,319 'design-system':29,309 'desktop':84 'desktop-first':83 'direct':45 'disabl':364 'display':91 'do-rul':458 'e60076':115 'edg':390 'empti':394 'end':292 'engin':48 'era':4 'error':366 'everi':416,457 'exampl':343,415,442,469 'execut':300 'exist':288,479 'expect':198,278,354 'expert':28 'explain':219 'explicit':183,385 'express':86 'featur':63 'ffffff':123 'first':85,137,203 'flag':433 'focus':55,140,234,361 'focus-vis':360 'follow':200 'font':88 'foundat':74,202,253,322 'friend':167 'gate':398 'generat':308 'goal':318 'grid':9,65 'guidanc':41,228,259,312,477 'guidelin':32,235 'help':166 'hierarchi':179 'high':15,61,159 'high-contrast':158 'high-perform':14,60 'hover':359 'html':143 'implement':39,233,349,423 'implementation-focus':232 'implementation-readi':38 'includ':270,386,475 'inconsist':192,289 'intent':242 'interact':138,181,267,370 'introduc':471 'jost':90,92 'keep':180,227 'keyboard':136,373 'keyboard-first':135 'label':150,197,393 'languag':444 'layout':18 'least':463 'level':258,325 'load':365 'local':431 'long':392 'low':188 'migrat':285,476 'minim':78 'minimalist':5,57 'mission':24 'mode':11,67,130 'modern':77 'mono':93,95 'motion':153 'must':419,446 'negoti':450 'neutral':110 'new':473 'non':449 'non-negoti':448 'note':286 'novelti':214 'off':222 'one':244,429,464 'one-off':428 'opinion':229 'optim':432 'output':305 'overflow':396 'overpass':94 'pair':456 'palett':107 'pattern':283,346,474 'perform':16,62 'person':72 'play':80 'pointer':374 'possibl':226 'power':71 'practic':37 'prefer':171,424 'preserv':177 'primari':89,108,112 'priorit':209,440 'profession':168 'prohibit':348 'propos':247 'provid':215 'qa':295,350 'qualiti':397 'raw':175 'reader':148 'readi':40 'recommend':455 'reduc':152 'reduced-mot':151 'relev':368 'requir':304,333,356 'respons':330,387 'restat':239 'review':303 'rhythm':194 'rule':169,184,248,326,353,400,409,451,460 'scale':82,87,127 'screen':147 'screen-read':146 'secondari':109,114 'semant':142,172 'sentenc':245 'skill':22 'skill-contemporary' 'source-bergside' 'space':126,193,378 'specifi':261 'standard':341 'state':141,182,264,329,357,377,395 'statement':418 'structur':306,315 'style':73,76 'success':116 'support':12,154,161 'surfac':122 'system':21,31,311,425 't-exampl':467 'target':157 'test':149 'testabl':335,421 'text':124,190 'threshold':413 'token':111,173,251,320,383,412 'tone':163,340 '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':156,376 'trade':221 'trade-off':220 'typographi':81,379 'ui':290 'ui/ux':53 'uncertain':208 'univers':23 'usag':384 'use':46,313,445 'valu':176 'variant':265,328 'visibl':139,362 'visual':75,178 'warn':118 'wcag':132 'weight':96 'workflow':237 'write':162,277","prices":[{"id":"00707015-4402-43f7-81e2-6a89b884860e","listingId":"ef4f5920-fb5d-491d-99e8-32fe6a7ef090","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:13.045Z"}],"sources":[{"listingId":"ef4f5920-fb5d-491d-99e8-32fe6a7ef090","source":"github","sourceId":"bergside/awesome-design-skills/contemporary","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/contemporary","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:13.045Z","lastSeenAt":"2026-05-02T12:53:52.523Z"}],"details":{"listingId":"ef4f5920-fb5d-491d-99e8-32fe6a7ef090","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"contemporary","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":"1c7fa045bca3ce7fba540212ad04bede820f2d07","skill_md_path":"skills/contemporary/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/contemporary"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"contemporary","license":"MIT","description":"Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/contemporary"},"updatedAt":"2026-05-02T12:53:52.523Z"}}