{"id":"67f98626-aa29-4303-a1eb-eb26c7a9a578","shortId":"tLQVfg","kind":"skill","title":"levels","tagline":"Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# levels Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for levels.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nLevels design focuses on removing friction, building trust, and guiding users toward a specific action through clarity, psychology, and speed\n\n## Style Foundations\n- Visual style: modern, clean\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=#27272A, 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":["levels","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-levels","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/levels","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,296 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.960Z","embedding":null,"createdAt":"2026-04-18T22:11:27.407Z","updatedAt":"2026-05-02T12:53:53.960Z","lastSeenAt":"2026-05-02T12:53:53.960Z","tsv":"'1':209 '100':90 '111827':120 '12/14/16/20/24/32':80 '16a34a':112 '2':220 '2.2':126 '200':91 '27272a':108 '3':231 '300':92 '4':240 '4/8/12/16/24/32':123 '400':93 '5':250 '500':94 '6':262 '600':95 '700':96 '800':97 '8b5cf6':110 '900':98 'aa':127 'accept':243,307 'access':124,181,242,303,388,409,412 'action':13,66 'activ':334 'add':251 'adject':376 'aesthet':407 'alon':377 'altern':195 'ambigu':167,375 'anatomi':234,298 'anchor':378 'anti':253,316 'anti-pattern':252,315 'author':33,207 'avoid':158,162,166 'behavior':170,239,302,342,359 'brand':51 'build':58 'case':362 'checklist':267,322 'clariti':15,68,183 'clean':77 'code':273 'color':99,353 'color-token':352 'compon':176,228,233,295,323,451 'component-level':227,294 'concis':137,201 'concret':187,436 'confid':138 'conflict':405 'consist':177,397 'constraint':225,414 'content':247,309 'content-writ':246 'context':287 'contrast':160 'convers':3 'conversion-focus':2 'creat':36 'criteria':244,308 'd97706':114 'danger':105,115 'dc2626':116 'default':188,329 'defin':221,326 'depend':373 'describ':340 'design':5,20,30,50,53,212,281,290 'design-system':29,280 'direct':45 'disabl':335 'display':84 'do-rul':429 'edg':361 'empti':365 'end':263 'engin':48 'error':337 'everi':387,428 'exampl':314,386,413,440 'execut':271 'exist':259,450 'expect':169,249,325 'expert':28 'explain':190 'explicit':154,356 'ffffff':118 'first':130,174 'flag':404 'focus':4,54,133,205,332 'focus-vis':331 'follow':171 'font':81 'foundat':73,173,224,293 'friction':8,57 'gate':369 'generat':279 'goal':289 'guid':10,61 'guidanc':41,199,230,283,448 'guidelin':32,206 'help':139 'hierarchi':150 'hover':330 'implement':39,204,320,394 'implementation-focus':203 'implementation-readi':38 'includ':241,357,446 'inconsist':163,260 'intent':213 'inter':83,85 'interact':131,152,238,341 'introduc':442 'jetbrain':87 'keep':151,198 'keyboard':129,344 'keyboard-first':128 'label':168,364 'languag':415 'least':434 'level':1,19,35,52,229,296 'load':336 'local':402 'long':363 'low':159 'migrat':256,447 'mission':24 'modern':76 'mono':86,88 'must':390,417 'negoti':421 'neutral':102 'new':444 'non':420 'non-negoti':419 'note':257 'novelti':185 'off':193 'one':215,400,435 'one-off':399 'opinion':200 'optim':403 'output':276 'overflow':367 'pair':427 'palett':100 'pattern':254,317,445 'pointer':345 'possibl':197 'practic':37 'prefer':142,395 'preserv':148 'primari':82,101,107 'priorit':180,411 'prohibit':319 'propos':218 'provid':186 'psycholog':69 'qa':266,321 'qualiti':368 'raw':146 'readi':40 'recommend':426 'relev':339 'remov':7,56 'requir':275,304,327 'respons':301,358 'restat':210 'review':274 'rhythm':165 'rule':140,155,219,297,324,371,380,422,431 'scale':79,122 'secondari':109 'semant':143 'sentenc':216 'skill':22 'skill-levels' 'source-bergside' 'space':121,164,349 'specif':65 'specifi':232 'speed':18,71 'standard':312 'state':134,153,235,300,328,348,366 'statement':389 'structur':277,286 'style':72,75 'success':103,111 'surfac':117 'system':21,31,282,396 't-exampl':438 'testabl':306,392 'text':119,161 'threshold':384 'token':106,144,222,291,354,383 'tone':136,311 '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':347 'toward':12,63 'trade':192 'trade-off':191 'trust':16,59 'typographi':78,350 'ui':261 'uncertain':179 'univers':23 'usag':355 'use':46,284,416 'user':11,62 'valu':147 'variant':236,299 'visibl':132,333 'visual':74,149 'warn':104,113 'wcag':125 'weight':89 'workflow':208 'write':135,248","prices":[{"id":"5f630ad6-fe88-43dc-9197-954893ab9518","listingId":"67f98626-aa29-4303-a1eb-eb26c7a9a578","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:27.407Z"}],"sources":[{"listingId":"67f98626-aa29-4303-a1eb-eb26c7a9a578","source":"github","sourceId":"bergside/awesome-design-skills/levels","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/levels","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:27.407Z","lastSeenAt":"2026-05-02T12:53:53.960Z"}],"details":{"listingId":"67f98626-aa29-4303-a1eb-eb26c7a9a578","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"levels","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":"813f256c1834d477c429547f569d7ec2bada2593","skill_md_path":"skills/levels/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/levels"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"levels","license":"MIT","description":"Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/levels"},"updatedAt":"2026-05-02T12:53:53.960Z"}}