{"id":"4c230e47-df51-4ca1-8e27-8ed3f505a06f","shortId":"6S7YYf","kind":"skill","title":"vintage","tagline":"1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Vintage Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Vintage.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nVintage design style revives aesthetics from the 1950s–1990s, blending nostalgia with modern functionality through skeuomorphic elements, grainy textures, and retro color palettes\n\n## Style Foundations\n- Visual style: clean, vintage, retro\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Silkscreen, display=Silkscreen, mono=JetBrains Mono | weights=400, 700\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#008080, secondary=#C0C0C0, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#C0C0C0, text=#000000\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":["vintage","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-vintage","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/vintage","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,319 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.912Z","embedding":null,"createdAt":"2026-04-18T22:11:46.871Z","updatedAt":"2026-05-02T12:53:55.912Z","lastSeenAt":"2026-05-02T12:53:55.912Z","tsv":"'000000':117 '008080':105 '1':206 '12/14/16/20/24/32':84 '16a34a':109 '1950s':3,59 '1950s-1990s':2 '1990s':4,60 '2':217 '2.2':123 '3':228 '4':237 '4/8/12/16/24/32':120 '400':94 '5':247 '6':259 '700':95 'aa':124 'accept':240,304 'access':121,178,239,300,385,406,409 'activ':331 'add':248 'adject':373 'aesthet':56,404 'alon':374 'altern':192 'ambigu':164,372 'anatomi':231,295 'anchor':375 'anti':250,313 'anti-pattern':249,312 'author':33,204 'avoid':155,159,163 'behavior':167,236,299,339,356 'blend':61 'brand':51 'c0c0c0':107,115 'case':359 'checklist':264,319 'clariti':180 'clean':79 'code':270 'color':12,73,96,350 'color-token':349 'compon':173,225,230,292,320,448 'component-level':224,291 'concis':134,198 'concret':184,433 'confid':135 'conflict':402 'consist':174,394 'constraint':222,411 'content':244,306 'content-writ':243 'context':284 'contrast':157 'creat':36 'criteria':241,305 'd97706':111 'danger':102,112 'dc2626':113 'default':185,326 'defin':218,323 'depend':370 'describ':337 'design':20,30,50,53,209,278,287 'design-system':29,277 'direct':45 'disabl':332 'display':88 'do-rul':426 'edg':358 'element':68 'empti':362 'end':260 'engin':48 'error':334 'everi':384,425 'exampl':311,383,410,437 'execut':268 'exist':256,447 'expect':166,246,322 'expert':28 'explain':187 'explicit':151,353 'first':127,171 'flag':401 'focus':130,202,329 'focus-vis':328 'follow':168 'font':85 'foundat':76,170,221,290 'function':65 'gate':366 'generat':276 'goal':286 'graini':9,69 'guidanc':41,196,227,280,445 'guidelin':32,203 'help':136 'hierarchi':147 'hover':327 'implement':39,201,317,391 'implementation-focus':200 'implementation-readi':38 'includ':238,354,443 'inconsist':160,257 'intent':210 'interact':128,149,235,338 'introduc':439 'jetbrain':91 'keep':148,195 'keyboard':126,341 'keyboard-first':125 'label':165,361 'languag':412 'least':431 'level':226,293 'load':333 'local':399 'long':360 'low':156 'migrat':253,444 'mission':24 'modern':64 'mono':90,92 'must':387,414 'negoti':418 'neutral':99 'new':441 'non':417 'non-negoti':416 'nostalgia':5,62 'note':254 'novelti':182 'off':190 'one':212,397,432 'one-off':396 'opinion':197 'optim':400 'output':273 'overflow':364 'pair':424 'palett':13,74,97 'pattern':251,314,442 'pixel':16 'pixel-styl':15 'pointer':342 'possibl':194 'practic':37 'prefer':139,392 'preserv':145 'primari':86,98,104 'priorit':177,408 'prohibit':316 'propos':215 'provid':183 'qa':263,318 'qualiti':365 'raw':143 'readi':40 'recommend':423 'relev':336 'requir':272,301,324 'respons':298,355 'restat':207 'retro':11,72,81 'review':271 'reviv':55 'rhythm':162 'rule':137,152,216,294,321,368,377,419,428 'scale':83,119 'secondari':106 'semant':140 'sentenc':213 'silkscreen':87,89 'skeuomorph':7,67 'skill':22 'skill-vintage' 'source-bergside' 'space':118,161,346 'specifi':229 'standard':309 'state':131,150,232,297,325,345,363 'statement':386 'structur':274,283 'style':17,54,75,78 'success':100,108 'surfac':114 'system':21,31,279,393 't-exampl':435 'testabl':303,389 'text':116,158 'textur':10,70 'threshold':381 'token':103,141,219,288,351,380 'tone':133,308 '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':8,344 'trade':189 'trade-off':188 'typographi':18,82,347 'ui':258 'uncertain':176 'univers':23 'usag':352 'use':46,281,413 'valu':144 'variant':233,296 'vintag':1,19,35,52,80 'visibl':129,330 'visual':77,146 'warn':101,110 'wcag':122 'weight':93 'workflow':205 'write':132,245","prices":[{"id":"82c12d0d-addd-4d11-b1ed-2dc657fc6741","listingId":"4c230e47-df51-4ca1-8e27-8ed3f505a06f","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:46.871Z"}],"sources":[{"listingId":"4c230e47-df51-4ca1-8e27-8ed3f505a06f","source":"github","sourceId":"bergside/awesome-design-skills/vintage","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/vintage","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:46.871Z","lastSeenAt":"2026-05-02T12:53:55.912Z"}],"details":{"listingId":"4c230e47-df51-4ca1-8e27-8ed3f505a06f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"vintage","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":"97403d4d2b356101b080add9938a826be41cefd5","skill_md_path":"skills/vintage/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/vintage"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"vintage","license":"MIT","description":"1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/vintage"},"updatedAt":"2026-05-02T12:53:55.912Z"}}