Skills

---
name: "accessible-interface-review"
description: "Review and finish product interfaces with native semantics, keyboard coverage, responsive states, and the project’s established design system."
license: "MIT"
compatibility: "Agent Skills compatible coding agents"
metadata:
  heidi-playbook-id: "public:accessible-interface-review"
  heidi-playbook-version: "1"
  heidi-category: "design"
  heidi-tags: "hover,CSS,anti-slop"
---

# Accessible interface review

Use this skill when reviewing or finishing a product interface. Work from the product's existing design system, component library, tokens, and nearby patterns before proposing visual changes.

## Review order

1. Confirm the user journey and the primary action on every screen.
2. Check hierarchy, information density, alignment, responsive reflow, empty states, loading states, errors, and recovery paths.
3. Walk every interactive control with a keyboard. Confirm focus order, visible focus, labels, names, roles, states, and disabled behavior.
4. Prefer native elements and established components. Do not introduce one-off CSS when a project primitive or token already expresses the intent.
5. Check light, dark, narrow, and wide layouts with realistic content.

## Interface constraints

- Keep controls and inspectors visually subordinate to the work they control.
- Remove redundant labels, decorative headings, and repeated explanations.
- Preserve touch targets and readable contrast without inflating every control.
- Treat hover as an enhancement; every action must remain available without it.
- Use the project's exact spacing, typography, color, radius, and motion vocabulary.

## Finish

Report findings by severity, fix the authorized slice, and verify the real interaction rather than only the static markup.

Short name

accessible-interface-review

Content fingerprint

sha256:97a3e385d20053f219584c23910dd68e3e24f6afd81f06287bf5f1dba19b54bf

File size

2.5 KB