real-world-metaphors

real-world-metaphors is a skill for Claude Code, Codex from dembrandt/dembrandt-skills. It costs 64 tokens per session (1,227 once invoked), scanned A, original, MIT.

A guide to using familiar real-world objects as models for interface design. For example, cards represent separate items, carousels resemble stacks that can be browsed, and drawers suggest content that slides out.

In plain words
What is it for?
It is for choosing layouts, navigation patterns, and gestures that feel familiar, such as cards for comparable items or drawers for secondary content.
Why use it?
It helps users understand controls more quickly because the visual pattern hints at how it behaves. It also explains when a metaphor fits the content and when it may confuse people.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

not rated 54repo +2 2d ago A scan Socket: passSnyk: passSkillSpector: pass 64 tokens original MIT

Good fit It is for choosing layouts, navigation patterns, and gestures that feel familiar, such as cards for comparable items or drawers for secondary content.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/dembrandt/dembrandt-skills/real-world-metaphors
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add dembrandt/dembrandt-skills --skill real-world-metaphors
Clone the repo
git clone --depth 1 https://github.com/dembrandt/dembrandt-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for real-world-metaphors

README.md
[![agentmods](https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/real-world-metaphors/github.svg)](https://agentmods.dev/skills/dembrandt/dembrandt-skills/real-world-metaphors)
Your own site
<a href="https://agentmods.dev/skills/dembrandt/dembrandt-skills/real-world-metaphors"><img src="https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/real-world-metaphors/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for real-world-metaphors

Your own site · 80×15
<a href="https://agentmods.dev/skills/dembrandt/dembrandt-skills/real-world-metaphors"><img src="https://agentmods.dev/badge/skills/dembrandt/dembrandt-skills/real-world-metaphors.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 64 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,227 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • Socket pass 19 Apr 2026
  • Snyk pass 19 Apr 2026
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00064 $0.01227
Opus 5 $0.00032 $0.00613
Sonnet 5 $0.00013 $0.00245
Haiku 4.5 $0.00006 $0.00123

Measured 12d ago against content hash 017c471258e5, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

real-world-metaphors scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/real-world-metaphors/SKILL.md · 131 lines

How it starts

The opening of the file, as written. The whole thing — 131 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Real-World Metaphors in UI

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.

Use them deliberately, not decoratively.

Common Metaphors and When to Use Them

Card

A card is a bounded, self-contained unit of content — like a physical index card or a product on a shelf.

Use when:

  • Content items are discrete and comparable (products, people, articles, tasks)
  • Each item needs to be scanned quickly and potentially acted on
  • Items benefit from a visual thumbnail, image, or icon

Key properties:

  • Cards should be graspable: elevation (--shadow-sm), border-radius, and clear boundary
  • All cards in a set should be the same width; height can vary with content
  • One primary action per card — secondary actions appear on hover or inside a detail view
  • Cards imply "I can pick this up and do something with it" — if nothing happens on click, use a list instead

Carousel / Horizontal Scroll

A carousel borrows from the physical act of flipping through a stack or sliding items along a rail.

Use when:

  • There are more items than fit the viewport and browsing is the primary mode
  • Items have a natural visual order (steps, featured content, media)
  • The user is expected to explore, not to find a specific item

Caution:

  • Carousels hide content — important items should not live only inside a carousel
  • Auto-advancing carousels reduce user control; prefer user-driven navigation
  • On mobile, a horizontal scroll without explicit navigation dots feels more natural than arrows

Drawer / Side Panel

A drawer slides in from an edge, like a physical desk drawer — it brings additional context without replacing the current view.

Use when:

  • Secondary detail is needed without losing context of the main view
  • Editing or configuring an item while keeping the list visible behind
  • Mobile navigation patterns (hamburger menu opens a side drawer)

Read the full file on GitHub · 131 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago First seen · 131 lines · 64 tokens per session scan A 017c471258e5

Subscribe to this mod's changes

real-world-metaphors is a skill published in the GitHub repository dembrandt/dembrandt-skills (54 stars, last pushed 2d ago), licensed MIT. It adds 64 tokens to every session and 1,227 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

design-dna

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…

zanwei/design-dna · 192 tokens

dbim-brand-identity

Use when applying the Government of India's Digital Brand Identity Manual (DBIM) v3 to a website, portal, form, mobile app or social media asset — colours, Noto Sans typography, State Emblem logo lockups, header/footer anatomy, imagery specs, content lifecycle and the compliance checklist. Triggers include "DBIM"…

Yashraj00700/indian-gov-ui-skills · 117 tokens

indian-gov-web-ui

A set of design and accessibility rules for Indian government websites, portals, and administrative panels, including required standards such as GIGW and WCAG.

Yashraj00700/indian-gov-ui-skills · 95 tokens

ux4g-design-system

Use when building or reviewing UI with UX4G — India's official government design system (ux4g.gov.in, cdn.ux4g.gov.in, ux4g-web-components). Covers the v3.0.18 token API, the 52 components, install paths for HTML/React/Angular/Flutter, and the interop hazards. Triggers include "UX4G", "ux4g-web-components"…

Yashraj00700/indian-gov-ui-skills · 147 tokens

gov-service-patterns

Use when designing or building a citizen-facing government service flow — sign-in/OTP/Aadhaar authentication, consent and declaration, multi-step application submission, application/grievance status tracking, fee payment, service search and slot booking, citizen or officer dashboards, notifications, or feedback and…

Yashraj00700/indian-gov-ui-skills · 115 tokens

ui-ux-laws

Priority-ordered rulebook of core UX/UI laws, cognitive-psychology principles, Nielsen's usability heuristics, and accessibility requirements that Claude must actively apply (not just cite) whenever it designs, builds, redesigns, reviews, or critiques any user interface — websites, web/mobile apps, dashboards, forms…

AmirGhl/ui-ux-laws · 203 tokens