`validate_transition`

Validate transition implementation against design system patterns.

Reference

Parameters

Name
code
Type
string · required
Description
Code snippet with transition/animation
Name
context
Type
string · optional
Description
Navigation context (e.g., "modal", "dropdown", "tab-switch")
Name
strict
Type
boolean · optional
Description
Treat pattern mismatches as errors (default: false)

Returns

{
  valid        Whether code passes validation
  score        Quality score 0-100
  violations   Array of issues found with suggestions
  tokensUsed   Durations and easings found in code
  suggestions  Summary recommendations
}

Description

Validate transition implementation against design system patterns.

CHECKS:

Arbitrary durations → Should use semantic tokens (instant, quick, normal, slow)
Generic easings → Should use semantic easings (out-quart, out-expo, in-quart)
Pattern mismatch → Modal should use Layer (scale+fade), not slide
Missing reduced motion → Must have prefers-reduced-motion alternative

Parameters:

code: Code snippet containing transition/animation CSS or Tailwind
context (optional): What this transition is for (e.g., "modal", "dropdown", "tab-switch")
strict (optional): Treat pattern mismatches 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_transition

Copy link to sectionReference