suggest_transition
Suggest the appropriate transition pattern for a navigation context.
Reference
Parameters
- Name
from- Type
- string · required
- Description
Source element (e.g., "card", "list-item", "button", "tab")
- Name
to- Type
- string · required
- Description
Destination (e.g., "detail-page", "modal", "tab-content")
- Name
context- Type
- string · optional
- Description
Additional navigation context
- Name
hasSharedElement- Type
- boolean · optional
- Description
Whether a visual element persists/morphs between states
Returns
- Recommended pattern with spatial message and reasoning
- Motion tokens (duration, easing) with actual values
- Implementation guidance (CSS classes, Tailwind, React hook)
- Alternative patterns to consider
- Accessibility guidance
Description
Suggest the appropriate transition pattern for a navigation context.
DECISION TREE:
- Is there a shared element? → Container Transform ("This IS that")
- Is this an overlay/modal? → Layer ("This is ON TOP of that")
- Is this navigating back (child→parent)? → Drill Back
- Is this navigating deeper (parent→child)? → Drill Forward ("This is INSIDE that")
- Is this switching between peers? → Shared Axis ("This is NEXT TO that")
- Content changing in place? → Fade ("This REPLACES that")
Parameters:
- from: Source element (e.g., "card", "list-item", "button", "tab")
- to: Destination (e.g., "detail-page", "modal", "tab-content", "drawer")
- context (optional): Additional context (e.g., "sidebar navigation", "form wizard")
- hasSharedElement (optional): Whether a visual element morphs between states
Source
Defined in packages/mcp/src/tools.ts.
The request handler lives alongside its registration in packages/mcp/src/tools/.
Last reviewed by @jschuyler