Hover & Focus States

What it does

Designs complete interaction feedback across mouse, keyboard, touch, high contrast and reduced motion.

When to use it

Use for hover effects, focus-visible styles, pressed/selected states, or auditing hover-only information.

Problems it prevents

Stops information or feedback that's only reachable by mouse hover and invisible to keyboard or touch users.

Typical workflow

1. Define the full state set
2. Implement focus-visible, not just hover
3. Verify touch and high-contrast behaviour
4. Check no content is hover-only

Example output

Every interactive element with a visible, distinct state for hover, focus, press and disabled, reachable without a mouse.

What's included

1. 01
   The complete prompt

   The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

2. 02
   Install walkthrough

   Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

3. 03
   Use notes

   How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Works well with

• SystemAccessibility

  Checks keyboard navigation, screen-reader semantics, colour contrast and focus handling across any interface.

• SystemCinematic Animation System

  Designs bespoke, brand-specific motion (typography, imagery, interface, scroll, depth) that rejects default AI motion clichés.

• FocusedSkip to Content

  Implements a reliable keyboard bypass past repeated navigation, with correct focus restoration on route change.