ui-accessible-component

Use when building or reviewing an interactive UI widget (dialog, menu, combobox, tabs, tooltip) — compose behavior/accessibility from a headless primitive and style from design tokens instead of hand-

SKILL.md

GitHub

When to use. Any time the task adds/changes an interactive component. Why: hand-written widgets are where a11y bugs (focus loss, no keyboard, wrong roles) hide, and an agent reliably forgets them.

Procedure.

  1. Identify the widget's WAI-ARIA APG pattern; if custom, open the APG page for it.
  2. Take behavior from a headless primitive (Base UI / Radix); never re-implement focus-trap, keyboard nav, or ARIA by hand.
  3. Style only via design tokens (see design-token-steward) — no hard-coded colors/spacing.
  4. Done when: keyboard-only operable, visible focus, aria-* matches the APG pattern, contrast ≥ 4.5:1, prefers-reduced-motion/prefers-color-scheme respected — verified by an axe-core run pasted into the result, not asserted.

Knowledge: KNOWLEDGE-LIBRARY.md §A1. Example: the Base UI dialog snippet there.

Похожие навыки: other

limits-colimits

Context management for Claude Code. Hooks maintain state via ledgers and handoffs. MCP execution without context polluti...

Автор: parcadei
3,392

ddttom-allaboutv2-claude-skills-block-collection-and-party

The Block Collection and Block Party are repositories for existing AEM blocks, build tools, code snippets, integration p...

Автор: mattnigh
20

nodnarbnitram-claude-code-extensions-claude-skills-esphome-confi

This skill should be used when the user asks to "create an esphome config", "set up an esp32 device", "configure esphome...

Автор: mattnigh
20