{"id":"5b76f4ae-863d-4773-afaf-5763f1afe554","shortId":"dgW8xh","kind":"skill","title":"cosmic","tagline":"Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Cosmic Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Cosmic.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nCosmic UI/UX design is a futuristic, sci-fi-inspired style characterized by dark themes, vibrant neon accents, and immersive, spatial elements\n\n## Style Foundations\n- Visual style: playful, premium\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Audiowide, display=Audiowide, mono=JetBrains Mono | weights=400\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#3B82F6, secondary=#8B5CF6, 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":["cosmic","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-cosmic","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/cosmic","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,268 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.653Z","embedding":null,"createdAt":"2026-04-18T22:11:14.544Z","updatedAt":"2026-05-02T12:53:52.653Z","lastSeenAt":"2026-05-02T12:53:52.653Z","tsv":"'1':201 '111827':112 '12/14/16/20/24/32':80 '16a34a':104 '2':212 '2.2':118 '3':223 '3b82f6':100 '4':232 '4/8/12/16/24/32':115 '400':90 '5':242 '6':254 '8b5cf6':102 'aa':119 'accent':12,67 'accept':235,299 'access':116,173,234,295,380,401,404 'activ':326 'add':243 'adject':368 'aesthet':6,399 'alon':369 'altern':187 'ambigu':159,367 'anatomi':226,290 'anchor':370 'anti':245,308 'anti-pattern':244,307 'audiowid':83,85 'author':31,199 'avoid':150,154,158 'behavior':162,231,294,334,351 'brand':49 'case':354 'character':61 'checklist':259,314 'clariti':175 'code':265 'color':91,345 'color-token':344 'compon':168,220,225,287,315,443 'component-level':219,286 'concis':129,193 'concret':179,428 'confid':130 'conflict':397 'consist':169,389 'constraint':217,406 'content':239,301 'content-writ':238 'context':279 'contrast':152 'cosmic':1,17,33,50 'creat':34 'criteria':236,300 'd97706':106 'danger':97,107 'dark':8,63 'dc2626':108 'default':180,321 'defin':213,318 'depend':365 'describ':332 'design':18,28,48,52,204,273,282 'design-system':27,272 'direct':43 'disabl':327 'display':84 'do-rul':421 'edg':353 'element':16,71 'empti':357 'end':255 'engin':46 'error':329 'everi':379,420 'exampl':306,378,405,432 'execut':263 'exist':251,442 'expect':161,241,317 'expert':26 'explain':182 'explicit':146,348 'ffffff':110 'fi':5,58 'first':122,166 'flag':396 'focus':125,197,324 'focus-vis':323 'follow':163 'font':81 'foundat':73,165,216,285 'futurist':2,55 'gate':361 'generat':271 'goal':281 'guidanc':39,191,222,275,440 'guidelin':30,198 'help':131 'hierarchi':142 'hover':322 'immers':14,69 'implement':37,196,312,386 'implementation-focus':195 'implementation-readi':36 'includ':233,349,438 'inconsist':155,252 'inspir':59 'intent':205 'interact':123,144,230,333 'introduc':434 'jetbrain':87 'keep':143,190 'keyboard':121,336 'keyboard-first':120 'label':160,356 'languag':407 'least':426 'level':221,288 'load':328 'local':394 'long':355 'low':151 'migrat':248,439 'mission':22 'mono':86,88 'must':382,409 'negoti':413 'neon':11,66 'neutral':94 'new':436 'non':412 'non-negoti':411 'note':249 'novelti':177 'off':185 'one':207,392,427 'one-off':391 'opinion':192 'optim':395 'output':268 'overflow':359 'pair':419 'palett':92 'pattern':246,309,437 'play':76 'pointer':337 'possibl':189 'practic':35 'prefer':134,387 'premium':77 'preserv':140 'primari':82,93,99 'priorit':172,403 'prohibit':311 'propos':210 'provid':178 'qa':258,313 'qualiti':360 'raw':138 'readi':38 'recommend':418 'relev':331 'requir':267,296,319 'respons':293,350 'restat':202 'review':266 'rhythm':157 'rule':132,147,211,289,316,363,372,414,423 'scale':79,114 'sci':4,57 'sci-fi':3 'sci-fi-inspir':56 'secondari':101 'semant':135 'sentenc':208 'skill':20 'skill-cosmic' 'source-bergside' 'space':113,156,341 'spatial':15,70 'specifi':224 'standard':304 'state':126,145,227,292,320,340,358 'statement':381 'structur':269,278 'style':60,72,75 'success':95,103 'surfac':109 'system':19,29,274,388 't-exampl':430 'testabl':298,384 'text':111,153 'theme':9,64 'threshold':376 'token':98,136,214,283,346,375 'tone':128,303 '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':339 'trade':184 'trade-off':183 'typographi':78,342 'ui':253 'ui/ux':51 'uncertain':171 'univers':21 'usag':347 'use':44,276,408 'valu':139 'variant':228,291 'vibrant':10,65 'visibl':124,325 'visual':74,141 'warn':96,105 'wcag':117 'weight':89 'workflow':200 'write':127,240","prices":[{"id":"fed5ed55-2d95-49b6-9525-fbdc1540be02","listingId":"5b76f4ae-863d-4773-afaf-5763f1afe554","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:14.544Z"}],"sources":[{"listingId":"5b76f4ae-863d-4773-afaf-5763f1afe554","source":"github","sourceId":"bergside/awesome-design-skills/cosmic","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/cosmic","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:14.544Z","lastSeenAt":"2026-05-02T12:53:52.653Z"}],"details":{"listingId":"5b76f4ae-863d-4773-afaf-5763f1afe554","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"cosmic","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":"1385ee9c323847e25683e38b0b8df586ebfb44e7","skill_md_path":"skills/cosmic/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/cosmic"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"cosmic","license":"MIT","description":"Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/cosmic"},"updatedAt":"2026-05-02T12:53:52.653Z"}}