{"id":"ce687cc3-ed85-4239-ad32-fd298e182032","shortId":"AFptjg","kind":"skill","title":"expressive","tagline":"Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Expressive Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Expressive.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nA vibrant and visually engaging design style that uses bold colors, playful graphics, and dynamic layouts to create a strong personality. It emphasizes creativity and energy while maintaining clear structure and modern UI patterns.\n\n## Style Foundations\n- Visual style: modern, playful\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=IBM Plex Mono, display=IBM Plex Mono, mono=IBM Plex Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, secondary, neutral, success, warning, danger | Tokens: primary=#db2777, secondary=#2563eb, 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":["expressive","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-expressive","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/expressive","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,422 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:53.422Z","embedding":null,"createdAt":"2026-04-18T22:11:22.103Z","updatedAt":"2026-05-02T12:53:53.422Z","lastSeenAt":"2026-05-02T12:53:53.422Z","tsv":"'1':230 '100':110 '111827':141 '14/16/18/24/32/40':95 '16a34a':133 '2':241 '2.2':147 '200':111 '2563eb':131 '3':252 '300':112 '4':261 '4/8/12/16/24/32':144 '400':113 '5':271 '500':114 '6':283 '600':115 '700':116 '800':117 '900':118 'aa':148 'accept':264,328 'access':145,202,263,324,409,430,433 'activ':355 'add':272 'adject':397 'aesthet':428 'alon':398 'altern':216 'ambigu':188,396 'anatomi':255,319 'anchor':399 'anti':274,337 'anti-pattern':273,336 'author':34,228 'avoid':179,183,187 'balanc':16 'behavior':191,260,323,363,380 'bold':8,62 'brand':52 'case':383 'checklist':288,343 'clariti':204 'clear':81 'code':294 'color':9,63,119,374 'color-token':373 'compon':197,249,254,316,344,472 'component-level':248,315 'concis':158,222 'concret':208,457 'confid':159 'conflict':426 'consist':198,418 'constraint':246,435 'content':268,330 'content-writ':267 'context':308 'contrast':181 'creat':37,70 'creativ':17,76 'criteria':265,329 'd97706':135 'danger':126,136 'db2777':129 'dc2626':137 'default':209,350 'defin':242,347 'depend':394 'describ':361 'design':6,21,31,51,58,233,302,311 'design-system':30,301 'direct':46 'disabl':356 'display':101 'do-rul':450 'driven':5 'dynam':13,67 'edg':382 'emphas':75 'empti':386 'end':284 'energi':78 'engag':57 'engin':49 'error':358 'everi':408,449 'exampl':335,407,434,461 'execut':292 'exist':280,471 'expect':190,270,346 'expert':29 'explain':211 'explicit':175,377 'express':1,20,36 'ffffff':139 'first':151,195 'flag':425 'focus':154,226,353 'focus-vis':352 'follow':192 'font':96 'foundat':88,194,245,314 'gate':390 'generat':300 'goal':310 'graphic':11,65 'guidanc':42,220,251,304,469 'guidelin':33,227 'help':160 'hierarchi':171 'hover':351 'ibm':98,102,106 'implement':40,225,341,415 'implementation-focus':224 'implementation-readi':39 'includ':262,378,467 'inconsist':184,281 'intent':234 'interact':152,173,259,362 'introduc':463 'keep':172,219 'keyboard':150,365 'keyboard-first':149 'label':189,385 'languag':436 'layout':14,68 'least':455 'level':250,317 'load':357 'local':423 'long':384 'low':180 'maintain':80 'migrat':277,468 'mission':25 'modern':84,91 'mono':100,104,105,108 'must':411,438 'negoti':442 'neutral':123 'new':465 'non':441 'non-negoti':440 'note':278 'novelti':206 'off':214 'one':236,421,456 'one-off':420 'opinion':221 'optim':424 'output':297 'overflow':388 'pair':448 'palett':120 'pattern':86,275,338,466 'person':4,73 'personality-driven':3 'play':10,64,92 'plex':99,103,107 'pointer':366 'possibl':218 'practic':38 'prefer':163,416 'preserv':169 'primari':97,121,128 'priorit':201,432 'prohibit':340 'propos':239 'provid':207 'qa':287,342 'qualiti':389 'raw':167 'readi':41 'recommend':447 'relev':360 'requir':296,325,348 'respons':322,379 'restat':231 'review':295 'rhythm':186 'rule':161,176,240,318,345,392,401,443,452 'scale':94,143 'secondari':122,130 'semant':164 'sentenc':237 'skill':23 'skill-expressive' 'source-bergside' 'space':142,185,370 'specifi':253 'standard':333 'state':155,174,256,321,349,369,387 'statement':410 'strong':72 'structur':19,82,298,307 'style':59,87,90 'success':124,132 'surfac':138 'system':22,32,303,417 't-exampl':459 'testabl':327,413 'text':140,182 'threshold':405 'token':127,165,243,312,375,404 'tone':157,332 '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':368 'trade':213 'trade-off':212 'typographi':93,371 'ui':85,282 'uncertain':200 'univers':24 'usag':376 'use':47,61,305,437 'valu':168 'variant':257,320 'vibrant':2,54 'visibl':153,354 'visual':56,89,170 'warn':125,134 'wcag':146 'weight':109 'workflow':229 'write':156,269","prices":[{"id":"195bc634-117b-4b9a-b5e2-ddca1d1f56a8","listingId":"ce687cc3-ed85-4239-ad32-fd298e182032","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:22.103Z"}],"sources":[{"listingId":"ce687cc3-ed85-4239-ad32-fd298e182032","source":"github","sourceId":"bergside/awesome-design-skills/expressive","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/expressive","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:22.103Z","lastSeenAt":"2026-05-02T12:53:53.422Z"}],"details":{"listingId":"ce687cc3-ed85-4239-ad32-fd298e182032","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"expressive","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":"4864589baa39f322e9597a616a671a42369a0254","skill_md_path":"skills/expressive/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/expressive"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"expressive","license":"MIT","description":"Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/expressive"},"updatedAt":"2026-05-02T12:53:53.422Z"}}