focus-attention-design

Q: How do I install focus-attention-design?

Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill focus-attention-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/focus-attention-design/ (personal) or .claude/skills/focus-attention-design/ (project).

by owl-listenerProductivity & Automation

Design interfaces that support sustained focus and reduce distractions. Use when designing for users with ADHD, attention difficulties, anxiety, or any context where focus matters — dashboards, reading experiences, task flows, forms, learning interfaces. Triggers on: focus, distraction, ADHD, attention, too busy, cluttered, visual noise, autoplay, notifications, pop-ups, interruptions.

Installs: 79
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/owl-listener/inclusive-design-skills --skill focus-attention-design

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads focus-attention-design automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Focus and Attention Design

Design interfaces that help people maintain focus on their task by removing unnecessary distractions and giving users control over their attention environment.

Core Principle

Every element on screen should serve the user's current task. If it exists for the business but not for the user, it is a distraction.

Design Patterns

Single Purpose

One primary action per screen or section
Secondary actions visually de-emphasised (smaller, muted colour, text link)
Remove decorative elements that don't serve the task
Hide advanced options behind "Show more" or "Advanced"
Present choices sequentially, not simultaneously, when possible

Interruption Control

No autoplay audio or video
No pop-ups that aren't triggered by user action
Allow users to dismiss or defer notifications
Save state before showing any modal — closing it must not lose work
Never remove content from the screen without user action
If a banner or alert is needed, make it dismissable and non-blocking

Visual Calm

Generous whitespace between sections
Limited colour palette (3–4 colours for UI elements)
Subtle borders and dividers, not heavy lines
No flashing, blinking, or rapidly changing content
Animation only for functional feedback (loading, transitions)
Always respect prefers-reduced-motion

Time Sensitivity

Avoid time limits unless absolutely essential
If time limits exist, warn well before expiry
Provide easy extension (one click, not multi-step)
Allow at least 20 seconds per required decision
Save progress automatically in timed contexts
For session timeouts: save state and allow seamless return

Assessment Questions

For each screen, ask:

What is the ONE thing the user should do here?
Is that one thing the most visually prominent element?
What on this screen competes for attention? Can it be removed or muted?
Can the user control interruptions (notifications, modals, autoplay)?
Is there artificial urgency that doesn't serve the user?

Anti-Patterns to Flag

Countdown timers on non-time-sensitive actions
"Only 2 left!" urgency messaging
Autoplay video or audio
Multiple competing calls to action
Chat widgets that pop up unsolicited
Moving or animated advertisements near task areas
Layout shifts that redirect attention

FAQ

What does the focus-attention-design skill do?

How do I install focus-attention-design?

Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill focus-attention-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/focus-attention-design/ (personal) or .claude/skills/focus-attention-design/ (project).

Which AI agents can use focus-attention-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is focus-attention-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains focus-attention-design?

It is published by owl-listener in owl-listener/inclusive-design-skills. It has 79 recorded installs.