{"id":"a7ee26a9-c3e6-4978-88dc-7cde2ece2869","shortId":"p3PCC4","kind":"skill","title":"retro","tagline":"Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Retro Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Retro.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\n\n\n## Style Foundations\n- Visual style: high-contrast, retro\n- Typography scale: desktop-first expressive scale | Fonts: primary=Macondo, display=Macondo, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\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":["retro","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-retro","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/retro","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,177 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.249Z","embedding":null,"createdAt":"2026-04-18T22:11:40.180Z","updatedAt":"2026-05-02T12:53:55.249Z","lastSeenAt":"2026-05-02T12:53:55.249Z","tsv":"'1':194 '100':75 '111827':105 '16a34a':97 '2':205 '2.2':111 '200':76 '3':216 '300':77 '3b82f6':93 '4':225 '4/8/12/16/24/32':108 '400':78 '5':235 '500':79 '6':247 '600':80 '700':81 '800':82 '8b5cf6':95 '900':83 'aa':112 'accept':228,292 'access':109,166,227,288,373,394,397 'activ':319 'add':236 'adject':361 'aesthet':392 'alon':362 'altern':180 'ambigu':152,360 'anatomi':219,283 'anchor':363 'anti':238,301 'anti-pattern':237,300 'author':32,192 'avoid':143,147,151 'behavior':155,224,287,327,344 'brand':50 'case':347 'checklist':252,307 'clariti':168 'code':258 'color':84,338 'color-token':337 'compon':161,213,218,280,308,436 'component-level':212,279 'concis':122,186 'concret':172,421 'confid':123 'conflict':390 'consist':162,382 'constraint':210,399 'content':232,294 'content-writ':231 'context':272 'contrast':11,57,145 'creat':35 'criteria':229,293 'd97706':99 'danger':90,100 'dc2626':101 'default':173,314 'defin':206,311 'depend':358 'describ':325 'design':3,19,29,49,197,266,275 'design-system':28,265 'desktop':62 'desktop-first':61 'direct':44 'disabl':320 'display':69 'do-rul':414 'edg':346 'element':17 'empti':350 'end':248 'engin':47 'error':322 'everi':372,413 'exampl':299,371,398,425 'execut':256 'exist':244,435 'expect':154,234,310 'expert':27 'explain':175 'explicit':139,341 'express':64 'ffffff':103 'first':63,115,159 'flag':389 'focus':118,190,317 'focus-vis':316 'follow':156 'font':66 'foundat':52,158,209,278 'gate':354 'generat':264 'goal':274 'guidanc':40,184,215,268,433 'guidelin':31,191 'help':124 'hierarchi':135 'high':10,56 'high-contrast':9,55 'hover':315 'implement':38,189,305,379 'implementation-focus':188 'implementation-readi':37 'includ':226,342,431 'inconsist':148,245 'inspir':7 'intent':198 'interact':116,137,223,326 'introduc':427 'jetbrain':72 'keep':136,183 'keyboard':114,329 'keyboard-first':113 'label':153,349 'languag':400 'least':419 'level':214,281 'load':321 'local':387 'long':348 'low':144 'macondo':68,70 'migrat':241,432 'mission':23 'mono':71,73 'must':375,402 'negoti':406 'neutral':87 'new':429 'non':405 'non-negoti':404 'nostalg':15 'note':242 'novelti':170 'off':178 'one':200,385,420 'one-off':384 'opinion':185 'optim':388 'output':261 'overflow':352 'pair':412 'palett':13,85 'pattern':239,302,430 'pointer':330 'possibl':182 'practic':36 'prefer':127,380 'preserv':133 'primari':67,86,92 'priorit':165,396 'prohibit':304 'propos':203 'provid':171 'qa':251,306 'qualiti':353 'raw':131 'readi':39 'recommend':411 'relev':324 'requir':260,289,312 'respons':286,343 'restat':195 'retro':1,12,18,34,58 'review':259 'rhythm':150 'rule':125,140,204,282,309,356,365,407,416 'scale':60,65,107 'secondari':94 'semant':128 'sentenc':201 'skill':21 'skill-retro' 'source-bergside' 'space':106,149,334 'specifi':217 'standard':297 'state':119,138,220,285,313,333,351 'statement':374 'structur':262,271 'style':51,54 'success':88,96 'surfac':102 'system':20,30,267,381 't-exampl':423 'testabl':291,377 'text':104,146 'threshold':369 'throwback':2 'token':91,129,207,276,339,368 'tone':121,296 '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':332 'trade':177 'trade-off':176 'typographi':8,59,335 'ui':246 'uncertain':164 'univers':22 'usag':340 'use':45,269,401 'valu':132 'variant':221,284 'vintag':6 'vintage-inspir':5 'visibl':117,318 'visual':16,53,134 'warn':89,98 'wcag':110 'weight':74 'workflow':193 'write':120,233","prices":[{"id":"45d057a8-1358-4e5b-a739-49c51dfd07f1","listingId":"a7ee26a9-c3e6-4978-88dc-7cde2ece2869","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.180Z"}],"sources":[{"listingId":"a7ee26a9-c3e6-4978-88dc-7cde2ece2869","source":"github","sourceId":"bergside/awesome-design-skills/retro","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/retro","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:40.180Z","lastSeenAt":"2026-05-02T12:53:55.249Z"}],"details":{"listingId":"a7ee26a9-c3e6-4978-88dc-7cde2ece2869","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"retro","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":"f09f791ebbb273a51ef8527162f618f8cc7056ba","skill_md_path":"skills/retro/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/retro"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"retro","license":"MIT","description":"Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/retro"},"updatedAt":"2026-05-02T12:53:55.249Z"}}