MCP UI/UX Prompt Refiner

export const UX_PATTERNS = { onboarding: { progressiveDisclosure: { name: "Progressive Disclosure", description: "Reveal complexity gradually as users need it", implementation: "Start with essential features, unlock advanced options through usage", bestFor: "Complex apps, dashboards, professional tools" }, guidedTour: { name: "Guided Tour", description: "Step-by-step walkthrough highlighting key features", implementation: "Overlay tooltips pointing to features with skip option", bestFor: "New users, feature-rich interfaces, B2B products" }, emptyStateEducation: { name: "Empty State Education", description: "Use empty states to teach and encourage action", implementation: "Illustrative empty states with clear CTAs and benefits", bestFor: "Data-driven apps, user-generated content platforms" }, contextualHelp: { name: "Contextual Help", description: "Help appears when and where users need it", implementation: "Inline tooltips, hover hints, contextual sidebars", bestFor: "Form-heavy interfaces, professional tools" } }, navigation: { breadcrumbs: { name: "Breadcrumb Navigation", description: "Shows current location in hierarchy", microInteraction: "Animate separator and hover states", bestFor: "E-commerce, documentation, file systems" }, tabNavigation: { name: "Tab Navigation", description: "Switch between related views", microInteraction: "Sliding indicator follows active tab", bestFor: "Settings, dashboards, multi-section content" }, megaMenu: { name: "Mega Menu", description: "Expanded menu showing multiple options", microInteraction: "Staggered reveal, visual previews on hover", bestFor: "E-commerce, large websites, enterprise apps" }, commandPalette: { name: "Command Palette", description: "Keyboard-driven quick actions (Cmd+K)", microInteraction: "Fuzzy search highlighting, recent actions", bestFor: "Power users, productivity tools, developer tools" }, bottomNav: { name: "Bottom Navigation (Mobile)", description: "Fixed bottom bar for primary actions", microInteraction: "Icon animation on tap, haptic feedback", bestFor: "Mobile apps, frequent-use features" } }, feedback: { optimisticUI: { name: "Optimistic UI", description: "Show success immediately, handle errors gracefully", implementation: "Update UI before server confirmation, rollback on failure", bestFor: "Social apps, real-time features, low-latency actions" }, progressIndicators: { name: "Progress Indicators", description: "Show system status during operations", types: ["Determinate (percentage)", "Indeterminate (spinner)", "Skeleton loaders"], bestFor: "File uploads, form submissions, page loads" }, microFeedback: { name: "Micro-Feedback", description: "Small animations confirming user actions", examples: ["Button press animation", "Like heart burst", "Success checkmark"], bestFor: "Interactive elements, form inputs, toggles" }, toastNotifications: { name: "Toast Notifications", description: "Non-blocking status messages", implementation: "Stack from bottom/top, auto-dismiss, swipe to dismiss", bestFor: "Success/error messages, background task completion" } }, forms: { inlineValidation: { name: "Inline Validation", description: "Validate fields as user types or on blur", microInteraction: "Smooth transition between states, helpful error messages", bestFor: "Sign-up forms, checkout flows, data entry" }, smartDefaults: { name: "Smart Defaults", description: "Pre-fill forms with intelligent suggestions", implementation: "Use location, past behavior, common choices", bestFor: "Checkout, settings, repeat actions" }, stepperForms: { name: "Multi-Step Forms", description: "Break long forms into digestible steps", microInteraction: "Progress bar, step indicators, smooth transitions", bestFor: "Onboarding, checkout, complex data collection" }, autoSave: { name: "Auto-Save", description: "Save progress automatically", microInteraction: "Subtle save indicator, 'Saved' confirmation", bestFor: "Long forms, editors, configuration pages" } }, search: { instantSearch: { name: "Instant Search", description: "Results appear as user types", microInteraction: "Debounced input, loading states, result highlighting", bestFor: "Large catalogs, documentation, content-heavy sites" }, facetedSearch: { name: "Faceted Search", description: "Filter results by multiple attributes", microInteraction: "Animated filter tags, live result counts", bestFor: "E-commerce, job boards, real estate" }, recentSearches: { name: "Recent Searches", description: "Show user's search history", microInteraction: "Quick-fill on click, clear individual/all", bestFor: "Returning users, frequent searchers" } }, dataDisplay: { infiniteScroll: { name: "Infinite Scroll", description: "Load more content as user scrolls", microInteraction: "Skeleton loaders, smooth content insertion", bestFor: "Social feeds, image galleries, long lists" }, pullToRefresh: { name: "Pull to Refresh", description: "Drag down to refresh content", microInteraction: "Custom animation during pull, success feedback", bestFor: "Mobile apps, real-time content, feeds" }, expandableRows: { name: "Expandable Rows", description: "Show more details on demand", microInteraction: "Smooth expand/collapse, icon rotation", bestFor: "Data tables, FAQs, nested information" }, virtualization: { name: "Virtualized Lists", description: "Only render visible items for performance", implementation: "React Virtual, TanStack Virtual", bestFor: "Large datasets, long lists, data grids" } } }; export const ACCESSIBILITY_PATTERNS = { focusManagement: { visibleFocus: "Always show clear focus indicators (min 3:1 contrast)", focusTrap: "Trap focus in modals, keep focus within dialog until closed", skipLinks: "Provide skip-to-main-content link for keyboard users", logicalOrder: "Tab order should match visual reading order" }, screenReaders: { semanticHTML: "Use proper heading hierarchy (h1 → h2 → h3)", ariaLabels: "Label interactive elements without visible text", liveRegions: "Announce dynamic content changes with aria-live", altText: "Descriptive alt text for meaningful images, empty for decorative" }, colorAndContrast: { textContrast: "4.5:1 for normal text, 3:1 for large text (WCAG AA)", colorNotAlone: "Don't rely solely on color to convey information", highContrastMode: "Support Windows High Contrast Mode" }, motion: { reducedMotion: "Respect prefers-reduced-motion media query", pauseControl: "Allow users to pause auto-playing content", noFlashing: "No content flashing more than 3 times per second" } }; export const ERROR_HANDLING_UX = { preventive: { constraints: "Disable invalid options, prevent impossible states", confirmation: "Confirm destructive actions with clear consequences", autosave: "Save progress to prevent data loss" }, informative: { clearMessages: "Tell users what went wrong in plain language", solutions: "Provide actionable steps to resolve the error", context: "Keep user's input, don't clear forms on error" }, recovery: { undo: "Provide undo option for reversible actions", drafts: "Save drafts of unsubmitted content", retry: "Easy retry option for failed operations" } }; export function getUXFlowPrompt(interfaceType: string): string { return ` ## UX Flow Guidelines for ${interfaceType} ### User Journey Stages 1. **Discovery** - How users find and first experience the interface 2. **Onboarding** - First-time user guidance and value demonstration 3. **Core Usage** - Main interaction loops and feature access 4. **Advanced Usage** - Power user features and customization 5. **Return Usage** - Re-engagement and continued value ### Interaction Patterns to Implement #### Navigation - Clear information architecture with intuitive hierarchy - Multiple navigation paths (breadcrumbs, search, menus) - Persistent access to primary actions - Contextual navigation within sections #### Feedback Loops - Immediate visual feedback for all interactions - Clear system status indicators - Success/error states with recovery options - Progress indication for longer operations #### Form Handling - Inline validation with helpful error messages - Smart defaults and auto-fill where appropriate - Clear required vs optional field indication - Graceful error recovery (preserve user input) #### Data Loading - Skeleton loaders showing content structure - Optimistic updates for perceived speed - Graceful degradation for slow connections - Clear empty states with actionable guidance ### Accessibility Requirements - WCAG 2.1 AA compliance minimum - Keyboard navigable throughout - Screen reader compatible - Reduced motion alternatives - Sufficient color contrast (4.5:1 text, 3:1 UI) ### Mobile Considerations - Touch targets minimum 44x44px - Thumb-zone friendly primary actions - Swipe gestures for common actions - Bottom navigation for frequent features `; }