{"id":"7cf94e52-a042-4249-a35f-f421cebdf49d","shortId":"WaDjnW","kind":"skill","title":"refined","tagline":"Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Refined Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Refined.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nRefined design style\n\n## Style Foundations\n- Visual style: modern, minimal\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Playfair Display, display=Playfair Display, 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\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":["refined","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-refined","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/refined","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,201 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.167Z","embedding":null,"createdAt":"2026-04-18T22:11:39.432Z","updatedAt":"2026-05-02T12:53:55.167Z","lastSeenAt":"2026-05-02T12:53:55.167Z","tsv":"'1':190 '100':71 '111827':101 '12/14/16/20/24/32':59 '16a34a':93 '2':201 '2.2':107 '200':72 '3':212 '300':73 '3b82f6':89 '4':221 '4/8/12/16/24/32':104 '400':74 '5':231 '500':75 '6':243 '600':76 '700':77 '800':78 '8b5cf6':91 '900':79 'aa':108 'accept':224,288 'access':105,162,223,284,369,390,393 'activ':315 'add':232 'adject':357 'aesthet':388 'alon':358 'altern':176 'ambigu':148,356 'anatomi':215,279 'anchor':359 'anti':234,297 'anti-pattern':233,296 'author':29,188 'avoid':139,143,147 'behavior':151,220,283,323,340 'brand':47 'care':2 'case':343 'checklist':248,303 'clariti':164 'code':254 'color':80,334 'color-token':333 'compon':157,209,214,276,304,432 'component-level':208,275 'concis':118,182 'concret':168,417 'confid':119 'conflict':386 'consist':158,378 'constraint':206,395 'content':228,290 'content-writ':227 'context':268 'contrast':141 'creat':32 'criteria':225,289 'curat':3 'd97706':95 'danger':86,96 'dc2626':97 'default':169,310 'defin':202,307 'depend':354 'describ':321 'design':16,26,46,49,193,262,271 'design-system':25,261 'direct':41 'disabl':316 'display':63,64,66 'do-rul':410 'edg':342 'eleg':8 'empti':346 'end':244 'engin':44 'error':318 'everi':368,409 'exampl':295,367,394,421 'execut':252 'exist':240,431 'expect':150,230,306 'expert':24 'explain':171 'explicit':135,337 'ffffff':99 'first':111,155 'flag':385 'focus':114,186,313 'focus-vis':312 'follow':152 'font':60 'foundat':52,154,205,274 'gate':350 'generat':260 'goal':270 'guidanc':37,180,211,264,429 'guidelin':28,187 'help':120 'hierarchi':131 'hover':311 'implement':35,185,301,375 'implementation-focus':184 'implementation-readi':34 'includ':222,338,427 'inconsist':144,241 'intent':194 'interact':112,133,219,322 'introduc':423 'jetbrain':68 'keep':132,179 'keyboard':110,325 'keyboard-first':109 'label':149,345 'languag':396 'least':415 'level':210,277 'load':317 'local':383 'long':344 'low':140 'migrat':237,428 'minim':5,56 'mission':20 'modern':4,55 'mono':67,69 'must':371,398 'negoti':402 'neutral':83 'new':425 'non':401 'non-negoti':400 'note':238 'novelti':166 'off':174 'one':196,381,416 'one-off':380 'opinion':181 'optim':384 'output':257 'overflow':348 'pair':408 'palett':14,81 'pattern':235,298,426 'playfair':62,65 'pointer':326 'possibl':178 'practic':33 'prefer':123,376 'preserv':129 'primari':61,82,88 'priorit':161,392 'prohibit':300 'propos':199 'provid':167 'qa':247,302 'qualiti':349 'raw':127 'readi':36 'recommend':407 'refin':1,15,31,48 'relev':320 'requir':256,285,308 'respons':282,339 'restat':191 'review':255 'rhythm':146 'rule':121,136,200,278,305,352,361,403,412 'scale':58,103 'secondari':90 'semant':124 'sentenc':197 'serif':9 'skill':18 'skill-refined' 'sophist':13 'source-bergside' 'space':102,145,330 'specifi':213 'standard':293 'state':115,134,216,281,309,329,347 'statement':370 'structur':258,267 'style':6,50,51,54 'success':84,92 'surfac':98 'system':17,27,263,377 't-exampl':419 'testabl':287,373 'text':100,142 'threshold':365 'token':87,125,203,272,335,364 'tone':117,292 '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':328 'trade':173 'trade-off':172 'typographi':10,57,331 'ui':242 'uncertain':160 'underst':12 'univers':19 'usag':336 'use':42,265,397 'valu':128 'variant':217,280 'visibl':113,314 'visual':53,130 'warn':85,94 'wcag':106 'weight':70 'workflow':189 'write':116,229","prices":[{"id":"d6427826-c1d2-4077-8bcc-3e0f8f53ed74","listingId":"7cf94e52-a042-4249-a35f-f421cebdf49d","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:39.432Z"}],"sources":[{"listingId":"7cf94e52-a042-4249-a35f-f421cebdf49d","source":"github","sourceId":"bergside/awesome-design-skills/refined","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/refined","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:39.432Z","lastSeenAt":"2026-05-02T12:53:55.167Z"}],"details":{"listingId":"7cf94e52-a042-4249-a35f-f421cebdf49d","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"refined","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":"6c4fee3ebf20aa544a6309f7ebaa21f2704b6889","skill_md_path":"skills/refined/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/refined"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"refined","license":"MIT","description":"Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/refined"},"updatedAt":"2026-05-02T12:53:55.167Z"}}