{"id":"e2746486-1238-4575-a8ee-310020d095f3","shortId":"uYnVv8","kind":"skill","title":"colorful","tagline":"Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Colorful Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Colorful.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nColorful UI/UX design uses vibrant, high-contrast palettes and gradients to create engaging, memorable, and modern user experiences\n\n## Style Foundations\n- Visual style: high-contrast, playful, premium\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Inter, display=Inter, 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: 8pt baseline grid\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\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 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":["colorful","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-colorful","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/colorful","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,375 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.417Z","embedding":null,"createdAt":"2026-04-18T22:11:12.312Z","updatedAt":"2026-05-02T12:53:52.417Z","lastSeenAt":"2026-05-02T12:53:52.417Z","tsv":"'1':222 '100':89 '111827':119 '12/14/16/20/24/32':79 '16a34a':111 '2':233 '2.2':127 '200':90 '3':244 '300':91 '3b82f6':107 '4':253 '400':92 '44px':149 '5':263 '500':93 '6':275 '600':94 '700':95 '800':96 '8b5cf6':109 '8pt':122 '900':97 'aa':128 'accept':256,320 'access':125,194,255,316,401,422,425 'activ':347 'add':264 'adject':389 'aesthet':420 'alon':390 'altern':208 'ambigu':180,388 'anatomi':247,311 'anchor':391 'anti':266,329 'anti-pattern':265,328 'aria':139 'author':30,220 'avoid':175,179 'baselin':123 'behavior':183,252,315,355,372 'brand':48 'case':375 'checklist':280,335 'clariti':196 'code':286 'color':1,16,32,49,98,366 'color-token':365 'compon':189,241,246,308,336,464 'component-level':240,307 'concis':154,214 'concret':200,449 'confid':155 'conflict':418 'consist':190,410 'constraint':238,427 'content':260,322 'content-writ':259 'context':300 'contrast':5,56,74,177 'creat':33,61 'criteria':257,321 'd97706':113 'danger':104,114 'dc2626':115 'default':201,342 'defin':234,339 'depend':386 'describ':353 'design':17,27,47,51,225,294,303 'design-system':26,293 'direct':42 'disabl':348 'display':83 'do-rul':442 'edg':374 'empti':378 'end':276 'engag':10,62 'engin':45 'error':350 'everi':400,441 'exampl':327,399,426,453 'execut':284 'exist':272,463 'expect':182,262,338 'experi':15,67 'expert':25 'explain':203 'explicit':171,369 'ffffff':117 'first':131,187 'flag':417 'focus':134,218,345 'focus-vis':344 'follow':184 'font':80 'foundat':69,186,237,306 'gate':382 'generat':292 'goal':302 'gradient':8,59 'grid':124 'guidanc':38,212,243,296,461 'guidelin':29,219 'help':156 'hierarchi':167 'high':4,55,73 'high-contrast':3,54,72 'hover':343 'html':137 'implement':36,217,333,407 'implementation-focus':216 'implementation-readi':35 'includ':254,370,459 'inconsist':273 'intent':226 'inter':82,84 'interact':132,169,251,354 'introduc':455 'jetbrain':86 'keep':168,211 'keyboard':130,357 'keyboard-first':129 'label':144,181,377 'languag':428 'least':447 'level':242,309 'load':349 'local':415 'long':376 'low':176 'memor':11,63 'migrat':269,460 'mission':21 'modern':13,65 'mono':85,87 'motion':147 'must':403,430 'negoti':434 'neutral':101 'new':457 'non':433 'non-negoti':432 'note':270 'novelti':198 'off':206 'one':228,413,448 'one-off':412 'opinion':213 'optim':416 'output':289 'overflow':380 'pair':440 'palett':6,57,99 'pattern':267,330,458 'play':75 'pointer':358 'possibl':210 'practic':34 'prefer':159,408 'premium':76 'preserv':165 'primari':81,100,106 'priorit':193,424 'prohibit':332 'propos':231 'provid':199 'qa':279,334 'qualiti':381 'raw':163 'reader':142 'readi':37 'recommend':439 'reduc':146 'reduced-mot':145 'relev':352 'requir':288,317,340 'respons':314,371 'restat':223 'review':287 'rule':157,172,232,310,337,384,393,435,444 'scale':78,121 'screen':141 'screen-read':140 'secondari':108 'semant':136,160 'sentenc':229 'skill':19 'skill-colorful' 'source-bergside' 'space':120,362 'specifi':245 'standard':325 'state':135,170,248,313,341,361,379 'statement':402 'structur':290,299 'style':68,71 'success':102,110 'support':148 'surfac':116 'system':18,28,295,409 't-exampl':451 'target':151 'test':143 'testabl':319,405 'text':118,178 'threshold':397 'token':105,161,235,304,367,396 'tone':153,324 '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':150,360 'trade':205 'trade-off':204 'typographi':77,363 'ui':274 'ui/ux':50 'uncertain':192 'univers':20 'usag':368 'use':43,52,297,429 'user':14,66 'valu':164 'variant':249,312 'vibrant':2,53 'visibl':133,346 'visual':70,166 'warn':103,112 'wcag':126 'weight':88 'workflow':221 'write':152,261","prices":[{"id":"1d8e2935-912f-4b5a-a03d-fff73d1c7d4e","listingId":"e2746486-1238-4575-a8ee-310020d095f3","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:12.312Z"}],"sources":[{"listingId":"e2746486-1238-4575-a8ee-310020d095f3","source":"github","sourceId":"bergside/awesome-design-skills/colorful","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/colorful","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:12.312Z","lastSeenAt":"2026-05-02T12:53:52.417Z"}],"details":{"listingId":"e2746486-1238-4575-a8ee-310020d095f3","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"colorful","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":"75556c3993944702621ef5fb6af71731de4f80b3","skill_md_path":"skills/colorful/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/colorful"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"colorful","license":"MIT","description":"Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/colorful"},"updatedAt":"2026-05-02T12:53:52.417Z"}}