`validate_interaction_states`

Validate interaction state implementations against design system patterns.

Reference

Parameters

Name
code
Type
string · required
Description
Code snippet with interaction states
Name
component
Type
enum · optional
Description
Component type for context (button · input · card · link · checkbox · switch · select)
Name
strict
Type
boolean · optional
Description
Treat warnings as errors (default: false)

Returns

{
  valid            Whether code passes validation
  score            Quality score 0-100
  violations       Array of issues with suggestions
  missingStates    States that should be defined but aren't
  recommendations  Summary improvements
}

Description

Validate interaction state implementations against design system patterns.

CHECKS:

Missing states - hover/focus/disabled should be defined for interactive elements
Inconsistent patterns - hover effects should be consistent across similar components
Focus-visible vs focus - buttons/links should use focus-visible, inputs can use focus
Disabled accessibility - disabled elements need opacity + cursor + pointer-events
Dramatic effects - warns about overly dramatic hover/active effects

Parameters:

code (required): Code snippet containing component with interaction states
component (optional): Component type for context-specific validation
strict (optional): Treat warnings as errors (default: false)

Source

Defined in packages/mcp/src/tools.ts. The request handler lives alongside its registration in packages/mcp/src/tools/.

validate_interaction_states

Copy link to sectionReference