Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

ui-accessibility-review

Étoiles2

Forks0

Mis à jour21 février 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

RonHouben

RonHouben/wavecraft

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Analystes en assurance qualité des logiciels et testeursProfessions informatiques et mathématiques·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

Plus depuis ce dépôt

même dépôt

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