Claude Code optimize-ux for React loading and focus
Review asynchronous states, feedback and keyboard focus in a React component, using established animation components where available.
中文Install in Claude Code
Open the target React project in Claude Code. Full animation work uses the project’s Framer Motion, React Router, and matching UI components.
- Review `.claude/skills/optimize-ux/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/optimize-ux/` in your project and save the reviewed file as `.claude/skills/optimize-ux/SKILL.md`.
- Start Claude Code from that project's root, then select `/optimize-ux` in the slash menu.
Example task
In ui-42, a course list fetch starts with {loading: true}. Failure must display “Could not load courses” and let the keyboard reach Retry.What to check
Keep the existing fetch behavior. Show a placeholder while waiting and report {loading: false, message: 'Could not load courses', retryFocusable: true} on failure.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does an icon button need an accessible name if it has a tooltip?
Yes. A tooltip offers visual context, while a semantic name identifies the button to assistive technology. Keep keyboard focus visible too.