{"id":"b86325e7-1300-43e4-a6a8-c5718c6eecbc","shortId":"NMQ6DZ","kind":"skill","title":"status-colors-and-errors","tagline":"Keep status and error colours minimal and consistent — too many semantic colours confuse users. Each colour must mean exactly one thing. Errors should be recoverable, large failures must be prevented, and the UI should always give the user a path forward. Use when designing statu","description":"# Status Colours and Error Design\n\n## Keep the Colour Set Small\n\nEvery status colour added to a system is a cognitive burden on the user. They must learn what each colour means, remember it, and interpret it correctly under stress — which is exactly when errors occur.\n\n**The minimal set that covers almost everything:**\n\n| Colour | Semantic meaning | Always means |\n|---|---|---|\n| **Red** | Error / failure / destructive | Something went wrong, or this action cannot be undone |\n| **Orange / Amber** | Warning | Something needs attention before proceeding |\n| **Green** | Success / positive | Action completed, state is healthy |\n| **Blue** | Info / neutral status | Informational, no action required |\n\n**Rule: each colour maps to exactly one meaning across the entire product.** If orange means \"warning\" in one component and \"pending\" in another, the system breaks down.\n\nWhen in doubt, cut the colour — neutral grey communicates status without semantic weight, and neutral is better than a misused semantic colour.\n\n## Orange Is Always a Warning\n\nOrange (amber) carries a specific signal: pay attention, something may go wrong. Do not use it for:\n- Neutral states (use grey)\n- Progress or pending (use blue or a spinner)\n- Informational content (use blue)\n- Branding or decorative purposes inside status indicators\n\nIf orange appears in the UI, the user should immediately know it requires their attention.\n\n## Errors Should Be Recoverable\n\n**The worst error is one the user cannot recover from.** Design every error state with a path forward.\n\n### Error message anatomy\nEvery error should answer three questions:\n1. **What went wrong?** — plain language, no error codes\n2. **Why did it happen?** — if useful and known\n3. **What should the user do next?** — specific, actionable\n\n```\n❌ \"Error 500\"\n❌ \"Something went wrong\"\n✓  \"We couldn't save your changes. Check your connection and try again.\"\n✓  \"This email is already in use. Sign in instead, or use a different email.\"\n```\n\n### Recovery actions\n- Always provide a retry button for transient failures (network errors, timeouts)\n- For validation errors, point directly to the problematic field\n- For destructive actions that failed, reassure the user nothing was lost\n- For session expiry, redirect to login and return the user to where they were\n\n## Prevent Large Errors Before They Happen\n\nThe most damaging errors — data loss, irreversible actions, broken state — should be prevented at the design level, not handled after the fact.\n\n- **Confirm before irreversible actions:** \"Delete this project and all 47 tasks? This cannot be undone.\"\n- **Disable unavailable actions** rather than letting users trigger them and hit an error\n- **Autosave** where possible so a browser crash or accidental close does not destroy work\n- **Optimistic UI** with rollback: show the success state immediately, silently retry on failure, surface an error only if the retry also fails\n\n## Levels of Severity — Use Sparingly\n\nNot every problem is equal. Match the visual weight of the feedback to the severity.\n\n| Severity | Pattern | When to use |\n|---|---|---|\n| **Blocking error** | Full-page error state or modal | App cannot continue, user must act |\n| **Inline error** | Red text below a field | Form field validation failure |\n| **Toast / snackbar** | Temporary notification, bottom of screen | Transient failure the user should know about but can dismiss |\n| **Alert banner** | Persistent bar at top of section | Ongoing issue affecting the current context |\n| **Empty state** | Illustrated or descriptive empty screen | No data yet — use as an opportunity for guidance, not just a blank |\n\nAvoid showing multiple simultaneous error types at once — one clear message is more useful than three overlapping alerts.\n\n## Review Checklist\n\n- [ ] Does the product use four or fewer semantic status colours?\n- [ ] Does each colour mean exactly one thing, used consistently everywhere?\n- [ ] Is orange/amber reserved exclusively for warnings?\n- [ ] Does every error message state what went wrong and what to do next?\n- [ ] Do all transient errors (network, timeout) have a retry action?\n- [ ] Are irreversible destructive actions protected by a confirmation step?\n- [ ] Is autosave or draft recovery available for long-form or complex inputs?\n- [ ] Are multiple simultaneous error states avoided?\n\n## Common Anti-Patterns\n\n| Anti-pattern | Problem | Fix |\n|---|---|---|\n| \"Something went wrong\" with no action | User is stuck with no path forward | Add specific cause and a retry or contact link |\n| Orange used for \"pending\" and \"warning\" simultaneously | Colour loses its meaning | Orange = warning only; use blue or spinner for pending |\n| Five or more status colours (red, orange, yellow, teal, purple…) | User must learn and remember a complex legend | Cut to the minimum: red, orange, green, blue |\n| Inline validation only on submit | User discovers all errors at once | Validate on blur (leaving a field) for immediate feedback |\n| No confirmation on delete | Users accidentally delete data | Require explicit confirmation for all irreversible actions |","tags":["status","colors","and","errors","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system"],"capabilities":["skill","source-dembrandt","skill-status-colors-and-errors","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/status-colors-and-errors","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (5,102 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-18T19:08:28.481Z","embedding":null,"createdAt":"2026-05-18T13:14:03.839Z","updatedAt":"2026-05-18T19:08:28.481Z","lastSeenAt":"2026-05-18T19:08:28.481Z","tsv":"'1':285 '2':294 '3':303 '47':427 '500':313 'accident':454,783 'across':153 'act':521 'action':117,132,143,311,344,367,403,421,435,652,656,695,792 'ad':64 'add':703 'affect':560 'alert':550,601 'almost':101 'alreadi':332 'also':480 'alway':40,106,196,345 'amber':122,200 'anatomi':278 'anoth':167 'answer':282 'anti':683,686 'anti-pattern':682,685 'app':516 'appear':241 'attent':126,206,253 'autosav':446,663 'avail':667 'avoid':584,680 'banner':551 'bar':553 'better':188 'blank':583 'block':507 'blue':137,224,231,727,757 'blur':771 'bottom':537 'brand':232 'break':170 'broken':404 'browser':451 'burden':71 'button':349 'cannot':118,265,430,517 'carri':201 'caus':705 'chang':322 'check':323 'checklist':603 'clear':593 'close':455 'code':293 'cognit':70 'color':3 'colour':10,17,21,52,58,63,80,103,147,177,193,613,616,719,736 'common':681 'communic':180 'complet':133 'complex':673,748 'compon':163 'confirm':418,660,779,788 'confus':18 'connect':325 'consist':13,622 'contact':710 'content':229 'context':563 'continu':518 'correct':87 'couldn':318 'cover':100 'crash':452 'current':562 'cut':175,750 'damag':398 'data':400,572,785 'decor':234 'delet':422,781,784 'descript':568 'design':49,55,268,411 'destroy':458 'destruct':111,366,655 'differ':341 'direct':360 'disabl':433 'discov':764 'dismiss':549 'doubt':174 'draft':665 'email':330,342 'empti':564,569 'entir':155 'equal':491 'error':5,9,27,54,94,109,254,260,270,276,280,292,312,354,358,392,399,445,475,508,512,523,588,632,646,678,766 'everi':61,269,279,488,631 'everyth':102 'everywher':623 'exact':24,92,150,618 'exclus':627 'expiri':378 'explicit':787 'fact':417 'fail':369,481 'failur':32,110,352,472,532,541 'feedback':498,777 'fewer':610 'field':364,528,530,774 'five':732 'fix':689 'form':529,671 'forward':46,275,702 'four':608 'full':510 'full-pag':509 'give':41 'go':209 'green':129,756 'grey':179,219 'guidanc':579 'handl':414 'happen':298,395 'healthi':136 'hit':443 'illustr':566 'immedi':248,468,776 'indic':238 'info':138 'inform':141,228 'inlin':522,758 'input':674 'insid':236 'instead':337 'interpret':85 'irrevers':402,420,654,791 'issu':559 'keep':6,56 'know':249,545 'known':302 'languag':290 'larg':31,391 'learn':77,744 'leav':772 'legend':749 'let':438 'level':412,482 'link':711 'login':381 'long':670 'long-form':669 'lose':720 'loss':401 'lost':375 'mani':15 'map':148 'match':492 'may':208 'mean':23,81,105,107,152,159,617,722 'messag':277,594,633 'minim':11,97 'minimum':753 'misus':191 'modal':515 'multipl':586,676 'must':22,33,76,520,743 'need':125 'network':353,647 'neutral':139,178,186,216 'next':309,642 'noth':373 'notif':536 'occur':95 'one':25,151,162,262,592,619 'ongo':558 'opportun':577 'optimist':460 'orang':121,158,194,199,240,712,723,738,755 'orange/amber':625 'overlap':600 'page':511 'path':45,274,701 'pattern':503,684,687 'pay':205 'pend':165,222,715,731 'persist':552 'plain':289 'point':359 'posit':131 'possibl':448 'prevent':35,390,408 'problem':489,688 'problemat':363 'proceed':128 'product':156,606 'progress':220 'project':424 'protect':657 'provid':346 'purpl':741 'purpos':235 'question':284 'rather':436 'reassur':370 'recov':266 'recover':30,257 'recoveri':343,666 'red':108,524,737,754 'redirect':379 'rememb':82,746 'requir':144,251,786 'reserv':626 'retri':348,470,479,651,708 'return':383 'review':602 'rollback':463 'rule':145 'save':320 'screen':539,570 'section':557 'semant':16,104,183,192,611 'session':377 'set':59,98 'sever':484,501,502 'show':464,585 'sign':335 'signal':204 'silent':469 'simultan':587,677,718 'skill' 'skill-status-colors-and-errors' 'small':60 'snackbar':534 'someth':112,124,207,314,690 'source-dembrandt' 'spare':486 'specif':203,310,704 'spinner':227,729 'state':134,217,271,405,467,513,565,634,679 'statu':50 'status':2,7,51,62,140,181,237,612,735 'status-colors-and-error':1 'step':661 'stress':89 'stuck':698 'submit':762 'success':130,466 'surfac':473 'system':67,169 'task':428 'teal':740 'temporari':535 'text':525 'thing':26,620 'three':283,599 'timeout':355,648 'toast':533 'top':555 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'transient':351,540,645 'tri':327 'trigger':440 'type':589 'ui':38,244,461 'unavail':434 'undon':120,432 'use':47,213,218,223,230,300,334,339,485,506,574,597,607,621,713,726 'user':19,43,74,246,264,307,372,385,439,519,543,696,742,763,782 'valid':357,531,759,769 'visual':494 'warn':123,160,198,629,717,724 'weight':184,495 'went':113,287,315,636,691 'without':182 'work':459 'worst':259 'wrong':114,210,288,316,637,692 'yellow':739 'yet':573","prices":[{"id":"54dbef45-a8a2-441c-b315-1685bb0cc8b7","listingId":"b86325e7-1300-43e4-a6a8-c5718c6eecbc","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:03.839Z"}],"sources":[{"listingId":"b86325e7-1300-43e4-a6a8-c5718c6eecbc","source":"github","sourceId":"dembrandt/dembrandt-skills/status-colors-and-errors","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/status-colors-and-errors","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:03.839Z","lastSeenAt":"2026-05-18T19:08:28.481Z"}],"details":{"listingId":"b86325e7-1300-43e4-a6a8-c5718c6eecbc","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"status-colors-and-errors","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"2ebd28baccf3c6a5a3e36c302406ef827c44be58","skill_md_path":"skills/status-colors-and-errors/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/status-colors-and-errors"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"status-colors-and-errors","description":"Keep status and error colours minimal and consistent — too many semantic colours confuse users. Each colour must mean exactly one thing. Errors should be recoverable, large failures must be prevented, and the UI should always give the user a path forward. Use when designing status indicators, error states, form validation, alerts, or any feedback system."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/status-colors-and-errors"},"updatedAt":"2026-05-18T19:08:28.481Z"}}