{"slug":"real-world-metaphors","title":"real-world-metaphors","summary":"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","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-03T16:18:16.670408Z","repo":{"url":"https://github.com/dembrandt/dembrandt-skills","stars":64,"forks":10,"license":"MIT","updatedAt":"2026-09-29T18:02:17Z"},"bodyHtml":"<hr>\n<h2>name: real-world-metaphors\ndescription: 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.\nmetadata:\npriority: 6\npathPatterns:\n- \"components/<strong>\"\n- \"src/components/</strong>\"\n- \"<strong>/*.tsx\"\n- \"</strong>/*.jsx\"\n- \"design-system/<strong>\"\n- \"ui/</strong>\"\npromptSignals:\nphrases:\n- \"card\"\n- \"carousel\"\n- \"drawer\"\n- \"metaphor\"\n- \"physical\"\n- \"skeuomorphic\"\n- \"gesture\"\n- \"swipe\"\nretrieval:\naliases:\n- real world metaphors\n- skeuomorphism\n- physical ui patterns\n- card pattern\n- carousel\n- drawer navigation\nintents:\n- make ui feel intuitive\n- choose a layout pattern\n- design a card component\n- use familiar patterns\nexamples:\n- should I use a card or a list here\n- make this feel more natural to interact with\n- which pattern fits this content best</h2>\n<h1>Real-World Metaphors in UI</h1>\n<p>UI 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.</p>\n<p>Use them deliberately, not decoratively.</p>\n<h2>Common Metaphors and When to Use Them</h2>\n<h3>Card</h3>\n<p>A card is a bounded, self-contained unit of content — like a physical index card or a product on a shelf.</p>\n<p><strong>Use when:</strong></p>\n<ul>\n<li>Content items are discrete and comparable (products, people, articles, tasks)</li>\n<li>Each item needs to be scanned quickly and potentially acted on</li>\n<li>Items benefit from a visual thumbnail, image, or icon</li>\n</ul>\n<p><strong>Key properties:</strong></p>\n<ul>\n<li>Cards should be graspable: elevation (<code>--shadow-sm</code>), border-radius, and clear boundary</li>\n<li>All cards in a set should be the same width; height can vary with content</li>\n<li>One primary action per card — secondary actions appear on hover or inside a detail view</li>\n<li>Cards imply \"I can pick this up and do something with it\" — if nothing happens on click, use a list instead</li>\n</ul>\n<h3>Carousel / Horizontal Scroll</h3>\n<p>A carousel borrows from the physical act of flipping through a stack or sliding items along a rail.</p>\n<p><strong>Use when:</strong></p>\n<ul>\n<li>There are more items than fit the viewport and browsing is the primary mode</li>\n<li>Items have a natural visual order (steps, featured content, media)</li>\n<li>The user is expected to explore, not to find a specific item</li>\n</ul>\n<p><strong>Caution:</strong></p>\n<ul>\n<li>Carousels hide content — important items should not live only inside a carousel</li>\n<li>Auto-advancing carousels reduce user control; prefer user-driven navigation</li>\n<li>On mobile, a horizontal scroll without explicit navigation dots feels more natural than arrows</li>\n</ul>\n<h3>Drawer / Side Panel</h3>\n<p>A drawer slides in from an edge, like a physical desk drawer — it brings additional context without replacing the current view.</p>\n<p><strong>Use when:</strong></p>\n<ul>\n<li>Secondary detail is needed without losing context of the main view</li>\n<li>Editing or configuring an item while keeping the list visible behind</li>\n<li>Mobile navigation patterns (hamburger menu opens a side drawer)</li>\n</ul>\n<p><strong>Key properties:</strong></p>\n<ul>\n<li>The drawer should feel anchored to an edge — left for navigation, right for detail/settings</li>\n<li>Always provide a clear close action (× button and clicking outside)</li>\n<li>The content behind should dim slightly (overlay) to signal the drawer is a layer above</li>\n</ul>\n<h3>Accordion</h3>\n<p>Like a physical folder that expands to reveal contents — collapses to save space, expands to show detail.</p>\n<p><strong>Use when:</strong></p>\n<ul>\n<li>Content has a clear parent–child hierarchy</li>\n<li>Most users need only a few sections at a time</li>\n<li>Vertical space is constrained</li>\n</ul>\n<h3>Tabs</h3>\n<p>Like physical divider tabs in a binder — select a tab to see its section.</p>\n<p><strong>Use when:</strong></p>\n<ul>\n<li>Content is divided into mutually exclusive, peer-level sections</li>\n<li>The user switches between sections frequently</li>\n<li>All tabs are equally relevant to the same context</li>\n</ul>\n<p><strong>Caution:</strong> Tabs imply peer-level, equal-importance sections. Do not use tabs for hierarchical navigation (use breadcrumbs or sidebar instead).</p>\n<h3>Tooltip</h3>\n<p>Like a sticky note attached to an object — appears on hover, provides brief additional context.</p>\n<p><strong>Use when:</strong></p>\n<ul>\n<li>An icon or control needs a short label that would clutter the layout if always visible</li>\n<li>A term or value needs brief explanation in context</li>\n</ul>\n<p><strong>Not a replacement for:</strong> clear labels, inline help text, or documentation for complex features.</p>\n<h2>Principles for Using Metaphors Well</h2>\n<ol>\n<li><strong>The metaphor should match the interaction</strong> — a card that does nothing on click creates a false affordance</li>\n<li><strong>Don't mix metaphors</strong> — a carousel inside a card inside a drawer creates cognitive noise</li>\n<li><strong>Mobile borrows different metaphors than desktop</strong> — swipe-to-dismiss, bottom sheets, and pull-to-refresh are mobile-native; forcing them onto desktop feels wrong in both directions</li>\n<li><strong>Elevation reinforces the metaphor</strong> — a card without shadow doesn't feel graspable; a drawer without an overlay doesn't feel layered</li>\n</ol>\n<h2>Review Checklist</h2>\n<ul>\n<li><input disabled=\"disabled\" type=\"checkbox\"> Does the chosen pattern match the physical metaphor users will intuit?</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> Do cards have a clear primary action — not just decoration?</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> Does the carousel or horizontal scroll have navigation affordance (dots, arrows, or partial next item visible)?</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> Do drawers dim the background content to signal layering?</li>\n<li><input disabled=\"disabled\" type=\"checkbox\"> Are physical metaphors consistent — the same pattern used for the same type of content throughout the product?</li>\n</ul>\n","files":[{"path":"SKILL.md","sizeBytes":5704,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-03T16:18:52.175347Z","sha256":"CB99A2014516297F849BC7937687E3DC5F8343C8DDBE94CFF2294111404FD9EF","sizeBytes":2565},"review":null,"source":{"repositoryUrl":"https://github.com/dembrandt/dembrandt-skills","path":"skills/real-world-metaphors","license":"MIT","commit":"709f1696be1118dc9c837a5a60b75c870179eef8","subtreeSha":"AA92F74A1F406C121F31D1D234F514A98B1D965C3B8408AA4844B736B580097D","lastSyncedAt":"2026-09-30T15:23:27.290693Z"},"reviewedAt":"2026-09-03T16:25:28.001702Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/dembrandt/dembrandt-skills/tree/main/skills/real-world-metaphors"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install dembrandt-dembrandt-skills@llmmart"},{"target":"git","command":"git clone https://github.com/dembrandt/dembrandt-skills.git"}]}