UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Apply the Serial Position Effect — first and last items in a sequence are recalled best.
Install Serial Position Effect
$ npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Owl-Listener/designer-skills serial-position-effect --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/interaction-design/skills/serial-position-effect .claude/skills/serial-position-effect && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "serial-position-effect" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/serial-position-effect into .claude/skills/serial-position-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "serial-position-effect", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/serial-position-effectType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Owl-Listener/designer-skills serial-position-effect --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/interaction-design/skills/serial-position-effect .agents/skills/serial-position-effect && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "serial-position-effect" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/serial-position-effect into .agents/skills/serial-position-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "serial-position-effect", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Owl-Listener/designer-skills serial-position-effect --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/interaction-design/skills/serial-position-effect .cursor/skills/serial-position-effect && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "serial-position-effect" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/serial-position-effect into .cursor/skills/serial-position-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "serial-position-effect", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Owl-Listener/designer-skills.git --path interaction-design/skills/serial-position-effect--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Owl-Listener/designer-skills serial-position-effect --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/interaction-design/skills/serial-position-effect .gemini/skills/serial-position-effect && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "serial-position-effect" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/serial-position-effect into .gemini/skills/serial-position-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "serial-position-effect", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Owl-Listener/designer-skills serial-position-effectInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/interaction-design/skills/serial-position-effect .github/skills/serial-position-effect && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "serial-position-effect" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/serial-position-effect into .github/skills/serial-position-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "serial-position-effect", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Owl-Listener/designer-skills serial-position-effect --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/designer-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/interaction-design/skills/serial-position-effect .opencode/skills/serial-position-effect && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "serial-position-effect" agent skill from https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/serial-position-effect into .opencode/skills/serial-position-effect/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "serial-position-effect", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
serial-position-effect- GitHub stars
- 2.9k
- Token cost
- ~985 tokens
- SKILL.md length
- 546 words
- Files
- 1
- Skills in repo
- 107
- Repo updated
- First seen
- Licence
- MIT
At a glance
Apply the Serial Position Effect — first and last items in a sequence are recalled best.
- Tasks that involve UI design
- SKILL.md covers What You Do, The Principle, Design Applications and Relationship to Other Principles, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Serial Position Effect is an agent skill from Owl-Listener/designer-skills. 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).
Its SKILL.md is about 990 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering UI design. The repository describes itself as: Designer Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery. The licence is MIT.
When your agent uses it
- Tasks that involve UI design
Example prompts
- “/serial-position-effect”
What it can do on your machine
Read from SKILL.md and the folder at commit 9a6930c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Serial Position Effect loads about 985 tokens when it runs. Until then it costs about 62 tokens; SKILL.md has 546 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Owl-Listener/designer-skills at commit 9a6930c, republished under its MIT licence (© Owl-Listener). 546 words, ~985 tokens.
Download SKILL.mdSave it as
.claude/skills/serial-position-effect/SKILL.md (or your agent's skills folder).- 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
Show full SKILL.md (219 more words)Show less
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. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in interaction-design/skills/serial-position-effect of Owl-Listener/designer-skills.
Open the folder on GitHubat commit 9a6930c
Compare with similar skills
Serial Position Effect next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Serial Position Effect this skillOwl-Listener/designer-skills | 2.9k | — | ~985 | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause | |
| Stitch Prompt Enhancergoogle-labs-code/stitch-skills | 8.4k | 6 repos | ~1.7k | Automated safety check: Pass | Apache-2.0 |
Similar skills
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Make Interfaces Feel Better
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
UI UX Pro Max
ZxBing0066/pixel-converter
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
- Official
Stitch Prompt Enhancer
google-labs-code/stitch-skills
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
More from Owl-Listener/designer-skills
All 107 skills in this repoA B Test Design
Owl-Listener/designer-skills
Design an A/B experiment — hypothesis, variants, primary metric, and sample size.
Accessibility Test Plan
Owl-Listener/designer-skills
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol.
Aesthetic Usability
Owl-Listener/designer-skills
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction.
Affinity Diagram
Owl-Listener/designer-skills
Cluster many qualitative data points into themes and insight statements.
Animation Principles
Owl-Listener/designer-skills
Apply animation principles — easing, staging, follow-through — to one specific UI motion.
Business Design
Owl-Listener/designer-skills
Read financials, map competitive landscapes, and argue design decisions in the language of value.
Related
Categories
Questions about Serial Position Effect
What does Serial Position Effect do?
Apply the Serial Position Effect — first and last items in a sequence are recalled best. Serial Position Effect is an agent skill from Owl-Listener/designer-skills. Apply the Serial Position Effect — first and last items in a sequence are recalled best.
When should I use Serial Position Effect?
Serial Position Effect fits situations like: tasks that involve UI design.
How do I install Serial Position Effect in Claude Code?
Run `npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a claude-code`. Or copy the skill folder (interaction-design/skills/serial-position-effect in Owl-Listener/designer-skills) into .claude/skills/serial-position-effect in your project. Claude Code loads it when a task matches its description.
How do I install Serial Position Effect in Codex?
Run `npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a codex`. Or copy the skill folder (interaction-design/skills/serial-position-effect in Owl-Listener/designer-skills) into .agents/skills/serial-position-effect in your project. Codex loads it when a task matches its description.
Can I use Serial Position Effect in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Owl-Listener/designer-skills --skill serial-position-effect -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/serial-position-effect, .gemini/skills/serial-position-effect, .github/skills/serial-position-effect and .opencode/skills/serial-position-effect in your project.
What does Serial Position Effect need to run?
SKILL.md names no scripts, command-line tools or credentials: Serial Position Effect is instructions for the agent only.
Does Serial Position Effect access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Serial Position Effect safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Serial Position Effect use?
Serial Position Effect is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Serial Position Effect use?
About 985 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Serial Position Effect?
Skills that share tags, products or a category with Serial Position Effect: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Serial Position Effect?
Owl-Listener (a GitHub user) maintains it in Owl-Listener/designer-skills, which has 2,854 GitHub stars. The repository holds 107 skills in this directory. The repository was last updated on September 5, 2026.
Source: Owl-Listener/designer-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.