Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Design feedback and status communication that works across senses — visual, auditory, and haptic.
Install Feedback And Status
$ npx skills add Owl-Listener/inclusive-design-skills --skill feedback-and-status -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Owl-Listener/inclusive-design-skills feedback-and-status --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/inclusive-design-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/inclusive-interaction/skills/feedback-and-status .claude/skills/feedback-and-status && 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 "feedback-and-status" agent skill from https://github.com/Owl-Listener/inclusive-design-skills/tree/main/inclusive-interaction/skills/feedback-and-status into .claude/skills/feedback-and-status/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feedback-and-status", 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/inclusive-design-skills/tree/main/inclusive-interaction/skills/feedback-and-statusType 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/inclusive-design-skills --skill feedback-and-status -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Owl-Listener/inclusive-design-skills feedback-and-status --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/inclusive-design-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/inclusive-interaction/skills/feedback-and-status .agents/skills/feedback-and-status && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "feedback-and-status" agent skill from https://github.com/Owl-Listener/inclusive-design-skills/tree/main/inclusive-interaction/skills/feedback-and-status into .agents/skills/feedback-and-status/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feedback-and-status", 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/inclusive-design-skills --skill feedback-and-status -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Owl-Listener/inclusive-design-skills feedback-and-status --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/inclusive-design-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/inclusive-interaction/skills/feedback-and-status .cursor/skills/feedback-and-status && 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 "feedback-and-status" agent skill from https://github.com/Owl-Listener/inclusive-design-skills/tree/main/inclusive-interaction/skills/feedback-and-status into .cursor/skills/feedback-and-status/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feedback-and-status", 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/inclusive-design-skills.git --path inclusive-interaction/skills/feedback-and-status--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/inclusive-design-skills --skill feedback-and-status -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Owl-Listener/inclusive-design-skills feedback-and-status --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/inclusive-design-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/inclusive-interaction/skills/feedback-and-status .gemini/skills/feedback-and-status && 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 "feedback-and-status" agent skill from https://github.com/Owl-Listener/inclusive-design-skills/tree/main/inclusive-interaction/skills/feedback-and-status into .gemini/skills/feedback-and-status/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feedback-and-status", 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/inclusive-design-skills feedback-and-statusInstalls 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/inclusive-design-skills --skill feedback-and-status -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Owl-Listener/inclusive-design-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/inclusive-interaction/skills/feedback-and-status .github/skills/feedback-and-status && 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 "feedback-and-status" agent skill from https://github.com/Owl-Listener/inclusive-design-skills/tree/main/inclusive-interaction/skills/feedback-and-status into .github/skills/feedback-and-status/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feedback-and-status", 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/inclusive-design-skills --skill feedback-and-status -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/inclusive-design-skills feedback-and-status --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Owl-Listener/inclusive-design-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/inclusive-interaction/skills/feedback-and-status .opencode/skills/feedback-and-status && 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 "feedback-and-status" agent skill from https://github.com/Owl-Listener/inclusive-design-skills/tree/main/inclusive-interaction/skills/feedback-and-status into .opencode/skills/feedback-and-status/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "feedback-and-status", 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
feedback-and-status- GitHub stars
- 105
- Token cost
- ~871 tokens
- SKILL.md length
- 407 words
- Files
- 1
- Skills in repo
- 55
- Repo updated
- First seen
- Licence
- MIT
At a glance
Design feedback and status communication that works across senses — visual, auditory, and haptic.
- Works in 5 steps: Is colour ever the only indicator of… → Can a screen reader user perceive every… → Are error messages persistent until… → …
- Designing loading states
- SKILL.md covers Core Principle, The Multi-Channel Rule, Design Patterns and Assessment Questions
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Feedback And Status is an agent skill from Owl-Listener/inclusive-design-skills. Design feedback and status communication that works across senses — visual, auditory, and haptic. Use when designing loading states, success messages, progress indicators, notifications, alerts, or any system response to user action. Triggers on: feedback, status, notification, alert, loading, progress, success message, confirmation, toast, snackbar, screen reader announcement, aria-live, colour alone.
Its SKILL.md is about 870 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 Accessibility and Design review and critique. The repository describes itself as: Inclusive design skills for AI coding agents — from cognitive accessibility to adaptive interfaces, inclusive research, and accessibility decision-making. The licence is MIT.
When your agent uses it
- Designing loading states
- Success messages
- Progress indicators
- Any system response to user action
Example prompts
- “/feedback-and-status”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Is colour ever the only indicator of status?
- Can a screen reader user perceive every status change?
- Are error messages persistent until resolved?
- Do transient messages display long enough to be read?
- Does every user action produce perceivable feedback?
What it can do on your machine
Read from SKILL.md and the folder at commit 6e0740f. 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
Feedback And Status loads about 871 tokens when it runs. Until then it costs about 106 tokens; SKILL.md has 407 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/inclusive-design-skills at commit 6e0740f, republished under its MIT licence (© Owl-Listener). 407 words, ~871 tokens.
Download SKILL.mdSave it as
.claude/skills/feedback-and-status/SKILL.md (or your agent's skills folder).- name
- feedback-and-status
- description
- Design feedback and status communication that works across senses — visual, auditory, and haptic. Use when designing loading states, success messages, progress indicators, notifications, alerts, or any system response to user action. Triggers on: feedback, status, notification, alert, loading, progress, success message, confirmation, toast, snackbar, screen reader announcement, aria-live, colour alone.
Feedback and Status Design
Design system feedback that reaches every user — regardless of whether they can see the screen, hear audio, or feel vibration. No single sense should be the only channel.
Core Principle
Never communicate status through one sense alone. What happens if the user can't see it? Can't hear it? Can't feel it?
The Multi-Channel Rule
Every piece of feedback should work through at least two channels:
| Feedback type | Visual | Text | Sound | Haptic |
|---|---|---|---|---|
| Success | Green tick | "Saved successfully" | Confirmation tone | Short vibration |
| Error | Red highlight | Specific error message | Alert tone | Double vibration |
| Loading | Spinner/bar | "Loading..." | None (silence) | None |
| Warning | Yellow banner | Warning text | Optional tone | Optional vibration |
Screen readers are a critical third channel — all visual feedback must be announced to assistive technology.
Design Patterns
Don't Rely on Colour Alone
- Red/green is invisible to 8% of men with colour vision deficiency
- Always combine colour with: icon, text label, pattern, or position
- Error states: red + error icon + text description
- Success states: green + tick icon + text confirmation
- Test: does this still communicate the same thing in greyscale?
Immediate Feedback
- Button press: visual change within 100ms (pressed state)
- Form submission: loading indicator within 1 second
- Completion: success message within 2 seconds of finishing
- Error: highlight the specific field, not just a banner at the top
Persistent vs. Transient Feedback
- Transient (toast/snackbar): only for non-critical confirmations. Show for at least 5 seconds. Include a way to review missed messages.
- Persistent (inline): for errors, warnings, and anything the user needs to act on. Never auto-dismiss error messages.
- Screen reader users miss transient messages — use aria-live="polite" for non-urgent updates, aria-live="assertive" for critical alerts.
Show full SKILL.md (138 more words)Show less
Progress Communication
- Determinate progress (known duration): show percentage or step count
- Indeterminate progress (unknown duration): show spinner with text like "Loading your results..."
- Long processes (over 10 seconds): add estimated time remaining
- Very long processes: allow background processing with notification on completion
Status Without Vision
- All status changes must be announced to screen readers
- Use aria-live regions for dynamic content updates
- Don't rely on visual position alone to convey status (e.g., a moved item in a kanban board needs a text announcement)
- Error messages must be programmatically associated with their field (aria-describedby)
Assessment Questions
- Is colour ever the only indicator of status?
- Can a screen reader user perceive every status change?
- Are error messages persistent until resolved?
- Do transient messages display long enough to be read?
- Does every user action produce perceivable feedback?
© 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 inclusive-interaction/skills/feedback-and-status of Owl-Listener/inclusive-design-skills.
Open the folder on GitHubat commit 6e0740f
Compare with similar skills
Feedback And Status 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 |
|---|---|---|---|---|---|---|
| Feedback And Status this skillOwl-Listener/inclusive-design-skills | 105 | — | ~871 | Automated safety check: Pass | MIT | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None | |
| Frontend Designjwynia/agent-skills | 170 | — | ~3.2k | Automated safety check: Pass | MIT | |
| Frontend Designspinspire/pocketbase-sveltekit-starter | 511 | 1 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Design AuditAThevon/genjutsu | 440 | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| WCAG 2.1 AA Accessibility Reviewgetcrew44/crew44 | 356 | — | ~741 | Automated safety check: Pass | MIT |
Similar skills
- Official
Frontend Design
jwynia/agent-skills
Create distinctive, production-grade frontend interfaces with high design quality.
Frontend Design
spinspire/pocketbase-sveltekit-starter
Create distinctive, production-grade frontend interfaces with high design quality and accessible markup.
Design Audit
AThevon/genjutsu
Design audit checklist - motion gaps, accessibility, color consistency, responsive, performance.
WCAG 2.1 AA Accessibility Review
getcrew44/crew44
Audits a design or page against WCAG 2.1 AA for contrast, keyboard use, focus, labels, touch targets and screen reader behavior, with a severity-ranked report.
Better Interface
trycompai/crm
User-invoked, cross-discipline interface review that coordinates better-accessibility, better-layout, better-writing, better-typography, better-colors, and better-ui.
More from Owl-Listener/inclusive-design-skills
All 55 skills in this repoAssistive Technology Scenarios
Owl-Listener/inclusive-design-skills
Writes usage scenarios, use cases and storyboards that show real people using screen readers, switches, voice control and other assistive technology to finish tasks.
Error Prevention and Recovery
Owl-Listener/inclusive-design-skills
Designs forgiving forms and flows: prevent input errors, write messages that say what happened and what to do, and add undo, confirmation and recovery paths.
Accessible Heading Structure
Owl-Listener/inclusive-design-skills
Designs heading hierarchies for screen reader navigation and cognitive accessibility on pages, articles, dashboards and forms.
Ability Spectrum Mapping
Owl-Listener/inclusive-design-skills
Maps a feature across a range of vision, hearing, motor and cognitive ability to find where the design starts to fail, and to explain accessibility scope to stakeholders.
Accessibility Debt Tracking
Owl-Listener/inclusive-design-skills
Track and manage accessibility debt — known accessibility issues that have been deferred.
Accessibility Testing Strategy
Owl-Listener/inclusive-design-skills
Plan what to test, how to test, and who should test for accessibility.
Related
Categories
Questions about Feedback And Status
What does Feedback And Status do?
Design feedback and status communication that works across senses — visual, auditory, and haptic. Feedback And Status is an agent skill from Owl-Listener/inclusive-design-skills. Design feedback and status communication that works across senses — visual, auditory, and haptic.
When should I use Feedback And Status?
Feedback And Status fits situations like: designing loading states; success messages; progress indicators; any system response to user action.
How do I install Feedback And Status in Claude Code?
Run `npx skills add Owl-Listener/inclusive-design-skills --skill feedback-and-status -a claude-code`. Or copy the skill folder (inclusive-interaction/skills/feedback-and-status in Owl-Listener/inclusive-design-skills) into .claude/skills/feedback-and-status in your project. Claude Code loads it when a task matches its description.
How do I install Feedback And Status in Codex?
Run `npx skills add Owl-Listener/inclusive-design-skills --skill feedback-and-status -a codex`. Or copy the skill folder (inclusive-interaction/skills/feedback-and-status in Owl-Listener/inclusive-design-skills) into .agents/skills/feedback-and-status in your project. Codex loads it when a task matches its description.
Can I use Feedback And Status 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/inclusive-design-skills --skill feedback-and-status -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/feedback-and-status, .gemini/skills/feedback-and-status, .github/skills/feedback-and-status and .opencode/skills/feedback-and-status in your project.
What does Feedback And Status need to run?
SKILL.md names no scripts, command-line tools or credentials: Feedback And Status is instructions for the agent only.
Does Feedback And Status 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 Feedback And Status 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 Feedback And Status use?
Feedback And Status 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 Feedback And Status use?
About 871 tokens (SKILL.md is roughly 3.5k 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 Feedback And Status?
Skills that share tags, products or a category with Feedback And Status: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Frontend Design (jwynia/agent-skills, 170 stars), Frontend Design (spinspire/pocketbase-sveltekit-starter, 511 stars) and Design Audit (AThevon/genjutsu, 440 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Feedback And Status?
Owl-Listener (a GitHub user) maintains it in Owl-Listener/inclusive-design-skills, which has 105 GitHub stars. The repository holds 55 skills in this directory. The repository was last updated on June 9, 2026.
Source: Owl-Listener/inclusive-design-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.