{"id":"2dd67e9b-e65a-4368-b367-4dc127a69bf8","shortId":"x7Eu2H","kind":"skill","title":"vibrant","tagline":"Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Vibrant Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Vibrant.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nVibrant style \n\n## Style Foundations\n- Visual style: modern, clean, bold, playful\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=Noto Sans, display=Fascinate, mono=Fira Code | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral, success | Tokens: primary=#7C61D4, secondary=#EAAE87, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#2F281D\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, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support\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":["vibrant","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-vibrant","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/vibrant","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,285 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.849Z","embedding":null,"createdAt":"2026-04-18T22:11:46.126Z","updatedAt":"2026-05-02T12:53:55.849Z","lastSeenAt":"2026-05-02T12:53:55.849Z","tsv":"'1':205 '100':71 '14/16/18/24/32/40':60 '16a34a':92 '2':216 '2.2':106 '2/4/8/12/16/24/32/48':103 '200':72 '2f281d':100 '3':227 '300':73 '4':236 '400':74 '44px':124 '5':246 '500':75 '6':258 '600':76 '700':77 '7c61d4':88 '800':78 '900':79 'aa':107 'accent':10 'accept':239,303 'access':104,177,238,299,384,405,408 'activ':330 'add':247 'adject':372 'aesthet':403 'alon':373 'altern':191 'ambigu':163,371 'anatomi':230,294 'anchor':374 'anti':249,312 'anti-pattern':248,311 'author':29,203 'avoid':154,158,162 'behavior':166,235,298,338,355 'bold':6,56 'brand':47 'case':358 'checklist':263,318 'clariti':179 'clean':55 'code':69,269 'color':3,80,349 'color-token':348 'compon':172,224,229,291,319,447 'component-level':223,290 'concis':133,197 'concret':183,432 'confid':134 'conflict':401 'consist':173,393 'constraint':221,410 'content':243,305 'content-writ':242 'context':283 'contrast':129,156 'creat':32 'criteria':240,304 'd97706':94 'danger':95 'dc2626':96 'default':184,325 'defin':217,322 'depend':369 'describ':336 'design':4,16,26,46,208,277,286 'design-system':25,276 'direct':41 'disabl':331 'display':65 'do-rul':425 'dynam':12 'eaae87':90 'edg':357 'empti':361 'end':259 'energi':14 'engin':44 'error':333 'everi':383,424 'exampl':310,382,409,436 'execut':267 'exist':255,446 'expect':165,245,321 'expert':24 'explain':186 'explicit':150,352 'fascin':66 'ffffff':98 'fira':68 'first':110,170 'flag':400 'focus':113,201,328 'focus-vis':327 'follow':167 'font':61 'foundat':51,169,220,289 'gate':365 'generat':275 'goal':285 'guidanc':37,195,226,279,444 'guidelin':28,202 'help':135 'hierarchi':146 'high':128 'high-contrast':127 'hover':326 'implement':35,200,316,390 'implementation-focus':199 'implementation-readi':34 'includ':237,353,442 'inconsist':159,256 'intent':209 'interact':111,148,234,337 'introduc':438 'keep':147,194 'keyboard':109,340 'keyboard-first':108 'label':119,164,360 'languag':411 'least':430 'level':225,292 'live':2 'load':332 'local':398 'long':359 'low':155 'migrat':252,443 'mission':20 'modern':54 'mono':67 'motion':122 'must':386,413 'negoti':417 'neutral':84 'new':440 'non':416 'non-negoti':415 'note':253 'noto':63 'novelti':181 'off':189 'one':211,396,431 'one-off':395 'opinion':196 'optim':399 'output':272 'overflow':363 'pair':423 'palett':81 'pattern':250,313,441 'play':7,57 'pointer':341 'possibl':193 'practic':33 'prefer':138,391 'preserv':144 'primari':62,82,87 'priorit':176,407 'prohibit':315 'propos':214 'provid':182 'qa':262,317 'qualiti':364 'raw':142 'reader':117 'readi':36 'recommend':422 'reduc':121 'reduced-mot':120 'relev':335 'requir':271,300,323 'respons':297,354 'restat':206 'review':270 'rhythm':161 'rule':136,151,215,293,320,367,376,418,427 'san':64 'scale':59,102 'screen':116 'screen-read':115 'secondari':83,89 'semant':139 'sentenc':212 'skill':18 'skill-vibrant' 'source-bergside' 'space':101,160,345 'specifi':228 'standard':308 'state':114,149,231,296,324,344,362 'statement':385 'structur':273,282 'style':49,50,53 'success':85,91 'support':123,130 'surfac':97 'system':17,27,278,392 't-exampl':434 'target':126 'test':118 'testabl':302,388 'text':99,157 'threshold':380 'token':86,140,218,287,350,379 'tone':132,307 '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':125,343 'trade':188 'trade-off':187 'typographi':8,58,346 'ui':257 'uncertain':175 'univers':19 'usag':351 'use':42,280,412 'valu':143 'variant':232,295 'vibrant':1,15,31,48 'visibl':112,329 'visual':13,52,145 'warm':9 'warn':93 'wcag':105 'weight':70 'workflow':204 'write':131,244","prices":[{"id":"591e73f0-35bc-408d-8ee1-960b7b30681f","listingId":"2dd67e9b-e65a-4368-b367-4dc127a69bf8","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.126Z"}],"sources":[{"listingId":"2dd67e9b-e65a-4368-b367-4dc127a69bf8","source":"github","sourceId":"bergside/awesome-design-skills/vibrant","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/vibrant","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:46.126Z","lastSeenAt":"2026-05-02T12:53:55.849Z"}],"details":{"listingId":"2dd67e9b-e65a-4368-b367-4dc127a69bf8","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"vibrant","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":"0d1018d6e894a633a63d5e988d246ebbfc78e706","skill_md_path":"skills/vibrant/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/vibrant"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"vibrant","license":"MIT","description":"Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/vibrant"},"updatedAt":"2026-05-02T12:53:55.849Z"}}