
ability-spectrum-mapping
Map how a product or feature works across the full spectrum of human ability — not just 'can use' and 'can't use'. Use when planning accessibility coverage, identifying gaps, or communicating accessibility scope to stakeholders. Triggers on: ability spectrum, range of users, who can use this, who can't use this, accessibility coverage, accessibility scope, ability range, spectrum of needs.
- Installs
- 72
- 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 ability-spectrum-mapping- 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 ability-spectrum-mapping 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.
Ability Spectrum Mapping
Map how a feature performs across the full range of human ability — from full capability to no capability in each dimension — to identify where the design starts to break down and who gets excluded.
Why a Spectrum
Accessibility is not binary. It's not "can see" vs "blind." The reality is a continuous spectrum:
- Full vision → needs glasses → low vision → legally blind → no vision
- Full hearing → mild loss → moderate loss → severe loss → deaf
- Full dexterity → mild tremor → limited range → single hand → no hands
- Full cognition → mild difficulty → moderate difficulty → significant support needs
Products don't go from "works" to "doesn't work" in a single step. They degrade gradually. The spectrum map shows you exactly where your design starts failing and for whom.
How to Build an Ability Spectrum Map
Step 1: List Core Tasks
Identify the 5–10 most important tasks a user performs with the product.
Step 2: Define the Spectrums
For each relevant ability dimension, define 4–5 points:
Vision spectrum: Full vision → Corrected vision → Low vision (magnification) → Very low vision (screen reader + some vision) → No vision (screen reader only)
Hearing spectrum: Full hearing → Mild loss (louder volume) → Moderate loss (captions needed) → Severe loss (captions + visual alerts) → Deaf (fully visual communication)
Motor spectrum: Full dexterity → Reduced precision (larger targets) → Limited range (keyboard only) → Minimal movement (switch or voice) → No hand use (eye tracking, sip-and-puff)
Cognitive spectrum: Comfortable with complexity → Prefers simplicity → Needs plain language → Needs step-by-step guidance → Needs significant support
Step 3: Map Each Task
For each task × ability point, rate:
- Works well — no barriers
- Works with friction — possible but harder than it should be
- Works with workaround — user must find their own solution
- Fails — task cannot be completed
Step 4: Identify the Breakpoints
Where does the design shift from "works" to "fails"? That breakpoint is your accessibility boundary. Everything to the right of it is excluded.
The goal is to push that boundary as far right as possible.
Presenting to Stakeholders
The spectrum map is a powerful communication tool because it shows:
- Exactly how many users are affected at each point
- Where investment in accessibility has the highest return
- That accessibility is a continuum, not a checkbox
- Which fixes would move the boundary and include more people
Template
| Task | Full vision | Low vision | Screen reader |
|---|---|---|---|
| Search for a product | Works well | Works with friction (small targets) | Fails (search suggestions not announced) |
| Complete checkout | Works well | Works well | Works with friction (form errors not associated) |
Assessment Questions
- Have you mapped core tasks across at least vision, motor, and cognitive spectrums?
- Can you identify the exact breakpoint where each task fails?
- Do you know which fixes would include the most additional users?
- Can you communicate the spectrum to stakeholders without technical jargon?
FAQ
What does the ability-spectrum-mapping skill do?
Map how a product or feature works across the full spectrum of human ability — not just 'can use' and 'can't use'. Use when planning accessibility coverage, identifying gaps, or communicating accessibility scope to stakeholders. Triggers on: ability spectrum, range of users, who can use this, who can't use this, accessibility coverage, accessibility scope, ability range, spectrum of needs.
How do I install ability-spectrum-mapping?
Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill ability-spectrum-mapping 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/ability-spectrum-mapping/ (personal) or .claude/skills/ability-spectrum-mapping/ (project).
Which AI agents can use ability-spectrum-mapping?
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 ability-spectrum-mapping 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 ability-spectrum-mapping?
It is published by owl-listener in owl-listener/inclusive-design-skills. It has 72 recorded installs.
More from owl-listener/inclusive-design-skills
plain-language-design
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
keyboard-navigation
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
cognitive-load-assessment
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
responsive-review
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
user-preference-respect
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
error-prevention-recovery
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.