Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

ui-accessibility-review

Estrellas2

Forks0

Actualizado21 de febrero de 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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

RonHouben

RonHouben/wavecraft

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Analistas de garantía de calidad de software y probadoresOcupaciones informáticas y matemáticas·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

Más de este repositorio

mismo repositorio

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