{"id":"95a2f1d3-ba0f-4f91-98d3-5d8b33b8d8e1","shortId":"zggwG3","kind":"skill","title":"real-world-metaphors","tagline":"UI patterns borrowed from the physical world feel immediately intuitive — cards feel graspable, carousels feel scrollable, drawers feel pullable. Use real-world metaphors deliberately to reduce the learning curve and make interactions feel natural. Use when designing layout patte","description":"# Real-World Metaphors in UI\n\nUI patterns borrowed from the physical world reduce the learning curve because users already know how they work. A card feels like something you can pick up. A carousel feels like flipping through a stack. A drawer feels like it slides out from the side. These metaphors carry affordance — the user knows what to do before reading any instructions.\n\nUse them deliberately, not decoratively.\n\n## Common Metaphors and When to Use Them\n\n### Card\nA card is a bounded, self-contained unit of content — like a physical index card or a product on a shelf.\n\n**Use when:**\n- Content items are discrete and comparable (products, people, articles, tasks)\n- Each item needs to be scanned quickly and potentially acted on\n- Items benefit from a visual thumbnail, image, or icon\n\n**Key properties:**\n- Cards should be graspable: elevation (`--shadow-sm`), border-radius, and clear boundary\n- All cards in a set should be the same width; height can vary with content\n- One primary action per card — secondary actions appear on hover or inside a detail view\n- Cards imply \"I can pick this up and do something with it\" — if nothing happens on click, use a list instead\n\n### Carousel / Horizontal Scroll\nA carousel borrows from the physical act of flipping through a stack or sliding items along a rail.\n\n**Use when:**\n- There are more items than fit the viewport and browsing is the primary mode\n- Items have a natural visual order (steps, featured content, media)\n- The user is expected to explore, not to find a specific item\n\n**Caution:**\n- Carousels hide content — important items should not live only inside a carousel\n- Auto-advancing carousels reduce user control; prefer user-driven navigation\n- On mobile, a horizontal scroll without explicit navigation dots feels more natural than arrows\n\n### Drawer / Side Panel\nA drawer slides in from an edge, like a physical desk drawer — it brings additional context without replacing the current view.\n\n**Use when:**\n- Secondary detail is needed without losing context of the main view\n- Editing or configuring an item while keeping the list visible behind\n- Mobile navigation patterns (hamburger menu opens a side drawer)\n\n**Key properties:**\n- The drawer should feel anchored to an edge — left for navigation, right for detail/settings\n- Always provide a clear close action (× button and clicking outside)\n- The content behind should dim slightly (overlay) to signal the drawer is a layer above\n\n### Accordion\nLike a physical folder that expands to reveal contents — collapses to save space, expands to show detail.\n\n**Use when:**\n- Content has a clear parent–child hierarchy\n- Most users need only a few sections at a time\n- Vertical space is constrained\n\n### Tabs\nLike physical divider tabs in a binder — select a tab to see its section.\n\n**Use when:**\n- Content is divided into mutually exclusive, peer-level sections\n- The user switches between sections frequently\n- All tabs are equally relevant to the same context\n\n**Caution:** Tabs imply peer-level, equal-importance sections. Do not use tabs for hierarchical navigation (use breadcrumbs or sidebar instead).\n\n### Tooltip\nLike a sticky note attached to an object — appears on hover, provides brief additional context.\n\n**Use when:**\n- An icon or control needs a short label that would clutter the layout if always visible\n- A term or value needs brief explanation in context\n\n**Not a replacement for:** clear labels, inline help text, or documentation for complex features.\n\n## Principles for Using Metaphors Well\n\n1. **The metaphor should match the interaction** — a card that does nothing on click creates a false affordance\n2. **Don't mix metaphors** — a carousel inside a card inside a drawer creates cognitive noise\n3. **Mobile borrows different metaphors than desktop** — swipe-to-dismiss, bottom sheets, and pull-to-refresh are mobile-native; forcing them onto desktop feels wrong in both directions\n4. **Elevation reinforces the metaphor** — a card without shadow doesn't feel graspable; a drawer without an overlay doesn't feel layered\n\n## Review Checklist\n\n- [ ] Does the chosen pattern match the physical metaphor users will intuit?\n- [ ] Do cards have a clear primary action — not just decoration?\n- [ ] Does the carousel or horizontal scroll have navigation affordance (dots, arrows, or partial next item visible)?\n- [ ] Do drawers dim the background content to signal layering?\n- [ ] Are physical metaphors consistent — the same pattern used for the same type of content throughout the product?","tags":["real","world","metaphors","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens"],"capabilities":["skill","source-dembrandt","skill-real-world-metaphors","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/real-world-metaphors","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 (4,531 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.091Z","embedding":null,"createdAt":"2026-05-18T13:14:03.299Z","updatedAt":"2026-05-18T19:08:28.091Z","lastSeenAt":"2026-05-18T19:08:28.091Z","tsv":"'1':607 '2':625 '3':641 '4':672 'accordion':440 'act':166,253 'action':210,214,420,713 'addit':359,559 'advanc':318 'afford':99,624,725 'along':262 'alreadi':64 'alway':415,577 'anchor':405 'appear':215,554 'arrow':341,727 'articl':155 'attach':550 'auto':317 'auto-advanc':316 'background':737 'behind':389,427 'benefit':169 'binder':488 'border':188 'border-radius':187 'borrow':7,53,249,643 'bottom':652 'bound':127 'boundari':192 'breadcrumb':541 'brief':558,584 'bring':358 'brows':276 'button':421 'card':15,70,122,124,138,179,194,212,223,615,634,678,708 'carousel':18,79,244,248,304,315,319,631,719 'carri':98 'caution':303,523 'checklist':695 'child':465 'chosen':698 'clear':191,418,463,592,711 'click':239,423,620 'close':419 'clutter':573 'cognit':639 'collaps':450 'common':115 'compar':152 'complex':600 'configur':381 'consist':745 'constrain':480 'contain':130 'content':133,147,207,289,306,426,449,460,498,738,755 'context':360,374,522,560,587 'control':322,566 'creat':621,638 'current':364 'curv':34,61 'decor':114,716 'deliber':29,112 'design':42 'desk':355 'desktop':647,666 'detail':221,369,457 'detail/settings':414 'differ':644 'dim':429,735 'direct':671 'discret':150 'dismiss':651 'divid':484,500 'document':598 'doesn':681,690 'dot':336,726 'drawer':21,87,342,346,356,398,402,435,637,686,734 'driven':326 'edg':351,408 'edit':379 'elev':183,673 'equal':517,530 'equal-import':529 'exclus':503 'expand':446,454 'expect':294 'explan':585 'explicit':334 'explor':296 'fals':623 'featur':288,601 'feel':12,16,19,22,38,71,80,88,337,404,667,683,692 'find':299 'fit':272 'flip':82,255 'folder':444 'forc':663 'frequent':513 'graspabl':17,182,684 'hamburg':393 'happen':237 'height':203 'help':595 'hide':305 'hierarch':538 'hierarchi':466 'horizont':245,331,721 'hover':217,556 'icon':176,564 'imag':174 'immedi':13 'impli':224,525 'import':307,531 'index':137 'inlin':594 'insid':219,313,632,635 'instead':243,544 'instruct':109 'interact':37,613 'intuit':14,706 'item':148,158,168,261,270,281,302,308,383,731 'keep':385 'key':177,399 'know':65,102 'label':570,593 'layer':438,693,741 'layout':43,575 'learn':33,60 'left':409 'level':506,528 'like':72,81,89,134,352,441,482,546 'list':242,387 'live':311 'lose':373 'main':377 'make':36 'match':611,700 'media':290 'menu':394 'metaphor':4,28,48,97,116,605,609,629,645,676,703,744 'mix':628 'mobil':329,390,642,661 'mobile-n':660 'mode':280 'mutual':502 'nativ':662 'natur':39,284,339 'navig':327,335,391,411,539,724 'need':159,371,469,567,583 'next':730 'nois':640 'note':549 'noth':236,618 'object':553 'one':208 'onto':665 'open':395 'order':286 'outsid':424 'overlay':431,689 'panel':344 'parent':464 'partial':729 'patt':44 'pattern':6,52,392,699,748 'peer':505,527 'peer-level':504,526 'peopl':154 'per':211 'physic':10,56,136,252,354,443,483,702,743 'pick':76,227 'potenti':165 'prefer':323 'primari':209,279,712 'principl':602 'product':141,153,758 'properti':178,400 'provid':416,557 'pull':656 'pull-to-refresh':655 'pullabl':23 'quick':163 'radius':189 'rail':264 'read':107 'real':2,26,46 'real-world':25,45 'real-world-metaphor':1 'reduc':31,58,320 'refresh':658 'reinforc':674 'relev':518 'replac':362,590 'reveal':448 'review':694 'right':412 'save':452 'scan':162 'scroll':246,332,722 'scrollabl':20 'secondari':213,368 'section':473,495,507,512,532 'see':493 'select':489 'self':129 'self-contain':128 'set':197 'shadow':185,680 'shadow-sm':184 'sheet':653 'shelf':144 'short':569 'show':456 'side':95,343,397 'sidebar':543 'signal':433,740 'skill' 'skill-real-world-metaphors' 'slide':91,260,347 'slight':430 'sm':186 'someth':73,232 'source-dembrandt' 'space':453,478 'specif':301 'stack':85,258 'step':287 'sticki':548 'swipe':649 'swipe-to-dismiss':648 'switch':510 'tab':481,485,491,515,524,536 'task':156 'term':580 'text':596 'throughout':756 'thumbnail':173 'time':476 'tooltip':545 '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' 'type':753 'ui':5,50,51 'unit':131 'use':24,40,110,120,145,240,265,366,458,496,535,540,561,604,749 'user':63,101,292,321,325,468,509,704 'user-driven':324 'valu':582 'vari':205 'vertic':477 'view':222,365,378 'viewport':274 'visibl':388,578,732 'visual':172,285 'well':606 'width':202 'without':333,361,372,679,687 'work':68 'world':3,11,27,47,57 'would':572 'wrong':668","prices":[{"id":"0bfe45a3-6070-4fe6-aece-ec322337b247","listingId":"95a2f1d3-ba0f-4f91-98d3-5d8b33b8d8e1","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.299Z"}],"sources":[{"listingId":"95a2f1d3-ba0f-4f91-98d3-5d8b33b8d8e1","source":"github","sourceId":"dembrandt/dembrandt-skills/real-world-metaphors","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/real-world-metaphors","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:03.299Z","lastSeenAt":"2026-05-18T19:08:28.091Z"}],"details":{"listingId":"95a2f1d3-ba0f-4f91-98d3-5d8b33b8d8e1","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"real-world-metaphors","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":"af2970212564e04905acf153b833db467f72f2db","skill_md_path":"skills/real-world-metaphors/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/real-world-metaphors"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"real-world-metaphors","description":"UI patterns borrowed from the physical world feel immediately intuitive — cards feel graspable, carousels feel scrollable, drawers feel pullable. Use real-world metaphors deliberately to reduce the learning curve and make interactions feel natural. Use when designing layout patterns, gestures, or navigation paradigms."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/real-world-metaphors"},"updatedAt":"2026-05-18T19:08:28.091Z"}}