Agent skill
interactive-states
Use when implementing button states, form field states, or interactive feedback. Covers hover, active, focus, disabled, loading states.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/interactive-states
SKILL.md
Interactive States
Agent Workflow (MANDATORY)
Before implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Check existing state patterns
- fuse-ai-pilot:research-expert - Framer Motion state animations
After: Run fuse-ai-pilot:sniper for validation.
Overview
| State | Visual | Timing |
|---|---|---|
| Default | Base appearance | - |
| Hover | Scale/color change | 50-100ms |
| Pressed | Scale down | 100-150ms |
| Focus | Ring outline | instant |
| Disabled | Opacity 50% | - |
| Loading | Spinner | - |
Quick Reference
Button States
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
transition={{ duration: 0.1 }}
className={cn(
"px-4 py-2 rounded-lg bg-primary",
"focus:outline-none focus-visible:ring-2",
"disabled:opacity-50 disabled:cursor-not-allowed",
)}
>
{isLoading ? <Spinner /> : children}
</motion.button>
Card Hover
<motion.div
whileHover={{
y: -4,
boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.15)",
}}
transition={{ duration: 0.2 }}
>
Input States
const inputStates = {
default: "border-border bg-surface",
focus: "border-primary ring-2 ring-primary/20",
valid: "border-success bg-success/5",
error: "border-destructive bg-destructive/5",
disabled: "border-muted bg-muted/50 cursor-not-allowed",
};
Focus Visible
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
Loading State
<button disabled={isLoading}>
{isLoading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
"Submit"
)}
</button>
Validation Checklist
[ ] All 5 states defined (default, hover, active, focus, disabled)
[ ] Loading state with spinner
[ ] Hover timing 50-100ms
[ ] Focus visible for keyboard users
[ ] Disabled prevents interaction
Best Practices
DO
- Use Framer Motion for hover/tap
- Visible focus for accessibility
- Spinner for loading states
- Consistent timing across app
DON'T
- Skip focus states
- Forget loading feedback
- Use slow animations (>200ms)
- Remove outline without replacement
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?