菜单
Reviews UI components and HTML for accessibility issues based on WCAG 2.1 AA standards. Use when the user says "check accessibility", "is this accessible", "WCAG review", "a11y audit", "fix accessibility issues", or pastes a React component, HTML, or JSX and asks for accessibility feedback.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | accessibility-review |
| description | Reviews UI components and HTML for accessibility issues based on WCAG 2.1 AA standards. Use when the user says "check accessibility", "is this accessible", "WCAG review", "a11y audit", "fix accessibility issues", or pastes a React component, HTML, or JSX and asks for accessibility feedback. |
Audits UI code against WCAG 2.1 AA standards. Finds missing ARIA attributes, keyboard navigation issues, focus management problems, color contrast gaps, and semantic HTML errors — with copy-paste fixes for each finding.
| Detail | Example |
|---|---|
| Code to review | React component, HTML, or JSX |
| Component type | Modal, form, button, nav, table, etc. |
| Interactive? | Yes (has click/keyboard events) / No |
| WCAG level target | AA (default) / AAA |
1. Semantic HTML
h1 → h2 → h3, no skipping)button not div onClick)ul/ol/li, tables use th with scopemain, nav, header, footer2. ARIA
aria-label or aria-labelledby on icons, icon buttons, and unlabeled controlsaria-expanded, aria-controls on toggles and accordionsaria-live on dynamic content (toasts, status messages)role="button" on a <button>)aria-hidden="true" on decorative elements3. Keyboard Navigation
4. Focus Management
<a href="#main">Skip to content</a>)outline: none without a replacement5. Color and Contrast
6. Images and Media
<img> have alt — empty alt="" for decorative images| Severity | Meaning |
|---|---|
| 🔴 Critical | Blocks users with disabilities entirely |
| 🟠 High | Significantly impairs access — WCAG AA failure |
| 🟡 Medium | Partial barrier — degrades experience |
| 🔵 Low | Best practice — not a strict WCAG failure |
[severity] Area — Short title
Issue: [what is wrong and which users it affects]
WCAG: [criterion number and name, e.g. 1.1.1 Non-text Content]
Fix:
```jsx
[accessible version of the code]
---
## Non-Negotiable Acceptance Criteria
- [ ] Every finding references the relevant WCAG criterion
- [ ] Every finding includes a code fix — not just a description
- [ ] Critical findings (blocks keyboard or screen reader users) are listed first
- [ ] If a category has no issues, state "No issues found" — never skip it
- [ ] Decorative images are explicitly checked for empty `alt=""`
---
## Output Format
~~~
## Accessibility Review
### Summary
[Overall assessment: WCAG AA compliant / fails on X criteria / needs work]
### Findings
[ordered by severity]
### Passed Checks
[categories with no issues]
### Verdict
- [ ] Fails WCAG 2.1 AA — fix Critical/High before release
- [ ] Passes with minor improvements recommended
- [ ] Fully compliant
~~~
Writes and debugs Bitbucket Pipelines CI/CD configuration. Use when the user says "set up Bitbucket Pipelines", "write a bitbucket-pipelines.yml", "my pipeline is failing", "add a deployment step", "configure CI for Bitbucket", "add tests to my pipeline", "set up staging and production deployments in Bitbucket", or shares a bitbucket-pipelines.yml and asks for help.
Refactors code to be cleaner, more readable, and easier to maintain — without changing behavior. Use when the user says "clean up this code", "refactor this", "this is messy", "improve readability", "simplify this function", "too many nested ifs", "make this more maintainable", or pastes code that works but is hard to read or understand.
Diagnoses and fixes performance problems in web apps: slow renders, memory leaks, large bundles, waterfall requests, and poor Core Web Vitals. Use when the user says "my app is slow", "too many re-renders", "memory leak", "LCP is bad", "bundle is too large", "this feels laggy", "optimize this component", or shares performance profiler output or Lighthouse results.
Audits package.json dependencies for outdated packages, security vulnerabilities, unnecessary deps, and version issues. Use when the user says "audit my dependencies", "check my packages", "what deps should I update", "clean up package.json", "are there security issues in my deps", or pastes a package.json.
Reviews code for bugs, security vulnerabilities, performance issues, and readability problems. Use when the user says "review this code", "check my code", "what's wrong with this", "code review", "audit this file", or pastes code and asks for feedback. Works with any language but optimized for TypeScript, JavaScript, React, and Node.js.
Generates correct conventional commit messages from a diff, file list, or change description. Use when the user says "write a commit message", "generate a commit", "what should I name this commit", "help me commit this", or pastes a git diff or list of changed files. Also apply when the user asks to squash, split, or rewrite existing commit messages.