Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

ui-accessibility-review

Sterne2

Forks0

Aktualisiert21. Februar 2026 um 17:11

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

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

RonHouben

RonHouben/wavecraft

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

Softwarequalitätssicherungsanalysten und -testerInformatik- und Mathematikberufe·SOC 15-1253

SKILL.md

readonly

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

Mehr aus diesem Repository

gleiches Repository

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

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