{"id":"43672404-d740-45ad-9f1c-7175b79f2552","shortId":"GVXZKJ","kind":"skill","title":"artistic","tagline":"High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Artistic Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Artistic.\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, artistic\n- Typography scale: 12/14/16/18/24/30/36 | Fonts: primary=Limelight, display=Limelight, 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, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support\n\n## Writing Tone\nconcise, confident, professional, action-oriented\n\n## Rules: Do\n- prefer semantic tokens over raw values\n- preserve visual hierarchy\n- keep interaction states explicit\n- design for empty/loading/error states\n- ensure responsive behavior by default\n- document accessibility rationale\n\n## Rules: Don't\n- avoid low contrast text\n- avoid inconsistent spacing rhythm\n- avoid decorative motion without purpose\n- avoid ambiguous labels\n- avoid mixing multiple visual metaphors\n- avoid inaccessible hit areas\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":["artistic","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-artistic","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/artistic","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,555 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:51.885Z","embedding":null,"createdAt":"2026-04-18T22:11:07.052Z","updatedAt":"2026-05-02T12:53:51.885Z","lastSeenAt":"2026-05-02T12:53:51.885Z","tsv":"'1':239 '100':71 '111827':101 '12/14/16/18/24/30/36':61 '16a34a':93 '2':250 '2.2':107 '200':72 '3':261 '300':73 '3b82f6':89 '4':270 '4/8/12/16/24/32':104 '400':74 '44px':129 '5':280 '500':75 '6':292 '600':76 '700':77 '800':78 '8b5cf6':91 '900':79 'aa':108 'accept':273,337 'access':105,169,211,272,333,418,439,442 'action':142 'action-ori':141 'activ':364 'add':281 'adject':406 'aesthet':437 'alon':407 'altern':225 'ambigu':188,405 'anatomi':264,328 'anchor':408 'anti':283,346 'anti-pattern':282,345 'area':198 'aria':119 'artist':1,18,34,58 'author':32,237 'avoid':174,178,182,187,190,195 'behavior':165,200,269,332,372,389 'bold':11 'brand':50 'case':392 'checklist':297,352 'choic':13 'clariti':213 'code':303 'color':12,80,383 'color-token':382 'compon':206,258,263,325,353,481 'component-level':257,324 'concis':138,231 'concret':217,466 'confid':139 'conflict':435 'consist':207,427 'constraint':255,444 'content':277,339 'content-writ':276 'context':317 'contrast':4,57,134,176 'creat':35 'creativ':8 'criteria':274,338 'd97706':95 'danger':86,96 'dc2626':97 'decor':183 'default':167,218,359 'defin':251,356 'depend':403 'describ':370 'design':19,29,49,159,242,311,320 'design-system':28,310 'direct':44 'disabl':365 'display':65 'do-rul':459 'document':168 'edg':391 'empti':395 'empty/loading/error':161 'end':293 'engin':47 'ensur':163 'error':367 'everi':417,458 'exampl':344,416,443,470 'execut':301 'exist':289,480 'expect':199,279,355 'expert':27 'explain':220 'explicit':158,386 'express':5 'ffffff':99 'first':111,204 'flag':434 'focus':114,235,362 'focus-vis':361 'follow':201 'font':62 'foundat':52,203,254,323 'gate':399 'generat':309 'goal':319 'guidanc':40,229,260,313,478 'guidelin':31,236 'hierarchi':154 'high':3,56,133 'high-contrast':2,55,132 'hit':197 'hover':360 'html':117 'implement':38,234,350,424 'implementation-focus':233 'implementation-readi':37 'inaccess':196 'includ':271,387,476 'inconsist':179,290 'intent':243 'interact':112,156,268,371 'interfac':17 'introduc':472 'jetbrain':68 'keep':155,228 'keyboard':110,374 'keyboard-first':109 'label':124,189,394 'languag':445 'least':464 'level':259,326 'limelight':64,66 'load':366 'local':432 'long':393 'low':175 'metaphor':194 'migrat':286,477 'mission':23 'mix':191 'mono':67,69 'motion':127,184 'multipl':192 'must':420,447 'negoti':451 'neutral':83 'new':474 'non':450 'non-negoti':449 'note':287 'novelti':215 'off':223 'one':245,430,465 'one-off':429 'opinion':230 'optim':433 'orient':143 'output':306 'overflow':397 'pair':457 'palett':81 'pattern':284,347,475 'pointer':375 'possibl':227 'practic':36 'prefer':146,425 'preserv':152 'primari':63,82,88 'priorit':210,441 'profession':140 'prohibit':349 'propos':248 'provid':216 'purpos':186 'qa':296,351 'qualiti':398 'rational':170 'raw':150 'reader':122 'readi':39 'recommend':456 'reduc':126 'reduced-mot':125 'relev':369 'requir':305,334,357 'respons':164,331,388 'restat':240 'review':304 'rhythm':181 'rule':144,171,249,327,354,401,410,452,461 'scale':60,103 'screen':121 'screen-read':120 'secondari':90 'semant':116,147 'sentenc':246 'skill':21 'skill-artistic' 'source-bergside' 'space':102,180,379 'specifi':262 'standard':342 'state':115,157,162,265,330,358,378,396 'statement':419 'strike':16 'structur':307,316 'style':6,51,54 'success':84,92 'support':128,135 'surfac':98 'system':20,30,312,426 't-exampl':468 'target':131 'test':123 'testabl':336,422 'text':100,177 'threshold':414 'token':87,148,252,321,384,413 'tone':137,341 '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':130,377 'trade':222 'trade-off':221 'typographi':9,59,380 'ui':291 'uncertain':209 'univers':22 'usag':385 'use':45,314,446 'valu':151 'variant':266,329 'visibl':113,363 'visual':15,53,153,193 'warn':85,94 'wcag':106 'weight':70 'without':185 'workflow':238 'write':136,278","prices":[{"id":"cad28d3d-ad8f-40bf-8a21-542784f56b9f","listingId":"43672404-d740-45ad-9f1c-7175b79f2552","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:07.052Z"}],"sources":[{"listingId":"43672404-d740-45ad-9f1c-7175b79f2552","source":"github","sourceId":"bergside/awesome-design-skills/artistic","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/artistic","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:07.052Z","lastSeenAt":"2026-05-02T12:53:51.885Z"}],"details":{"listingId":"43672404-d740-45ad-9f1c-7175b79f2552","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"artistic","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":"f659874ca251a3a1bdd9552f88a3ad1aab08f657","skill_md_path":"skills/artistic/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/artistic"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"artistic","license":"MIT","description":"High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/artistic"},"updatedAt":"2026-05-02T12:53:51.885Z"}}