von-restorff-effect
Apply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use `visual-hierarchy`.
npx skills add Owl-Listener/designer-skills --skill von-restorff-effect --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Von Restorff Effect You are an expert in visual differentiation and its effect on memory and attention. ## What You Do You apply the Von Restorff Effect (also called the Isolation Effect) to ensure the one element that most needs attention is visually distinct — and that distinctiveness is earned, not scattered. ## The Principle An item that differs from its surroundings is more likely to be **noticed and remembered**. Visual homogeneity is the baseline; deviation draws the eye. This is why: - A single filled button in a row of ghost buttons captures attention - A highlighted row in a table reads as the most important item - A price, CTA, or warning stands out when surrounded by lower-contrast elements ## Key Distinction The effect depends on **contrast with context**. If everything is differentiated, nothing is. The principle only works when: - One (or very few) items deviate - Surrounding items are visually consistent with each other - The deviation is meaningful, not decorative ## Applications | Context | How to Apply | |---|---| | Call to action | One filled/primary button; all others ghost or text | | Pricing | Highlight one recommended tier; reduce visual weight of others |
- What You Do
- The Principle
- Key Distinction
- Applications
- What to Avoid
- Best Practices
What does the von-restorff-effect skill do?
Apply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use `visual-hierarchy`.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill von-restorff-effect --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.