Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

ui-accessibility-review

Estrelas2

Forks0

Atualizado21 de fevereiro de 2026 às 17:11

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

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

RonHouben

RonHouben/wavecraft

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Analistas de garantia de qualidade de software e testadoresInformática e Matemática·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

Mais deste repositório

mesmo repositório

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