From interaction-and-control-principles
Use this skill when designing constraints that work through perception, expectation, and learned convention — symbols, conventions, mappings. Trigger when designing iconography, picking control conventions, or designing for behavioral predictability. Sub-aspect of `constraint`; read that first.
How this skill is triggered — by the user, by Claude, or both
Slash command
/interaction-and-control-principles:constraint-psychologicalThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Psychological constraints don't physically prevent action; they make wrong actions feel obviously wrong by leveraging perception, learned convention, or perceived control-effect relationships. Weaker than physical constraints, but available where physical constraints aren't.
Psychological constraints don't physically prevent action; they make wrong actions feel obviously wrong by leveraging perception, learned convention, or perceived control-effect relationships. Weaker than physical constraints, but available where physical constraints aren't.
Communicate meaning through language and imagery. Examples:
In software UI: any icon or label that signals what an element does or what state it's in. The user reads the symbol and adjusts behavior accordingly.
Learned practices that the user expects systems to honor. Examples:
Conventions are powerful because they're transferable — a user who learned cmd-K opens the command palette in one app expects it in others. Honor conventions; deviate only with strong reason.
Perceived relationships between controls and their effects. Examples:
In software UI: a row of action buttons whose layout matches the order of objects they affect; a slider whose direction matches the direction of value change.
<!-- Mapping: + on the right increases, - on the left decreases -->
<div class="counter">
<button>−</button>
<span>5</span>
<button>+</button>
</div>
Good mapping makes the right action feel obvious; the wrong action feels wrong.
Icons that follow established conventions:
Reusing conventional icons is psychological constraint via convention. Inventing new icons forces users to learn new symbols; only do so when no convention fits.
A red "ERROR" badge psychologically constrains the user from treating the item as normal. The symbol pre-empts the wrong action.
Inline warnings ("This action cannot be undone") constrain the user from proceeding without consideration.
Cmd-S / Ctrl-S saves.Cmd-Z / Ctrl-Z undoes.Esc closes overlays./ focuses search.Cmd-K / Ctrl-K opens command palette.Honoring these conventions constrains the user to expected behavior. Violating them creates surprise.
(Color mapping intersects with semantic color systems; see color-semantic-systems.)
When psychological constraints fail, fall back to physical constraints (block the wrong action structurally) or explicit information (explain the rules).
constraint (parent).constraint-physical — the structural complement.mapping (cognition) — the broader principle.mimicry — psychological constraints often borrow from familiar systems.expectation-effect — convention-honoring designs match user expectations.npx claudepluginhub hdeibler/universal-design-principles --plugin interaction-and-control-principlesProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.