hdeibler/universal-design-principles
55 skills
$npx skills add hdeibler/universal-design-principlesSkillInstalls
80-20-feature-prioritizationUse this skill when scoping a roadmap, prioritizing features, planning an MVP, or deciding what to ship and what to defer.80-20-redesign-targetingUse this skill when scoping a redesign or refactor — choosing which existing surfaces deserve full attention and which can be left mostly alone.80-20-ruleUse this skill whenever the design has many features, controls, or content elements and decisions about which to prioritize matter — feature roadmaps, redesign…aesthetic-usability-effectUse this skill when the design''s perceived quality affects whether users will tolerate friction, give the product a chance, or judge it as well-made — which…aesthetics-routerUse this skill whenever a design task involves the felt quality of an interface — beauty, polish, brand voice, persuasion, emotional response, marketing…affordanceUse this skill whenever the question is whether the user can tell what an element does — whether it looks clickable, draggable, expandable, editable, or…affordance-false-and-antiUse this skill when designing or fixing controls that mislead users — elements that look interactive but aren''t (false affordance), or controls that need to…affordance-signifiersUse this skill when the design has interactive capability but users aren''t *seeing* it — when the affordance is technically present but the signifier (the…archetypesUse this skill when designing brand voice, marketing positioning, mascot or character design, narrative arcs in product onboarding, or any expressive surface…archetypes-brand-voiceUse this skill when picking a brand archetype, propagating it across product and marketing surfaces, or auditing brand-voice consistency.archetypes-storytelling-arcsUse this skill when designing narrative content — landing pages, case studies, onboarding flows, marketing campaigns, sales decks, ad arcs.chunkingUse this skill whenever the user must hold a sequence of items in working memory — phone numbers, OTP codes, account IDs, address strings, multi-step…chunking-form-groupingUse this skill when designing or fixing long forms that ask the user for many fields — sign-up flows, profile setup, settings panels, checkout, intake forms,…chunking-numeric-and-otpUse this skill when designing inputs or displays for numeric strings — phone numbers, OTP / verification codes, credit card numbers, account IDs, license keys,…cognition-routerUse this skill whenever a design task involves cognition, mental models, learnability, complexity reduction, defaults, memory, scanning, or comprehension —…consistencyApply the principle of Consistency — making similar things look and behave similarly so users can transfer learning across the interface.consistency-externalApply external consistency — honoring conventions from outside your product (platform conventions, category conventions, established interaction patterns) so…consistency-internalApply internal consistency — making your product coherent with itself across all surfaces, components, and flows.constraint-physicalUse this skill when designing structural constraints that prevent invalid actions through the shape, layout, or behavior of the design itself — paths (channels…constraint-psychologicalUse this skill when designing constraints that work through perception, expectation, and learned convention — symbols, conventions, mappings.exposure-effectApply the Exposure Effect (mere-exposure effect) — the well-documented finding that repeated exposure to something tends to increase liking for it.exposure-onboardingUse the exposure effect deliberately in onboarding and habit formation — getting users to repeated, low-friction encounters with the product so familiarity…exposure-redesign-riskManage the risks of redesigns when users have built up exposure-based preference for the existing design.form-follows-functionUse this skill when designing the visual or aesthetic layer of a product, deciding between expressive style and functional restraint, evaluating decorative…form-follows-function-as-axiomUse this skill when applying the descriptive form-follows-function interpretation — functional clarity as a source of aesthetic quality.form-follows-function-success-criteriaUse this skill when the team is in a form-vs-function debate and needs to step back to define what "success" actually means for the design.hicks-lawUse this skill whenever a design has many options the user must choose among — menus, navigation, pickers, plan tiers, settings panels, action toolbars, lists…hicks-law-defaultsUse 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,…hicks-law-menusUse this skill when designing menus, dropdowns, navigation, command palettes, or any interface where the user picks from a list.hicks-law-pricingUse this skill when designing pricing tables, plan pickers, tier selectors, or any conversion surface where the choice itself is the conversion event.iconic-arbitrary-and-symbolicApply arbitrary and symbolic icon design — using forms with no inherent meaning that depend on convention to communicate (the hamburger menu, the kebab menu,…iconic-representationApply iconic representation — using simplified visual symbols to communicate function, status, or category at a glance.iconic-resemblanceApply iconic resemblance — designing or choosing icons that visually look like what they represent.immersionApply the principle of Immersion — designing for sustained focus and engagement, where the user becomes absorbed in the activity and loses awareness of the…immersion-distraction-costRecognize and design against the cost of attention fragmentation — the disproportionate damage that even small interruptions do to focused work.immersion-flowDesign for flow specifically — calibrate challenge to skill, provide immediate feedback, set clear goals, foreground the activity.mental-modelUse this skill whenever the design will be used by people who bring prior expectations — which is essentially every design.mental-model-mismatch-and-onboardingUse this skill when designing onboarding, when diagnosing why users keep getting confused, when migrating users from one product convention to another, or when…mental-model-system-vs-interactionUse this skill when distinguishing the two mental-model types — system models (how the user thinks the system works) and interaction models (how the user…mimicryApply the principle of Mimicry — borrowing the form, behavior, or visual language of something familiar to make a new design recognizable.mimicry-behavioralApply behavioral mimicry — making an interface element behave like a familiar physical object so the user''s physical-world intuitions transfer to the digital…mimicry-surfaceApply surface mimicry — making an interface element look like a familiar physical object to communicate its purpose at a glance.progressive-disclosureUse 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…progressive-disclosure-defaults-and-tuckingUse this skill when deciding *what to surface* and *what to tuck* — the editorial choices behind progressive disclosure.progressive-disclosure-disclosure-affordancesUse this skill when picking the *mechanism* for revealing tucked content — accordion vs. modal vs. tab vs. separate page vs. tooltip.recognition-over-recallUse this skill whenever the user must locate or choose something from many possibilities — pickers, command palettes, navigation menus, autocompletes, recents…recognition-pickers-and-palettesUse this skill when designing pickers, dropdowns, comboboxes, autocompletes, command palettes, or any UI that lets the user select from a known set.recognition-recents-and-suggestionsUse this skill when designing surfaces that accelerate repeat tasks through recents, frequently-used items, and contextual suggestions.wabi-sabiApply the principle of Wabi-Sabi — the aesthetic embrace of imperfection, impermanence, and naturalness.wabi-sabi-imperfectionDesign intentional imperfection that reads as warmth — subtle asymmetry, hand-drawn elements, organic textures, intentional irregularities.wabi-sabi-restraintApply wabi-sabi restraint — the discipline of leaving things out, of resisting decoration, of letting empty space and silence do design work.wayfindingUse this skill whenever a user must navigate within a non-trivial space — a multi-page web app, a documentation site, a hierarchical settings panel, a…wayfinding-breadcrumbs-and-contextUse this skill when designing the orientation chrome that tells users where they are — breadcrumbs, current-page indicators, page titles, header context, "you…wayfinding-physical-spatial-metaphorsUse this skill when deciding whether (and how) to borrow physical-world wayfinding metaphors for software — rooms, doors, paths, maps, landmarks.wayfinding-search-and-recoveryUse this skill when designing search as the universal wayfinding recovery, or when designing for users who got lost — 404 pages, "results not found," "you''ve…