From cognition-and-learnability-principles
Use this skill whenever the design has many features, controls, or content elements and decisions about which to prioritize matter — feature roadmaps, redesign scoping, IA decisions, dashboard design, settings page audits, marketing content prioritization, or any design with many candidates competing for attention. Trigger when the user asks "what should we focus on?", "should we add another feature?", "what can we cut?", or when reviewing a UI cluttered with rarely-used controls. The 80/20 rule (Pareto principle) is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) and one of the most quoted across design, business, and engineering.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cognition-and-learnability-principles:80-20-ruleThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The 80/20 rule (also called the Pareto principle, after Italian economist Vilfredo Pareto) is the empirical observation that, in many systems, a small fraction of inputs produces most of the outputs — roughly 80% of effects from 20% of causes. The exact numbers vary (sometimes 70/30, sometimes 90/10) but the shape — a heavily uneven distribution — recurs across economics, management, software u...
The 80/20 rule (also called the Pareto principle, after Italian economist Vilfredo Pareto) is the empirical observation that, in many systems, a small fraction of inputs produces most of the outputs — roughly 80% of effects from 20% of causes. The exact numbers vary (sometimes 70/30, sometimes 90/10) but the shape — a heavily uneven distribution — recurs across economics, management, software usage, and design.
For designers, the principle's central use is prioritization: identify the 20% of features or content that produces 80% of the value, design that 20% well, and let the remaining 80% receive proportionally less effort.
In most large systems, effects aren't distributed evenly across causes. A small minority of features account for the bulk of usage. A small minority of users generate most of the support tickets. A small minority of bugs cause most of the crashes. A small minority of tasks consume most of the time. The 80/20 rule names the pattern and suggests that designers should put their effort where it produces the most return: the critical 20%, not the trailing 80%.
Design effort is finite. Spreading it evenly across all features means each receives shallow attention. Concentrating it on the critical 20% means those features are world-class; the remaining 80% can be functional-but-unrefined.
The principle's secondary use: it reframes what looks like "we have a lot of features" as "we have a few critical features and a long tail." That reframe shifts decisions about what to surface (the 20%), what to tuck (the 80%), what to cut (the deep tail), and where to invest performance, polish, and onboarding effort.
Three approaches, often combined:
Look at click data, page views, feature adoption rates. Sort by frequency; the top items by frequency are usually the critical fraction.
Caveats:
Identify the user's primary tasks. Map features to tasks. Features that participate in multiple primary tasks are critical; features that participate in none are candidates for removal.
Approach: write down the 5–10 most common user goals. For each, list the features required. Features that show up in many goals are critical; features that show up in no goal are suspect.
Ask users directly: which features couldn't they live without? Which would they hardly miss?
Caveats:
Imagine a dashboard with 16 widgets. Analytics show:
The 80/20 redesign:
Most users see a focused dashboard; the long tail remains for users who need it.
A sign-up flow asks for 12 fields. Analytics show drop-off jumps after field 6.
The 80/20 redesign:
Sign-up completion rises; data quality improves over time.
A docs site has 200 pages. Analytics show:
The 80/20 docs investment:
Resources flow to where readers are; the long tail receives custodial attention only.
A Settings page exposes 38 controls in one long scroll. Usage analytics:
The 80/20 redesign (combining with progressive-disclosure):
The page reads as 7 controls, not 38; the 17 rare are still reachable.
In most companies, ~20% of customers generate ~80% of revenue. Sales teams adapt: spend account-management effort on the critical fraction; lighter touch on the rest.
The same observation in software: a small fraction of users (sometimes called "power users" or "whales" depending on context) account for outsize usage, support burden, or revenue. Product decisions weigh their needs disproportionately — sometimes appropriately, sometimes to the detriment of the broader user base.
Profiling consistently shows that a small fraction of code paths consume most CPU time. The optimization rule: don't optimize speculatively; profile first; concentrate effort on the hot paths revealed.
Retail and logistics warehouses often arrange storage so the 20% of SKUs that account for 80% of orders are nearest the shipping dock. Walking distance is the cost being optimized.
A small fraction of patients consume most of healthcare resources. Population-health programs target this critical fraction with intensive case management, leaving the broader population on lighter-touch protocols.
A few hundred words account for most of typical conversation. Language-learning apps prioritize those — the 20% of vocabulary that produces 80% of comprehension — before tackling rarer words.
progressive-disclosure — the structural mechanism for surfacing the 20% and tucking the 80%.hicks-law — fewer visible options means faster decisions; 80/20 informs which options to make visible.signal-to-noise-ratio (perception) — the 80/20 is the design layer where SNR decisions are made.flexibility-usability-tradeoff (interaction) — every feature added affects usability; 80/20 helps you decide which trade-offs are worth it.form-follows-function (aesthetics) — the function should derive from the 20% of needs that drive most of the use.ockhams-razor — among solutions that work, prefer the simplest; 80/20 is a discipline of subtraction.80-20-feature-prioritization — applying the rule to roadmap and scoping decisions.80-20-redesign-targeting — applying the rule to redesign-pass focus and effort allocation.The 80/20 rule is more a discipline than a principle. The discipline is: don't believe your features are equally important; measure; concentrate effort. Designers who internalize this consistently produce sharper products than those who try to give every feature equal love.
npx claudepluginhub hdeibler/universal-design-principles --plugin cognition-and-learnability-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.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.