{"id":"4b00ba8d-4b93-4c99-8a40-4297a287e4a6","shortId":"8jgLgB","kind":"skill","title":"elegant","tagline":"Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Elegant Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Elegant.\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: minimal, clean\n- Typography scale: 14/16/18/24/32/40 | Fonts: primary=Google Sans, display=Google Sans, mono=Anonymous Pro | weights=100, 200, 300, 400, 500, 600\n- Color palette: primary, secondary, 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\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":["elegant","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-elegant","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/elegant","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,165 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.184Z","embedding":null,"createdAt":"2026-04-18T22:11:19.810Z","updatedAt":"2026-05-02T12:53:53.184Z","lastSeenAt":"2026-05-02T12:53:53.184Z","tsv":"'1':186 '100':69 '111827':97 '14/16/18/24/32/40':57 '16a34a':89 '2':197 '2.2':103 '200':70 '3':208 '300':71 '3b82f6':85 '4':217 '4/8/12/16/24/32':100 '400':72 '5':227 '500':73 '6':239 '600':74 '8b5cf6':87 'aa':104 'accept':220,284 'access':101,158,219,280,365,386,389 'activ':311 'add':228 'adject':353 'aesthet':4,384 'alon':354 'altern':172 'ambigu':144,352 'anatomi':211,275 'anchor':355 'anonym':66 'anti':230,293 'anti-pattern':229,292 'author':30,184 'avoid':135,139,143 'behavior':147,216,279,319,336 'brand':48 'case':339 'checklist':244,299 'clariti':160 'clean':54 'code':250 'color':75,330 'color-token':329 'compon':153,205,210,272,300,428 'component-level':204,271 'concis':114,178 'concret':164,413 'confid':115 'conflict':382 'consist':154,374 'constraint':202,391 'content':224,286 'content-writ':223 'context':264 'contrast':137 'creat':33 'criteria':221,285 'd97706':91 'danger':82,92 'dc2626':93 'default':165,306 'defin':198,303 'delic':6 'depend':350 'describ':317 'design':17,27,47,189,258,267 'design-system':26,257 'direct':42 'disabl':312 'display':62 'do-rul':406 'edg':338 'eleg':1,16,32 'empti':342 'end':240 'engin':45 'error':314 'everi':364,405 'exampl':291,363,390,417 'execut':248 'exist':236,427 'expect':146,226,302 'expert':25 'explain':167 'explicit':131,333 'exud':14 'ffffff':95 'first':107,151 'flag':381 'focus':110,182,309 'focus-vis':308 'follow':148 'font':58 'foundat':50,150,201,270 'gate':346 'generat':256 'goal':266 'googl':60,63 'grace':2 'guidanc':38,176,207,260,425 'guidelin':29,183 'help':116 'hierarchi':127 'hover':307 'implement':36,181,297,371 'implementation-focus':180 'implementation-readi':35 'includ':218,334,423 'inconsist':140,237 'intent':190 'interact':108,129,215,318 'introduc':419 'keep':128,175 'keyboard':106,321 'keyboard-first':105 'label':145,341 'languag':392 'layout':12 'least':411 'level':206,273 'load':313 'local':379 'long':340 'low':136 'migrat':233,424 'minim':8,53 'mission':21 'mono':65 'must':367,394 'negoti':398 'neutral':79 'new':421 'non':397 'non-negoti':396 'note':234 'novelti':162 'off':170 'one':192,377,412 'one-off':376 'opinion':177 'optim':380 'output':253 'overflow':344 'pair':404 'palett':9,76 'pattern':231,294,422 'pointer':322 'polish':11 'possibl':174 'practic':34 'prefer':119,372 'preserv':125 'primari':59,77,84 'priorit':157,388 'pro':67 'prohibit':296 'propos':195 'provid':163 'qa':243,298 'qualiti':345 'raw':123 'readi':37 'recommend':403 'refin':3 'relev':316 'requir':252,281,304 'respons':278,335 'restat':187 'review':251 'rhythm':142 'rule':117,132,196,274,301,348,357,399,408 'san':61,64 'scale':56,99 'secondari':78,86 'semant':120 'sentenc':193 'skill':19 'skill-elegant' 'sophist':15 'source-bergside' 'space':98,141,326 'specifi':209 'standard':289 'state':111,130,212,277,305,325,343 'statement':366 'structur':254,263 'style':49,52 'success':80,88 'surfac':94 'system':18,28,259,373 't-exampl':415 'testabl':283,369 'text':96,138 'threshold':361 'token':83,121,199,268,331,360 'tone':113,288 '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':324 'trade':169 'trade-off':168 'typographi':7,55,327 'ui':238 'uncertain':156 'univers':20 'usag':332 'use':43,261,393 'valu':124 'variant':213,276 'visibl':109,310 'visual':51,126 'warn':81,90 'wcag':102 'weight':68 'workflow':185 'write':112,225","prices":[{"id":"25aab179-9a24-4ec6-80de-ed8e2b2771c5","listingId":"4b00ba8d-4b93-4c99-8a40-4297a287e4a6","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:19.810Z"}],"sources":[{"listingId":"4b00ba8d-4b93-4c99-8a40-4297a287e4a6","source":"github","sourceId":"bergside/awesome-design-skills/elegant","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/elegant","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:19.810Z","lastSeenAt":"2026-05-02T12:53:53.184Z"}],"details":{"listingId":"4b00ba8d-4b93-4c99-8a40-4297a287e4a6","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"elegant","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":"082a5253a4b73489bd4e021a5ac1f37db79adf4b","skill_md_path":"skills/elegant/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/elegant"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"elegant","license":"MIT","description":"Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/elegant"},"updatedAt":"2026-05-02T12:53:53.184Z"}}