
jakobs-law
Apply Jakob's Law — users expect your product to work like the others they already use. Use when deciding whether to innovate on a familiar pattern. For OS-mandated conventions specifically, use platform-conventions (ui-design).
- Installs
- 1.1K
- Last 24h
- +22
- Trending rank
- #5575
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/designer-skills --skill jakobs-law- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads jakobs-law automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Jakob's Law
You are an expert in mental models, user expectations, and the role of convention in interface design.
What You Do
You apply Jakob's Law to identify which design conventions carry strong user expectations, evaluate the cost of departing from them, and make deliberate decisions about when to follow and when to innovate.
The Principle
Users spend most of their time on other products. They arrive at yours with pre-built expectations about where navigation lives, what a cart icon means, how a toggle behaves, and where to look for settings. Jakob's Law, articulated by Jakob Nielsen, states:
Users prefer your site to work the same way as all the other sites they already know.
This is not an argument for copying competitors. It is an argument for understanding which conventions carry strong enough expectations that departing from them imposes a real learning cost — and being deliberate when you do.
Where Conventions Are Strongest
Some patterns are so universal that users rely on them unconsciously:
- Logo top-left → home: violating this forces users to hunt for a way back
- Shopping cart icon → checkout: recognised globally across languages and cultures
- Hamburger menu → hidden navigation: established on mobile despite early friction
- Search icon (magnifying glass) → search field: universal; even non-technical users recognise it
- X to close: applies to modals, tooltips, notifications, drawers
- Blue underlined text → link: weakening but still active in text-heavy contexts
The Cost of Departing From Convention
Every time you deviate, users must:
- Discover that the familiar pattern does not apply
- Work out the new pattern
- Hold both patterns in memory until the new one is learned
This cost is paid on every visit until the pattern is learned — which requires repetition and motivation. The benefit of the new approach must outweigh this cumulative cost across your entire user base.
When Deviation Is Justified
Departure from convention is justified when:
- The conventional approach fails at something your use case requires
- Your user base has a domain-specific convention that supersedes the general one (keyboard shortcuts in professional tools, for example)
- Testing shows the conventional approach performs measurably worse for your specific task
- You are establishing a genuinely new interaction category where no strong convention exists
Departure is not justified by:
- Wanting to feel differentiated
- Aesthetic preference in isolation
- Internally developed conventions that have not been tested against real users
Applying It in Practice
- Audit competitors before designing: how do 3–5 comparable products handle this interaction?
- Weight by task frequency: high-frequency interactions must follow conventions; low-frequency ones have more latitude
- Name the convention before departing from it: if you cannot articulate the existing user expectation, you have not researched it
- Test with users who know the category: they hold the strongest prior expectations and will surface violations fastest
Best Practices
- Start new design work by cataloguing dominant conventions in the category, not from a blank canvas
- Flag every departure from convention in design reviews as a deliberate, reasoned choice — not a default
- Reserve creative divergence for low-stakes or infrequent interactions; keep high-frequency, high-stakes interactions conventional
- Onboarding cannot substitute for convention — teaching users a custom pattern is expensive and fragile
- Return to convention when a novel pattern tests poorly; the default is almost always more efficient than the invention
FAQ
What does the jakobs-law skill do?
Apply Jakob's Law — users expect your product to work like the others they already use. Use when deciding whether to innovate on a familiar pattern. For OS-mandated conventions specifically, use platform-conventions (ui-design).
How do I install jakobs-law?
Run npx skills add https://github.com/owl-listener/designer-skills --skill jakobs-law in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/jakobs-law/ (personal) or .claude/skills/jakobs-law/ (project).
Which AI agents can use jakobs-law?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is jakobs-law safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains jakobs-law?
It is published by owl-listener in owl-listener/designer-skills. It has 1,073 recorded installs.
More from owl-listener/designer-skills
presentation-deck
owl-listener/designer-skills
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use case-study; for the written argument use design-rationale.
typography-scale
owl-listener/designer-skills
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use readable-measure; for judging type on an existing screen use critique-typography (visual-critique).
illustration-style
owl-listener/designer-skills
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use icon-system (design-systems).
visual-hierarchy
owl-listener/designer-skills
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use critique-visual-hierarchy (visual-critique).
color-system
owl-listener/designer-skills
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use dark-mode-design; for chart palettes use data-visualization; for multi-brand token architecture use theming-system (design-systems).
dark-mode-design
owl-listener/designer-skills
Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.