Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when designing inputs or displays for numeric strings — phone numbers, OTP / verification codes, credit card numbers, account IDs, license keys, currency, dates, social security numbers. Trigger when picking a format for displaying numbers, designing OTP entry UIs, or formatting identifiers in tables…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill whenever the user must hold a sequence of items in working memory — phone numbers, OTP codes, account IDs, address strings, multi-step instructions, long forms, navigation menus with many items. Trigger when designing OTP / verification UIs, formatting numeric strings, breaking long forms into sections…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill whenever a design task involves cognition, mental models, learnability, complexity reduction, defaults, memory, scanning, or comprehension — regardless of framework or platform. Trigger when the user is designing forms, settings, onboarding, dashboards with many widgets, complex tables, navigation IA…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply external consistency — honoring conventions from outside your product (platform conventions, category conventions, established interaction patterns) so users can transfer their learning into your product. Use when designing for a specific platform (iOS, Android, web), entering an established product category…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply internal consistency — making your product coherent with itself across all surfaces, components, and flows. Use when designing or auditing component libraries, defining design tokens, settling cross-team naming conventions, planning a design-system rollout, integrating acquired or legacy code, or evaluating…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply the principle of Consistency — making similar things look and behave similarly so users can transfer learning across the interface. Use when designing component libraries, defining naming conventions, choosing whether to invent or borrow patterns, auditing across surfaces (web, mobile, email, support docs), or…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when the question is what to pre-select in a list of options — radio groups, dropdowns, configuration UIs, plan pickers, sign-up flows, settings. A strong default is the highest-leverage Hick's Law mitigation: most users accept the default, paying almost no decision cost. Trigger when picking what's…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when designing menus, dropdowns, navigation, command palettes, or any interface where the user picks from a list. Trigger when the menu has more than 7 items, when navigation feels overwhelming, when designing a cmd-K palette, when picking what goes in a "More" overflow, or when arguing about whether to…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when designing pricing tables, plan pickers, tier selectors, or any conversion surface where the choice itself is the conversion event. Trigger when laying out 3-tier or 4-tier pricing, when arguing about whether to add a fourth plan, when designing the "Choose your plan" step of onboarding, or when…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill whenever a design has many options the user must choose among — menus, navigation, pickers, plan tiers, settings panels, action toolbars, lists of templates, anything that asks "which one?" Trigger when the user is laying out a navigation menu, designing a settings page, picking the structure of a…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply arbitrary and symbolic icon design — using forms with no inherent meaning that depend on convention to communicate (the hamburger menu, the kebab menu, the AI sparkle, app brand-mark icons). Use when a function has no clear visual referent, when working within a domain that has its own icon vocabulary, when…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply iconic representation — using simplified visual symbols to communicate function, status, or category at a glance. Use when designing icon sets, choosing between icon and text labels, evaluating whether to lean on existing iconography (resemblance to a known object) or invent symbolic icons (arbitrary forms with…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply iconic resemblance — designing or choosing icons that visually look like what they represent. Use when picking icons for actions or objects with strong visual referents (camera, clock, lock, calendar), evaluating whether a custom icon is communicating, or testing whether your icon set actually conveys meaning to…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when designing onboarding, when diagnosing why users keep getting confused, when migrating users from one product convention to another, or when the system genuinely differs from familiar comparable products. Trigger when the user mentions "users don't get it," "we keep getting the same support…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when distinguishing the two mental-model types — system models (how the user thinks the system works) and interaction models (how the user thinks they should use it). Trigger when designing onboarding (which model to teach), reviewing user confusion (which model is wrong), or building documentation…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill whenever the design will be used by people who bring prior expectations — which is essentially every design. Trigger when designing onboarding, when picking metaphors (folders, channels, projects), when reviewing why users keep getting confused, when migrating from one product convention to another, or…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply behavioral mimicry — making an interface element behave like a familiar physical object so the user's physical-world intuitions transfer to the digital interaction. Use when designing gestures, animations, transitions, drag-and-drop, scroll behaviors, or any interaction where physical-world analogies could…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply surface mimicry — making an interface element look like a familiar physical object to communicate its purpose at a glance. Use when introducing a control or container that has no native UI vocabulary, designing a niche product that benefits from a recognizable visual reference (a journal that looks like a…
Deibler/universal-design-principles
Skill Claude CodeCodex
Apply the principle of Mimicry — borrowing the form, behavior, or visual language of something familiar to make a new design recognizable. Use when introducing a novel feature whose function would be opaque without an analogy, choosing between metaphor and convention, designing for a category your users already know…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when deciding what to surface and what to tuck — the editorial choices behind progressive disclosure. Trigger when laying out a settings page, picking which form fields to show by default, deciding whether a section starts collapsed or open, or arguing about whether a feature deserves primary chrome or…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when picking the mechanism for revealing tucked content — accordion vs. modal vs. tab vs. separate page vs. tooltip. Trigger when designing the UI for "More options," picking between an inline accordion and a side sheet, deciding whether a wizard step should be a modal or a separate page, or reviewing…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill whenever a design has more available than the user needs to see at this moment — settings panels with advanced options, forms with optional fields, dashboards with drill-down detail, navigation with deep IA, dialogs with "More options" affordances, marketing pages with FAQ accordions. Trigger when…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill whenever the user must locate or choose something from many possibilities — pickers, command palettes, navigation menus, autocompletes, recents lists, search results, settings panels. Trigger when designing inputs that ask the user to "type the right thing," when picking between dropdowns and…
Deibler/universal-design-principles
Skill Claude CodeCodex
Use this skill when designing pickers, dropdowns, comboboxes, autocompletes, command palettes, or any UI that lets the user select from a known set. Trigger when picking between a free-text field and a select; when designing a command palette; when reviewing why users keep typing wrong values into autocomplete inputs.…