{"id":"3dde0637-cf82-4e31-84ea-217575c3a06c","shortId":"tUNqVr","kind":"skill","title":"ui-density","tagline":"UI density — how much information and how many features appear at once — should match the primary platform and user type. Desktop supports dense, feature-rich interfaces; mobile requires focused, reduced layouts. Enterprise power users tolerate higher density than occasional user","description":"# UI Density\n\nDensity describes how much information and how many interactive elements appear in a given area. The right density is not a universal standard — it depends on platform, user type, and session context.\n\n## Platform Defaults\n\n| Platform | Default density | Reason |\n|---|---|---|\n| Desktop | Medium to high | Large screen, precise input, often primary work surface |\n| Tablet | Medium | Touch input, larger than phone but less than desktop |\n| Mobile | Low | Small screen, touch targets need space, interrupted sessions |\n\nNever port a dense desktop layout directly to mobile. Remove, collapse, or deprioritise features rather than shrinking them.\n\n## User Type and Density\n\n| User type | Appropriate density | Examples |\n|---|---|---|\n| Power user / enterprise | High density acceptable | Trading platforms, ERP, analytics, developer tools |\n| Occasional / general user | Medium — clear visual breathing room | SaaS dashboards, project management |\n| Consumer / first-time user | Low — guided, uncluttered | Onboarding flows, consumer apps, e-commerce |\n\nA trading platform operator sits in the product for 8 hours a day and has learned every pixel — high density serves them. A user visiting a settings page once a month needs clear space and obvious labels.\n\n## Density Tokens\n\nDefine spacing scale with density in mind. A compact variant reduces padding without changing structure:\n\n```css\n/* Default density */\n--density-row-height:    44px;\n--density-cell-padding:  var(--space-3) var(--space-4);\n--density-gap:           var(--space-4);\n\n/* Compact (enterprise / data-heavy) */\n[data-density=\"compact\"] {\n  --density-row-height:    32px;\n  --density-cell-padding:  var(--space-2) var(--space-3);\n  --density-gap:           var(--space-2);\n}\n\n/* Spacious (consumer / onboarding) */\n[data-density=\"spacious\"] {\n  --density-row-height:    56px;\n  --density-cell-padding:  var(--space-4) var(--space-6);\n  --density-gap:           var(--space-6);\n}\n```\n\n## Feature Count by Platform\n\nNot every feature belongs on every platform. For each feature ask: does a mobile user need this right now?\n\n| Priority | Mobile | Tablet | Desktop |\n|---|---|---|---|\n| Core task | Always | Always | Always |\n| Secondary actions | Collapsed (menu/sheet) | Visible | Visible |\n| Filters and sorting | Accessible but not persistent | Collapsible | Persistent sidebar or toolbar |\n| Bulk actions | Hidden or minimal | Reduced | Full |\n| Advanced settings | Link to separate screen | Link or panel | Inline or panel |\n| Data visualisation | Simplified (key metric only) | Reduced chart | Full chart |\n\n## Density and Feature Reduction on Mobile\n\nSections and features can be removed, collapsed, or repositioned on smaller viewports — not just resized.\n\n- **Remove:** Decorative sidebars, secondary data columns, promotional banners\n- **Collapse:** Filters, advanced options, secondary navigation into accordions or bottom sheets\n- **Reposition:** Toolbars move from top to bottom (thumb reach), sidebars move to drawers\n- **Simplify:** A multi-column data table becomes a card list; a full chart becomes a single key metric\n\nProgressive disclosure is the principle: show the minimum needed to complete the primary task, reveal more on demand.\n\n## Review Checklist\n\n- [ ] Is the density appropriate for the primary platform (desktop = can be denser, mobile = must be sparse)?\n- [ ] Is the density appropriate for the user type (power user = higher density, consumer = more space)?\n- [ ] Are spacing tokens used to define density — not one-off padding values?\n- [ ] On mobile: are secondary features collapsed, repositioned, or removed rather than shrunk?\n- [ ] Are touch targets ≥ 44×44px even in compact density variants?\n- [ ] Is a density toggle offered for enterprise tools where users have strong personal preferences?","tags":["density","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt"],"capabilities":["skill","source-dembrandt","skill-ui-density","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/ui-density","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 (3,816 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.743Z","embedding":null,"createdAt":"2026-05-18T13:14:04.311Z","updatedAt":"2026-05-18T19:08:28.743Z","lastSeenAt":"2026-05-18T19:08:28.743Z","tsv":"'-2':282,291 '-3':252,285 '-4':255,261,310 '-6':313,319 '32px':275 '44':550 '44px':245,551 '56px':303 '8':193 'accept':150 'access':361 'accordion':435 'action':353,371 'advanc':377,430 'alway':349,350,351 'analyt':154 'app':180 'appear':13,57 'appropri':142,494,510 'area':61 'ask':334 'banner':427 'becom':459,466 'belong':327 'bottom':437,445 'breath':163 'bulk':370 'card':461 'cell':248,278,306 'chang':236 'chart':396,398,465 'checklist':490 'clear':161,216 'collaps':128,354,365,411,428,540 'column':425,456 'commerc':183 'compact':231,262,270,554 'complet':481 'consum':169,179,293,519 'context':78 'core':347 'count':321 'css':238 'dashboard':166 'data':265,268,296,389,424,457 'data-dens':267,295 'data-heavi':264 'day':196 'decor':421 'default':80,82,239 'defin':223,527 'demand':488 'dens':26,121 'denser':502 'densiti':3,5,41,46,47,64,83,139,143,149,203,221,227,240,242,247,257,269,272,277,287,297,300,305,315,399,493,509,518,528,555,559 'density-cell-pad':246,276,304 'density-gap':256,286,314 'density-row-height':241,271,299 'depend':71 'deprioritis':130 'describ':48 'desktop':24,85,107,122,346,499 'develop':155 'direct':124 'disclosur':472 'drawer':451 'e':182 'e-commerc':181 'element':56 'enterpris':36,147,263,563 'erp':153 'even':552 'everi':200,325,329 'exampl':144 'featur':12,28,131,320,326,333,401,407,539 'feature-rich':27 'filter':358,429 'first':171 'first-tim':170 'flow':178 'focus':33 'full':376,397,464 'gap':258,288,316 'general':158 'given':60 'guid':175 'heavi':266 'height':244,274,302 'hidden':372 'high':88,148,202 'higher':40,517 'hour':194 'inform':8,51 'inlin':386 'input':92,100 'interact':55 'interfac':30 'interrupt':116 'key':392,469 'label':220 'larg':89 'larger':101 'layout':35,123 'learn':199 'less':105 'link':379,383 'list':462 'low':109,174 'manag':168 'mani':11,54 'match':17 'medium':86,98,160 'menu/sheet':355 'metric':393,470 'mind':229 'minim':374 'minimum':478 'mobil':31,108,126,337,344,404,503,536 'month':214 'move':441,449 'much':7,50 'multi':455 'multi-column':454 'must':504 'navig':433 'need':114,215,339,479 'never':118 'obvious':219 'occasion':43,157 'offer':561 'often':93 'onboard':177,294 'one':531 'one-off':530 'oper':187 'option':431 'pad':234,249,279,307,533 'page':211 'panel':385,388 'persist':364,366 'person':569 'phone':103 'pixel':201 'platform':20,73,79,81,152,186,323,330,498 'port':119 'power':37,145,515 'precis':91 'prefer':570 'primari':19,94,483,497 'principl':475 'prioriti':343 'product':191 'progress':471 'project':167 'promot':426 'rather':132,544 'reach':447 'reason':84 'reduc':34,233,375,395 'reduct':402 'remov':127,410,420,543 'reposit':413,439,541 'requir':32 'resiz':419 'reveal':485 'review':489 'rich':29 'right':63,341 'room':164 'row':243,273,301 'saa':165 'scale':225 'screen':90,111,382 'secondari':352,423,432,538 'section':405 'separ':381 'serv':204 'session':77,117 'set':210,378 'sheet':438 'show':476 'shrink':134 'shrunk':546 'sidebar':367,422,448 'simplifi':391,452 'singl':468 'sit':188 'skill' 'skill-ui-density' 'small':110 'smaller':415 'sort':360 'source-dembrandt' 'space':115,217,224,251,254,260,281,284,290,309,312,318,521,523 'spacious':292,298 'spars':506 'standard':69 'strong':568 'structur':237 'support':25 'surfac':96 'tabl':458 'tablet':97,345 'target':113,549 'task':348,484 'thumb':446 'time':172 'toggl':560 'token':222,524 'toler':39 'tool':156,564 'toolbar':369,440 'top':443 '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' 'touch':99,112,548 'trade':151,185 'type':23,75,137,141,514 'ui':2,4,45 'ui-dens':1 'unclutt':176 'univers':68 'use':525 'user':22,38,44,74,136,140,146,159,173,207,338,513,516,566 'valu':534 'var':250,253,259,280,283,289,308,311,317 'variant':232,556 'viewport':416 'visibl':356,357 'visit':208 'visual':162 'visualis':390 'without':235 'work':95","prices":[{"id":"2b5e575c-dc7a-4934-af32-ce2b89fa1a80","listingId":"3dde0637-cf82-4e31-84ea-217575c3a06c","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:04.311Z"}],"sources":[{"listingId":"3dde0637-cf82-4e31-84ea-217575c3a06c","source":"github","sourceId":"dembrandt/dembrandt-skills/ui-density","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/ui-density","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:04.311Z","lastSeenAt":"2026-05-18T19:08:28.743Z"}],"details":{"listingId":"3dde0637-cf82-4e31-84ea-217575c3a06c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"ui-density","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":"809748f7cba10a4d6bd63140becda3cb0cbe99c0","skill_md_path":"skills/ui-density/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/ui-density"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"ui-density","description":"UI density — how much information and how many features appear at once — should match the primary platform and user type. Desktop supports dense, feature-rich interfaces; mobile requires focused, reduced layouts. Enterprise power users tolerate higher density than occasional users. Use when designing data tables, dashboards, toolbars, or adapting a desktop product for mobile."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/ui-density"},"updatedAt":"2026-05-18T19:08:28.743Z"}}