MCP UI/UX Prompt Refiner

Instructions

Implementation Reference

• src/tools/animations.ts:279-465 (handler)

  Core implementation of the compose_animations tool. Generates comprehensive animation specifications including entry animations, scroll effects, hovers, CSS variables, keyframes, performance guidelines, and accessibility considerations based on interface type and intensity.
  export function composeAnimations(input: AnimationCompositionInput): string { const { interfaceType, intensity, sections, customRequirements } = input; const multiplier = getIntensityMultiplier(intensity); const entryAnims = selectEntryAnimations(intensity); const hoverAnims = selectHoverAnimations(intensity); const scrollAnims = selectScrollAnimations(intensity); const sectionSpecs = generateSectionAnimations(interfaceType, intensity); return `# Animation Specification ## Overview **Interface Type**: ${interfaceType.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())} **Animation Intensity**: ${intensity.toUpperCase()} **Complexity Level**: ${multiplier.complexity}/4 ${customRequirements ? `**Custom Requirements**: ${customRequirements}` : ''} --- ## Animation Philosophy For ${intensity} intensity, animations should feel: ${intensity === 'subtle' ? '- Barely noticeable but present\n- Quick and efficient\n- Professional and understated' : ''} ${intensity === 'moderate' ? '- Noticeable but not distracting\n- Purposeful and meaningful\n- Enhancing without overwhelming' : ''} ${intensity === 'dramatic' ? '- Eye-catching and impressive\n- Bold and expressive\n- Statement-making' : ''} ${intensity === 'cinematic' ? '- Theatrical and immersive\n- Story-telling through motion\n- Memorable and unique' : ''} --- ## Entry Animations ### Recommended Types ${entryAnims.map(name => { const anim = ENTRY_ANIMATIONS[name as keyof typeof ENTRY_ANIMATIONS]; return ` #### ${anim.name} - **Initial State**: \`${anim.initial}\` - **Final State**: \`${anim.final}\` - **Duration**: ${anim.duration} - **Easing**: ${anim.easing} - **Stagger**: ${anim.stagger} - **Description**: ${anim.description} `; }).join('')} --- ## Scroll Animations ### Active Effects ${scrollAnims.map(name => { const anim = SCROLL_ANIMATIONS[name as keyof typeof SCROLL_ANIMATIONS]; return ` #### ${anim.name} - **Description**: ${anim.description} - **Use Case**: ${anim.useCase} `; }).join('')} ### Implementation Notes - Use Intersection Observer for scroll-triggered animations - Trigger animations when element is 20-30% in viewport - Consider scroll velocity for parallax effects - Debounce scroll handlers for performance --- ## Hover & Interaction Effects ### Active Effects ${hoverAnims.map(name => { const anim = HOVER_ANIMATIONS[name as keyof typeof HOVER_ANIMATIONS]; return ` #### ${anim.name} - **Effect**: \`${anim.effect}\` - **Duration**: ${anim.duration} - **Description**: ${anim.description} - **Use Case**: ${anim.useCase} `; }).join('')} --- ## Loading States ### Recommended Loaders ${Object.entries(LOADING_ANIMATIONS).slice(0, 4).map(([key, anim]) => ` #### ${anim.name} - **Effect**: ${anim.effect} - **Implementation**: ${anim.implementation} - **Use Case**: ${anim.useCase} `).join('')} --- ## Section-by-Section Choreography ${sectionSpecs.map(spec => ` ### ${spec.element} - **Trigger**: ${spec.trigger} - **Animation**: ${spec.type} - **Duration**: ${spec.duration} - **Delay**: ${spec.delay} - **Purpose**: ${spec.description} `).join('')} --- ## Transition Choreography ### Staggered Reveals ${TRANSITION_CHOREOGRAPHY.staggeredFade.description} - Timing: ${TRANSITION_CHOREOGRAPHY.staggeredFade.timing} - Direction: ${TRANSITION_CHOREOGRAPHY.staggeredFade.direction} ### Page/View Transitions ${TRANSITION_CHOREOGRAPHY.exitThenEnter.description} - Timing: ${TRANSITION_CHOREOGRAPHY.exitThenEnter.timing} - Direction: ${TRANSITION_CHOREOGRAPHY.exitThenEnter.direction} --- ## Easing Reference ${Object.entries(EASING_FUNCTIONS).map(([key, easing]) => ` ### ${easing.name} - **CSS**: \`${easing.css}\` - **Feel**: ${easing.description} - **Use For**: ${easing.useCase} `).join('')} --- ${generateCSSVariables(intensity)} ${generateKeyframeExamples(intensity)} --- ## Performance Guidelines ### GPU-Accelerated Properties Only animate these for 60fps performance: - \`transform\` (translate, scale, rotate) - \`opacity\` - \`filter\` (blur, brightness) ### Avoid Animating - \`width\`, \`height\` (use transform: scale instead) - \`top\`, \`left\`, \`right\`, \`bottom\` (use transform: translate) - \`margin\`, \`padding\` (causes layout recalculation) - \`border-width\` (use box-shadow or pseudo-elements) ### Optimization Tips 1. Use \`will-change\` sparingly for complex animations 2. Use \`transform: translateZ(0)\` to force GPU layer 3. Debounce scroll-based animations 4. Use Intersection Observer, not scroll events 5. Prefer CSS animations over JavaScript when possible --- ## Accessibility: Reduced Motion Always provide reduced motion alternatives: \`\`\`css @media (prefers-reduced-motion: reduce) { /* Replace motion with instant/fade transitions */ .animated-element { animation: none; transition: opacity 0.2s ease; } /* Disable parallax and scroll-jacking */ .parallax { transform: none !important; } } \`\`\` --- *These animation specifications are designed to create a cohesive, polished feel that elevates the interface beyond typical AI-generated designs.* `; }
• src/server.ts:168-193 (registration)

  Registration of the compose_animations tool in the MCP server's list of tools, including name, description, and input schema definition.
  { name: 'compose_animations', description: 'Generate detailed animation specifications including entry animations, scroll effects, hover states, loading animations, and transition choreography with CSS code examples.', inputSchema: { type: 'object', properties: { interfaceType: { type: 'string', enum: ['website-landing', 'website-saas', 'website-portfolio', 'website-ecommerce', 'dashboard', 'mobile-app', 'desktop-app', 'cli-terminal', 'presentation', 'admin-panel', 'social-platform', 'custom'], description: 'Type of interface' }, intensity: { type: 'string', enum: ['subtle', 'moderate', 'dramatic', 'cinematic'], description: 'Animation intensity level' }, sections: { type: 'array', items: { type: 'string' }, description: 'Specific sections to animate' }, customRequirements: { type: 'string', description: 'Additional animation requirements' } }, required: ['interfaceType', 'intensity'] } },
• src/server.ts:71-81 (schema)

  Zod schema used for input validation in the tool handler.
  const ComposeAnimationsSchema = z.object({ interfaceType: z.enum([ 'website-landing', 'website-saas', 'website-portfolio', 'website-ecommerce', 'dashboard', 'mobile-app', 'desktop-app', 'cli-terminal', 'presentation', 'admin-panel', 'social-platform', 'custom' ]).describe('Type of interface'), intensity: z.enum(['subtle', 'moderate', 'dramatic', 'cinematic']) .describe('Animation intensity level'), sections: z.array(z.string()).optional().describe('Specific sections to animate'), customRequirements: z.string().optional().describe('Additional animation requirements'), });
• src/server.ts:286-295 (handler)

  MCP server dispatch handler for compose_animations tool call, which parses arguments and invokes the core composeAnimations function.
  case 'compose_animations': { const parsed = ComposeAnimationsSchema.parse(args); const result = composeAnimations({ interfaceType: parsed.interfaceType as InterfaceType, intensity: parsed.intensity as AnimationIntensity, sections: parsed.sections, customRequirements: parsed.customRequirements, }); return { content: [{ type: 'text', text: result }] }; }
• src/tools/animations.ts:51-116 (helper)

  Helper function generating section-by-section animation choreography used by the main handler.
  function generateSectionAnimations(interfaceType: InterfaceType, intensity: AnimationIntensity): AnimationSpec[] { const multiplier = getIntensityMultiplier(intensity); const specs: AnimationSpec[] = []; const sectionAnimations: Record<string, Partial<AnimationSpec>> = { hero: { element: 'Hero Section', trigger: 'load', type: 'Orchestrated entrance - background fades, then image scales, then text slides up, then CTA bounces', description: 'Creates dramatic first impression with choreographed reveal' }, navigation: { element: 'Navigation', trigger: 'load', type: 'Fade in with subtle slide down', description: 'Quick, unobtrusive appearance' }, features: { element: 'Feature Cards', trigger: 'scroll', type: 'Staggered fade up as they enter viewport', description: 'Sequential reveal creates rhythm and guides reading' }, testimonials: { element: 'Testimonials', trigger: 'scroll', type: 'Scale up from center with blur in', description: 'Draws attention to social proof' }, pricing: { element: 'Pricing Cards', trigger: 'scroll', type: 'Staggered slide in from sides, featured plan with extra bounce', description: 'Highlights recommended option' }, cta: { element: 'Call-to-Action', trigger: 'scroll', type: 'Pulse animation when in view, magnetic hover effect', description: 'Draws attention and encourages interaction' }, footer: { element: 'Footer', trigger: 'scroll', type: 'Simple fade in', description: 'Subtle, doesn\'t distract from content above' } }; const baseDuration = 0.5; const baseDelay = 0.1; for (const [section, config] of Object.entries(sectionAnimations)) { specs.push({ element: config.element || section, trigger: config.trigger || 'scroll', type: config.type || 'fade up', duration: `${(baseDuration * multiplier.duration).toFixed(2)}s`, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', delay: `${(baseDelay * multiplier.delay).toFixed(2)}s`, description: config.description || '' }); } return specs; }