// Fix accessibility issues in UI components. Use when adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns, forms, validation, error states, keyboard shortcuts, focus states, or icon-only controls.
| name | fixing-accessibility |
| description | Fix accessibility issues in UI components. Use when adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns, forms, validation, error states, keyboard shortcuts, focus states, or icon-only controls. |
Fix accessibility issues.
/fixing-accessibility
Apply these constraints to any UI work in this conversation.
/fixing-accessibility <file>
Review the file against all rules below and report:
Do not rewrite large parts of the UI. Prefer minimal, targeted fixes.
Reference these guidelines when:
| priority | category | impact |
|---|---|---|
| 1 | accessible names | critical |
| 2 | keyboard access | critical |
| 3 | focus and dialogs | critical |
| 4 | semantics | high |
| 5 | forms and errors | high |
| 6 | announcements | medium-high |
| 7 | contrast and states | medium |
| 8 | media and motion | low-medium |
| 9 | tool boundaries | critical |
<!-- icon-only button: add aria-label -->
<!-- before -->
<button><svg>...</svg></button>
<!-- after -->
<button aria-label="Close"><svg aria-hidden="true">...</svg></button>
<!-- div as button: use native element -->
<!-- before -->
<div onclick="save()">Save</div>
<!-- after -->
<button onclick="save()">Save</button>
<!-- form error: link with aria-describedby -->
<!-- before -->
<input id="email" /> <span>Invalid email</span>
<!-- after -->
<input id="email" aria-describedby="email-err" aria-invalid="true" />
<span id="email-err">Invalid email</span>
CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness. Covers animation theory, CSS animations, Framer Motion, performance, accessibility, and real-world walkthrough patterns.
Fix animation performance issues. Use when adding or changing UI animations, refactoring janky interactions, implementing scroll-linked motion, animating layout/filters/masks, or reviewing components that use will-change, transforms, or measurement.
Review code for security issues in self-hosted and managed Vercel deployments of this Slack bot. Covers secrets, tokens, permissions, logs, user data handling, SSRF, and data minimization. Use when reviewing code for security, auditing data handling, checking for leaked secrets, or verifying privacy compliance.
Use when working on Slack agent/bot code, Chat SDK applications, or projects using `chat` and `@chat-adapter/slack`. Provides development patterns, testing requirements, and quality standards.
Use when creating new skills, editing existing skills, or verifying skills work before deployment
Use when working on Slack agent/bot code, Chat SDK applications, or projects using `chat` and `@chat-adapter/slack`. Provides development patterns, testing requirements, and quality standards.