一键在 Manus 中运行任何 Skill

ui-accessibility-review

星标2

分支0

更新时间2026年2月21日 17:11

Review Wavecraft UI changes for practical accessibility quality (semantic HTML, keyboard/focus behavior, contrast, ARIA, reduced motion) and provide fix-ready findings.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

RonHouben

RonHouben/wavecraft

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

UI Accessibility Review

Use this skill to run a focused accessibility review for React/TypeScript/Tailwind changes in ui/ and sdk-template/ui/.

When to use

Any PR that changes UI components, forms, controls, or interaction flows
New component creation or major visual restyling
Before handoff when keyboard/focus behavior might be affected

Guardrails

Never edit docs/feature-specs/_archive/**.
Do not edit docs/roadmap.md (PO-owned).
Align with:
- docs/architecture/coding-standards.md
- docs/architecture/coding-standards-typescript.md
- docs/architecture/coding-standards-css.md
- docs/architecture/coding-standards-testing.md

Review workflow (checklist)

Identify changed UI files in ui/ and sdk-template/ui/.
Verify semantic structure first (button, label, nav, main, headings in logical order).
Validate full keyboard path: tab order, enter/space activation, escape/close flows, no keyboard traps.
Check focus visibility on all interactive elements (clear, persistent, non-color-only cues).
Confirm accessible names for controls (visible label, aria-label, or aria-labelledby).
Confirm ARIA is minimal and correct; prefer native semantics over custom roles.
Validate color contrast for text, icons, and control states (default/hover/focus/disabled/error).
Verify reduced motion support (prefers-reduced-motion) for transitions/animations.
Re-test with keyboard only after fixes.

Done criteria

No critical keyboard or focus issues remain.
Interactive controls have clear role/name/state.
Contrast and focus indicators are usable in all relevant states.
Motion-heavy behavior has a reduced-motion fallback.
Findings are actionable, file-specific, and prioritized (critical/high/medium/low).

Common pitfalls

Clickable div/span instead of button/a
Hidden focus outlines without replacement
Placeholder used as label
Incorrect ARIA (aria-hidden on focusable nodes, invalid role/state pairings)
Color-only error/success cues
Animation that cannot be reduced or disabled

同仓库更多 Skills

同仓库

playwright-mcp-ui-testing

RonHouben/wavecraft

Visual UI testing using Playwright MCP to interact with the Wavecraft web UI. Use this skill when testing UI components, verifying visual appearance, taking screenshots, or validating UI behavior that requires browser interaction. Requires the dev server running (cargo xtask dev).

2026-02-282

processor-component-creator

RonHouben/wavecraft

Create new processor UI components in @wavecraft/components with default scope (component, unit test, typecheck, index exports), processorId-derived IDs, and targeted validation.

2026-02-282

simple-browser-ui-testing

RonHouben/wavecraft

Execute required visual UI validation using VS Code integrated browser (Simple Browser) with screenshot evidence recorded in test-plan.md.

2026-02-282

create-pull-request

RonHouben/wavecraft

Creates a Pull Request using GitHub CLI with a PR summary file. Generates PR-summary.md in the feature-specs folder to avoid terminal pasting issues.

2026-02-212

design-token-compliance

RonHouben/wavecraft

Ensure Wavecraft UI changes use existing design tokens and reusable patterns instead of ad-hoc values, with a fast normalization checklist for spacing, color, typography, and states.

2026-02-212

ui-ux-change-workflow

RonHouben/wavecraft

Execute Wavecraft UI/UX changes through a practical end-to-end flow: discovery, proposal, implementation, verification, and handoff with minimal-scope commits.

2026-02-212

name	ui-accessibility-review
description	Review Wavecraft UI changes for practical accessibility quality (semantic HTML, keyboard/focus behavior, contrast, ARIA, reduced motion) and provide fix-ready findings.

UI Accessibility Review

Use this skill to run a focused accessibility review for React/TypeScript/Tailwind changes in ui/ and sdk-template/ui/.

When to use

Any PR that changes UI components, forms, controls, or interaction flows
New component creation or major visual restyling
Before handoff when keyboard/focus behavior might be affected

Guardrails

Never edit docs/feature-specs/_archive/**.
Do not edit docs/roadmap.md (PO-owned).
Align with:
- docs/architecture/coding-standards.md
- docs/architecture/coding-standards-typescript.md
- docs/architecture/coding-standards-css.md
- docs/architecture/coding-standards-testing.md

Review workflow (checklist)

Identify changed UI files in ui/ and sdk-template/ui/.
Verify semantic structure first (button, label, nav, main, headings in logical order).
Validate full keyboard path: tab order, enter/space activation, escape/close flows, no keyboard traps.
Check focus visibility on all interactive elements (clear, persistent, non-color-only cues).
Confirm accessible names for controls (visible label, aria-label, or aria-labelledby).
Confirm ARIA is minimal and correct; prefer native semantics over custom roles.
Validate color contrast for text, icons, and control states (default/hover/focus/disabled/error).
Verify reduced motion support (prefers-reduced-motion) for transitions/animations.
Re-test with keyboard only after fixes.

Done criteria

No critical keyboard or focus issues remain.
Interactive controls have clear role/name/state.
Contrast and focus indicators are usable in all relevant states.
Motion-heavy behavior has a reduced-motion fallback.
Findings are actionable, file-specific, and prioritized (critical/high/medium/low).

Common pitfalls

Clickable div/span instead of button/a
Hidden focus outlines without replacement
Placeholder used as label
Incorrect ARIA (aria-hidden on focusable nodes, invalid role/state pairings)
Color-only error/success cues
Animation that cannot be reduced or disabled