serial-position-effect — Claude Code skill: ordering menus, lists
A skill that applies the serial position effect: it tells the agent which items belong first and last, and what lands in the memory valley.
npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a claude-codeWhat serial-position-effect does
The skill hands your agent a set of rules for ordering sequences. People recall the start of a list (primacy) and its end (recency) best, while the middle fades — the predictable dead zone the skill calls the serial position valley. Ask it to reorder a nav bar, onboarding steps or a pricing list, and it maps items onto those zones.
Inside is a model instruction covering navigation, curated lists, wizard flows and notification stacks. Critical actions go first, account and logout go last, and required-but-tedious steps — permissions, legal agreements, form fields — get buried in the middle. When an important item has to stay put, the skill reaches for visual distinction: weight, color, icon or size.
One thing to know: this is about position, not about making a single item stand out wherever it sits. The same repository ships von-restorff-effect for that. Install runs through npx skills add, so you need Node.js with npx available.
What it helps with
- map navigation items onto the zones users actually recall
- reorder onboarding steps so the key value moment opens or closes the flow
- push required but tedious steps into the middle of a wizard
- check the order of pricing tiers and the default-selected option
- find middle items in a long menu that drop out of recall
Example prompts for the agent
- reorder the main menu using the serial position effect
- check my onboarding step order: what's first, what's last, what's stuck in the middle
- look at this pricing list and tell me which items fall into the middle valley
How to install serial-position-effect
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a claude-code2Manually: put the files in place
~/.claude/skills/serial-position-effect/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/serial-position-effect/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a codex2Manually: put the files in place
.agents/skills/serial-position-effect/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a cursor2Manually: put the files in place
.cursor/skills/serial-position-effect/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills serial-position-effect2Manually: put the files in place
.github/skills/serial-position-effect/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/serial-position-effectManually: put the files in place
.devin/skills/serial-position-effect/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about serial-position-effect
How do I install serial-position-effect in Claude?
Run npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a claude-code. The skill lands at ~/.claude/skills/serial-position-effect/SKILL.md.
What does serial-position-effect do?
It guides the agent in ordering menus, lists and steps so important items sit at the beginning or the end instead of the middle, which people recall least.
How is serial-position-effect different from von-restorff-effect?
The first works with an item's position in a sequence; the second makes one item visually distinct regardless of where it sits. Use von-restorff-effect when you need that emphasis.
Source text
SKILL.md · MIT
--- name: serial-position-effect description: Apply the Serial Position Effect — first and last items in a sequence are recalled best. Use when ordering menus, lists, and steps. For emphasising one item regardless of its position, use `von-restorff-effect` (ui-design). --- # Serial Position Effect You are an expert in memory and attention as they apply to list design and content sequencing. ## What You Do You apply the Serial Position Effect to ensure critical items in lists, menus, and sequences occupy the positions users are most likely to notice and recall — and to compensate with visual distinction where important items must sit in the middle. ## The Principle When people encounter a sequence of items, they tend to remember: - **Items at the beginning** (primacy effect) — encoded into long-term memory during the time spent processing the rest of the list - **Items at the end** (recency effect) — still held in short-term memory when recall occurs - **Items in the middle** — remembered least; both attention and encoding dip here This is the Serial Position Effect, established through Hermann Ebbinghaus's memory research and extended through subsequent cognitive psychology. The "serial position valley" is the predictable dead zone in the middle of any sequence. ## Design Applications ### Navigation and menus Place critical navigation items at the start or the end, never buried in the middle: - Global actions (home, dashboard, primary content) → first position - Account, settings, logout → last position (convention also reinforces this) - Avoid placing critical items in positions 3–5 of a 7-item menu — this is the serial position valley ### Lists and curated content In any ordered list where some items matter more than others: - Put the strongest choices first and last - A default-selected option or featured pricing tier should be first or last, never in the middle - In a three-item set, the middle item is the comparison anchor; the items you want recalled are the outer two ### Onboarding and wizard flows The first step establishes the mental model; the last step is remembered as the conclusion: - Place key value moments (the first aha, the primary benefit demonstration) at the opening or the close - Bury required-but-tedious steps — permissions, legal agreements, form fields — in the middle - The last step should always be resolution and confirmation, not another administrative requirement ### Notification stacks and task lists - Notifications: the most recent (recency effect) and the oldest persistent (primacy effect from scrolling) receive the most attention; middle notifications drop out - Task lists: items at the top and bottom get completed first; middle items stall — either surface them deliberately or restructure the list ## Relationship to Other Principles | Principle | Relationship | |---|---| | Peak-End Rule | Both explain why the end of an experience is over-weighted; they reinforce each other at the close of any sequence | | Miller's Law / chunking | Chunking reduces the effective sequence length; fewer chunks means a smaller middle zone | | Von Restorff Effect | Visual distinctiveness can rescue a middle-positioned item; it escapes the memory valley through differentiation | ## Best Practices - Audit navigation and list order by mapping item criticality against position — high-criticality items should not be in the middle - When an important item cannot be moved, use visual distinction (weight, color, icon, size) to help it escape the serial position valley - For ordered instructions, repeat critical items from earlier in the sequence at the end as a summary — exploit both primacy and recency - Never place the primary call to action in the middle of a set of three — first or last - Test list recall in user studies by asking users to describe what options they saw; middle items will consistently drop out of recall, revealing the valley
© Owl-Listener · MIT · Owl-Listener/designer-skills