LogoClawIndex
CasesSkillsAbout
LogoClawIndex

canon-interaction - Design Interactive UI States

Design and audit interactive states, focus management, keyboard navigation, and click targets

Tags

Updated: 2026-05-28
interaction designaccessibilityUI statesfocus managementkeyboard navigation

Capabilities

design interactive statesaudit interactive statesmanage focusimplement keyboard navigation

Typical Inputs

Design specificationsUI elementsAccessibility guidelines

Typical Outputs

Interactive state codeFocus management codeKeyboard navigation code

What this skill does

  • design interactive states
  • audit interactive states
  • manage focus
  • implement keyboard navigation
  • define click targets
  • handle drag and drop
  • handle user input
  • define visual states
  • implement focus rings
  • define hover states
  • define active states
  • define disabled states
  • implement loading states

Inputs

  • Design specifications
  • UI elements
  • Accessibility guidelines
  • WCAG requirements
  • WAI-ARIA practices

Outputs

  • Interactive state code
  • Focus management code
  • Keyboard navigation code
  • Click target definitions
  • Accessibility solutions

Requirements

  • WCAG 2.2 compliance
  • WAI-ARIA support
  • CSS focus-visible support

Source

  • Spec: SKILL.md

ClawIndex

OpenClaw Skills & Use Case Index

ClawIndex is an ecosystem-driven index of OpenClaw skills and real-world use cases.

Index

Skills·
Cases

Meta

About·
Disclaimer·
Email·
GitHub
© 2026 ClawIndex All Rights Reserved.