Stats
Actions
Tags
From cognition-and-learnability-principles
Use this skill when scoping a redesign or refactor — choosing which existing surfaces deserve full attention and which can be left mostly alone. Trigger when the user asks "where should we focus our redesign?", "do we need to redo all of this?", or when planning incremental design improvements with limited capacity. Sub-aspect of `80-20-rule`; read that first.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cognition-and-learnability-principles:80-20-redesign-targetingThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A common failure mode of redesigns: trying to redo everything. The result is years-long projects that ship late, lose institutional context, and arrive in a state no better than incremental updates would have produced. The 80/20 rule applied to redesign: identify the surfaces that produce most of user pain or business value; concentrate redesign effort there; leave the rest alone or batch into ...
A common failure mode of redesigns: trying to redo everything. The result is years-long projects that ship late, lose institutional context, and arrive in a state no better than incremental updates would have produced. The 80/20 rule applied to redesign: identify the surfaces that produce most of user pain or business value; concentrate redesign effort there; leave the rest alone or batch into a maintenance pass.
Where do users struggle? Sources:
The 80/20 cut: ~20% of surfaces typically account for ~80% of pain.
Where do users actually spend time? A beautiful but rarely-visited page deserves less polish than an ugly but constantly-used one.
Cross-reference traffic with the surface's role: a low-traffic but business-critical surface (Settings → Billing) earns redesign even if traffic alone wouldn't justify it.
Conversion surfaces (sign-up, checkout, upgrade) often punch above their traffic weight. A 5% lift on a low-traffic checkout might exceed a 30% lift on a high-traffic blog.
Some surfaces represent the brand or category position. The marketing home page, the first-run experience, the demo screen for sales. These deserve disproportionate attention because they shape perception of the whole product.
A typical redesign plan that respects 80/20:
Phase 1 (the critical 20% — heavy investment)
- Top 3–5 user-facing surfaces by pain × traffic × business impact
- Full redesign: research, design, build, polish, A/B test
- Often 60–70% of the project budget
Phase 2 (the meaningful tail — moderate investment)
- Next 10–15 surfaces
- Update to new design system; fix obvious issues; don't redesign whole flows
- 20–30% of budget
Phase 3 (the rest — minimal investment)
- All remaining surfaces
- Apply new design system tokens; update components; cosmetic only
- 10% of budget
Phase 4 (revisit)
- Six months in: re-measure. The "rest" that wasn't redesigned might still be performing fine.
- For surfaces that turn out to be problematic, fold into the next cycle.
Phases 1–3 ship over the course of the project; Phase 4 is the post-mortem that informs the next cycle.
80-20-rule (parent).80-20-feature-prioritization — applied to new feature planning rather than redesign.iteration (process) — redesigns benefit from iterative releases, not big bangs.factor-of-safety (process) — redesign with safety: A/B test, kill-switch, rollback paths.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.