{"id":"fdda4ee2-a822-4e6d-994e-3e3841f64494","shortId":"be7PDJ","kind":"skill","title":"application","tagline":"App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Application Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Application.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nA modern, Vercel/GitHub-inspired application dashboard designed for clarity, speed, and developer-first workflows. The interface focuses on simplicity and visual hierarchy, allowing teams to monitor, deploy, and manage applications effortlessly from a single control center. Features a top-bar only navigation (no sidebar) and a clean purple-themed aesthetic.\n\n## Style Foundations\n- Visual style: modern, clean, high-contrast, glass-like panels, soft shadows, rounded components\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 (purple), neutral, success, warning, danger | Tokens: primary=#9333ea, secondary=#a855f7, success=#10b981, warning=#f59e0b, danger=#ef4444, surface=#FFFFFF, text=#09090b\n- Layout: Top-bar only navigation, structured grid layout, card-based content\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":["application","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-application","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/application","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,679 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.820Z","embedding":null,"createdAt":"2026-04-18T22:11:06.307Z","updatedAt":"2026-05-02T12:53:51.820Z","lastSeenAt":"2026-05-02T12:53:51.820Z","tsv":"'09090b':167 '1':269 '100':136 '10b981':159 '12/14/16/20/24/32':126 '2':280 '2.2':186 '200':137 '3':291 '300':138 '4':300 '4/8/12/16/24/32':183 '400':139 '5':310 '500':140 '6':322 '600':141 '700':142 '800':143 '900':144 '9333ea':155 'a855f7':157 'aa':187 'accept':303,367 'access':184,241,302,363,448,469,472 'activ':394 'add':311 'adject':436 'aesthet':8,106,467 'allow':77 'alon':437 'altern':255 'ambigu':227,435 'anatomi':294,358 'anchor':438 'anti':313,376 'anti-pattern':312,375 'app':2 'applic':1,22,38,58,84 'author':36,267 'avoid':218,222,226 'bar':11,95,171 'base':15,179 'behavior':230,299,362,402,419 'brand':54 'card':14,178 'card-bas':13,177 'case':422 'center':90 'checklist':327,382 'clariti':62,243 'clean':102,112 'code':333 'color':145,413 'color-token':412 'compon':123,236,288,293,355,383,511 'component-level':287,354 'concis':197,261 'concret':247,496 'confid':198 'conflict':465 'consist':237,457 'constraint':285,474 'content':180,307,369 'content-writ':306 'context':347 'contrast':115,220 'control':89 'creat':39 'criteria':304,368 'danger':152,162 'dashboard':3,59 'default':248,389 'defin':281,386 'depend':433 'deploy':81 'describ':400 'design':23,33,53,60,272,341,350 'design-system':32,340 'develop':19,66 'developer-first':18,65 'direct':48 'disabl':395 'display':130 'do-rul':489 'edg':421 'ef4444':163 'effortless':85 'empti':425 'end':323 'engin':51 'error':397 'everi':447,488 'exampl':374,446,473,500 'execut':331 'exist':319,510 'expect':229,309,385 'expert':31 'explain':250 'explicit':214,416 'f59e0b':161 'featur':91 'ffffff':165 'first':20,67,190,234 'flag':464 'focus':71,193,265,392 'focus-vis':391 'follow':231 'font':127 'foundat':108,233,284,353 'gate':429 'generat':339 'glass':117 'glass-lik':116 'goal':349 'grid':175 'guidanc':44,259,290,343,508 'guidelin':35,266 'help':199 'hierarchi':76,210 'high':114 'high-contrast':113 'hover':390 'implement':42,264,380,454 'implementation-focus':263 'implementation-readi':41 'includ':301,417,506 'inconsist':223,320 'intent':273 'inter':129,131 'interact':191,212,298,401 'interfac':70 'introduc':502 'jetbrain':133 'keep':211,258 'keyboard':189,404 'keyboard-first':188 'label':228,424 'languag':475 'layout':16,168,176 'least':494 'level':289,356 'like':118 'load':396 'local':462 'long':423 'low':219 'manag':83 'migrat':316,507 'mission':27 'modern':56,111 'monitor':80 'mono':132,134 'must':450,477 'navig':12,97,173 'negoti':481 'neutral':149 'new':504 'non':480 'non-negoti':479 'note':317 'novelti':245 'off':253 'one':275,460,495 'one-off':459 'opinion':260 'optim':463 'output':336 'overflow':427 'pair':487 'palett':146 'panel':119 'pattern':314,377,505 'pointer':405 'possibl':257 'practic':40 'prefer':202,455 'preserv':208 'primari':128,147,154 'priorit':240,471 'prohibit':379 'propos':278 'provid':246 'purpl':6,104,148 'purple-them':5,103 'qa':326,381 'qualiti':428 'raw':206 'readi':43 'recommend':486 'relev':399 'requir':335,364,387 'respons':361,418 'restat':270 'review':334 'rhythm':225 'round':122 'rule':200,215,279,357,384,431,440,482,491 'scale':125,182 'secondari':156 'semant':203 'sentenc':276 'shadow':121 'sidebar':99 'simplic':73 'singl':88 'skill':25 'skill-application' 'soft':120 'source-bergside' 'space':181,224,409 'specifi':292 'speed':63 'standard':372 'state':194,213,295,360,388,408,426 'statement':449 'structur':174,337,346 'style':107,110 'success':150,158 'surfac':164 'system':24,34,342,456 't-exampl':498 'team':78 'testabl':366,452 'text':166,221 'theme':7,105 'threshold':444 'token':153,204,282,351,414,443 'tone':196,371 'top':10,94,170 'top-bar':9,93,169 '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':407 'trade':252 'trade-off':251 'typographi':124,410 'ui':321 'uncertain':239 'univers':26 'usag':415 'use':49,344,476 'valu':207 'variant':296,359 'vercel/github-inspired':57 'visibl':192,393 'visual':75,109,209 'warn':151,160 'wcag':185 'weight':135 'workflow':21,68,268 'write':195,308","prices":[{"id":"9fae130f-ad47-447c-ba43-63d4586dd374","listingId":"fdda4ee2-a822-4e6d-994e-3e3841f64494","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:06.307Z"}],"sources":[{"listingId":"fdda4ee2-a822-4e6d-994e-3e3841f64494","source":"github","sourceId":"bergside/awesome-design-skills/application","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/application","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:06.307Z","lastSeenAt":"2026-05-02T12:53:51.820Z"}],"details":{"listingId":"fdda4ee2-a822-4e6d-994e-3e3841f64494","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"application","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":"2c3074db9dbcffc8a9ba0a0a62748a74169be4da","skill_md_path":"skills/application/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/application"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"application","license":"MIT","description":"App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/application"},"updatedAt":"2026-05-02T12:53:51.820Z"}}