{"id":"2b855aba-8a32-4acb-8eae-b8afa4e9bccc","shortId":"yXQ5SD","kind":"skill","title":"dashboard","tagline":"Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.","description":"<!-- TYPEUI_SH_MANAGED_START -->\n# Dashboard Design System Skill (Universal)\n\n## Mission\nYou are an expert design-system guideline author for Dashboard.\nCreate practical, implementation-ready guidance that can be directly used by engineers and designers.\n\n## Brand\nDashboard design emphasizes grids, modular components, and strong visual hierarchy to present complex data in a clear and accessible way. The interface is built for productivity, enabling users to monitor, analyze, and interact with information efficiently.\n\n## Style Foundations\n- Visual style: modern, clean, cloud-platform aesthetic (Heroku/Vercel/GitHub inspired), dark theme, subtle gradients, soft shadows, glass-like panels, rounded components\n- Typography scale: 12/14/16/20/24/32 | Fonts: primary=IBM Plex Sans, display=IBM Plex Sans, mono=IBM Plex Sans | weights=100, 200, 300, 400, 500, 600, 700, 800, 900\n- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#0C5CAB, secondary=#0a4a8a, success=#10b981, warning=#f59e0b, danger=#ef4444, surface=#09090b, text=#fafafa\n- Spacing scale: 8pt baseline grid\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, helpful, clear, friendly, professional, action-oriented, low-jargon\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":["dashboard","awesome","design","skills","bergside","agent-skills","agentic-ai","agentic-workflow","agents","ai-agents","ai-tools","awesome-list"],"capabilities":["skill","source-bergside","skill-dashboard","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/dashboard","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,989 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:52.805Z","embedding":null,"createdAt":"2026-04-18T22:11:16.078Z","updatedAt":"2026-05-02T12:53:52.805Z","lastSeenAt":"2026-05-02T12:53:52.805Z","tsv":"'09090b':161 '0a4a8a':153 '0c5cab':151 '1':309 '100':133 '10b981':155 '12/14/16/20/24/32':118 '2':320 '2.2':171 '200':134 '3':331 '300':135 '4':340 '400':136 '44px':193 '5':350 '500':137 '6':362 '600':138 '700':139 '800':140 '8pt':166 '900':141 'aa':172 'accept':343,407 'access':74,169,239,281,342,403,488,509,512 'action':209 'action-ori':208 'activ':434 'add':351 'adject':476 'aesthet':8,101,507 'alon':477 'altern':295 'ambigu':258,475 'analyz':86 'anatomi':334,398 'anchor':478 'anti':353,416 'anti-pattern':352,415 'area':268 'aria':183 'author':37,307 'avoid':244,248,252,257,260,265 'baselin':167 'behavior':235,270,339,402,442,459 'brand':55 'built':79 'case':462 'checklist':367,422 'clariti':283 'clean':97 'clear':72,205 'cloud':6,99 'cloud-platform':5,98 'code':373 'color':142,453 'color-token':452 'complex':68 'compon':61,115,276,328,333,395,423,551 'component-level':327,394 'concis':202,301 'concret':287,536 'confid':203 'conflict':505 'consist':277,497 'constraint':325,514 'content':347,409 'content-writ':346 'context':387 'contrast':198,246 'creat':40 'criteria':344,408 'danger':148,158 'dark':3,104 'dark-them':2 'dashboard':1,22,23,39,56 'data':18,69 'decor':253 'default':237,288,429 'defin':321,426 'depend':473 'describ':440 'design':24,34,54,57,229,312,381,390 'design-system':33,380 'direct':49 'disabl':435 'display':124 'do-rul':529 'document':238 'edg':461 'ef4444':159 'effici':91 'emphas':58 'empti':465 'empty/loading/error':231 'enabl':82 'end':363 'engin':52 'ensur':233 'error':437 'everi':487,528 'exampl':414,486,513,540 'execut':371 'exist':359,550 'expect':269,349,425 'expert':32 'explain':290 'explicit':228,456 'f59e0b':157 'fafafa':163 'first':175,274 'flag':504 'focus':178,305,432 'focus-vis':431 'follow':271 'font':119 'foundat':93,273,324,393 'friend':206 'gate':469 'generat':379 'glass':13,111 'glass-lik':12,110 'goal':389 'gradient':107 'grid':11,59,168 'guidanc':45,299,330,383,548 'guidelin':36,306 'help':204 'heroku/vercel/github':102 'hierarchi':19,65,224 'high':197 'high-contrast':196 'hit':267 'hover':430 'html':181 'ibm':121,125,129 'implement':43,304,420,494 'implementation-focus':303 'implementation-readi':42 'inaccess':266 'includ':341,457,546 'inconsist':249,360 'inform':90 'inspir':103 'intent':313 'interact':88,176,226,338,441 'interfac':77 'introduc':542 'jargon':213 'keep':225,298 'keyboard':174,444 'keyboard-first':173 'label':188,259,464 'languag':515 'least':534 'level':329,396 'like':14,112 'load':436 'local':502 'long':463 'low':212,245 'low-jargon':211 'metaphor':264 'migrat':356,547 'mission':28 'mix':261 'modern':96 'modular':10,60 'monitor':85 'mono':128 'motion':191,254 'multipl':262 'must':490,517 'negoti':521 'neutral':145 'new':544 'non':520 'non-negoti':519 'note':357 'novelti':285 'off':293 'one':315,500,535 'one-off':499 'opinion':300 'optim':503 'orient':210 'output':376 'overflow':467 'pair':527 'palett':143 'panel':15,113 'pattern':354,417,545 'platform':7,100 'plex':122,126,130 'pointer':445 'possibl':297 'practic':41 'prefer':216,495 'present':67 'preserv':222 'primari':120,144,150 'priorit':280,511 'product':21,81 'profession':207 'prohibit':419 'propos':318 'provid':286 'purpos':256 'qa':366,421 'qualiti':468 'rational':240 'raw':220 'reader':186 'readi':44 'recommend':526 'reduc':190 'reduced-mot':189 'relev':439 'requir':375,404,427 'respons':234,401,458 'restat':310 'review':374 'rhythm':251 'round':114 'rule':214,241,319,397,424,471,480,522,531 'san':123,127,131 'scale':117,165 'screen':185 'screen-read':184 'secondari':152 'semant':180,217 'sentenc':316 'shadow':109 'skill':26 'skill-dashboard' 'soft':108 'source-bergside' 'space':164,250,449 'specifi':332 'standard':412 'state':179,227,232,335,400,428,448,466 'statement':489 'strong':17,63 'structur':377,386 'style':92,95 'subtl':106 'success':146,154 'support':192,199 'surfac':160 'system':25,35,382,496 't-exampl':538 'target':195 'test':187 'testabl':406,492 'text':162,247 'theme':4,105 'threshold':484 'token':149,218,322,391,454,483 'tone':201,411 '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':194,447 'trade':292 'trade-off':291 'typographi':116,450 'ui':361 'uncertain':279 'univers':27 'usag':455 'use':50,384,516 'user':83 'valu':221 'variant':336,399 'visibl':177,433 'visual':64,94,223,263 'warn':147,156 'way':75 'wcag':170 'weight':132 'without':255 'workflow':308 'write':200,348","prices":[{"id":"20ab0c7e-35cb-4f21-b85f-aefc76a0f26e","listingId":"2b855aba-8a32-4acb-8eae-b8afa4e9bccc","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:16.078Z"}],"sources":[{"listingId":"2b855aba-8a32-4acb-8eae-b8afa4e9bccc","source":"github","sourceId":"bergside/awesome-design-skills/dashboard","sourceUrl":"https://github.com/bergside/awesome-design-skills/tree/main/skills/dashboard","isPrimary":false,"firstSeenAt":"2026-04-18T22:11:16.078Z","lastSeenAt":"2026-05-02T12:53:52.805Z"}],"details":{"listingId":"2b855aba-8a32-4acb-8eae-b8afa4e9bccc","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"bergside","slug":"dashboard","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":"6973940d060f6134d4f0bfaba0ff69c3892d1d87","skill_md_path":"skills/dashboard/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/bergside/awesome-design-skills/tree/main/skills/dashboard"},"layout":"multi","source":"github","category":"awesome-design-skills","frontmatter":{"name":"dashboard","license":"MIT","description":"Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards."},"skills_sh_url":"https://skills.sh/bergside/awesome-design-skills/dashboard"},"updatedAt":"2026-05-02T12:53:52.805Z"}}