rnr-mcp-server/build/prompts.js

A Model Context Protocol (MCP) server for React Native Reusables components, providing AI assistants with access to component source code, demos, and metadata for React Native development.

/**
 * Prompts implementation for the Model Context Protocol (MCP) server.
 *
 * This file defines prompts that guide the AI model's responses.
 * Prompts help to direct the model on how to process user requests.
 */
import { getFramework } from './utils/framework.js';
/**
 * List of prompts metadata available in this MCP server
 * Each prompt must have a name, description, and arguments if parameters are needed
 */
export const prompts = {
    "build-rnr-page": {
        name: "build-rnr-page",
        description: "Generate a complete React Native page using React Native Reusables components and blocks",
        arguments: [
            {
                name: "pageType",
                description: "Type of page to build (dashboard, login, calendar, sidebar, products, custom)",
                required: true,
            },
            {
                name: "features",
                description: "Specific features or components needed (comma-separated)"
            },
            {
                name: "layout",
                description: "Layout preference (sidebar, header, full-width, centered)"
            },
            {
                name: "style",
                description: "Design style (minimal, modern, enterprise, creative)"
            }
        ],
    },
    "create-dashboard": {
        name: "create-dashboard",
        description: "Create a comprehensive dashboard using React Native Reusables blocks and components",
        arguments: [
            {
                name: "dashboardType",
                description: "Type of dashboard (analytics, admin, user, project, sales)",
                required: true,
            },
            {
                name: "widgets",
                description: "Dashboard widgets needed (charts, tables, cards, metrics)"
            },
            {
                name: "navigation",
                description: "Navigation style (sidebar, top-nav, breadcrumbs)"
            }
        ],
    },
    "create-auth-flow": {
        name: "create-auth-flow",
        description: "Generate authentication pages using React Native Reusables login blocks",
        arguments: [
            {
                name: "authType",
                description: "Authentication type (login, register, forgot-password, two-factor)",
                required: true,
            },
            {
                name: "providers",
                description: "Auth providers (email, google, github, apple)"
            },
            {
                name: "features",
                description: "Additional features (remember-me, social-login, validation)"
            }
        ],
    },
    "optimize-rnr-component": {
        name: "optimize-rnr-component",
        description: "Optimize or enhance existing React Native Reusables components with best practices",
        arguments: [
            {
                name: "component",
                description: "Component name to optimize",
                required: true,
            },
            {
                name: "optimization",
                description: "Type of optimization (performance, accessibility, responsive, animations)"
            },
            {
                name: "useCase",
                description: "Specific use case or context for the component"
            }
        ],
    },
    "create-data-table": {
        name: "create-data-table",
        description: "Create advanced data tables with React Native Reusables components",
        arguments: [
            {
                name: "dataType",
                description: "Type of data to display (users, products, orders, analytics)",
                required: true,
            },
            {
                name: "features",
                description: "Table features (sorting, filtering, pagination, search, selection)"
            },
            {
                name: "actions",
                description: "Row actions (edit, delete, view, custom)"
            }
        ],
    },
};
/**
 * Map of prompt names to their handler functions
 * Each handler generates the actual prompt content with the provided parameters
 */
export const promptHandlers = {
    "build-rnr-page": ({ pageType, features = "", layout = "sidebar", style = "modern" }) => {
        const framework = getFramework();
        const isExpo = framework === 'expo';
        return {
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `Create a complete ${pageType} page using React Native Reusables components and blocks. 

REQUIREMENTS:
- Page Type: ${pageType}
- Features: ${features || 'Standard features for this page type'}
- Layout: ${layout}
- Design Style: ${style}

INSTRUCTIONS:
1. Use the MCP tools to explore available React Native Reusables blocks for this page type:
   - Use 'list_blocks' to see available categories
   - Use 'get_block' to fetch specific block implementations

2. Build the page following these principles:
   - Use React Native Reusables components and blocks as building blocks
   - Ensure responsive design with NativeWind CSS classes
   - Implement proper TypeScript types
   - Follow React Native best practices and hooks patterns
   - Include proper accessibility attributes for mobile
   - Use ${isExpo ? 'Expo' : 'React Native'} specific patterns

3. For ${pageType} pages specifically:
   ${getPageTypeSpecificInstructions(pageType)}

4. Code Structure:
   - Create a main page component
   - Use sub-components for complex sections
   - Include proper imports from React Native Reusables
   - Add necessary state management with React hooks
   - Include proper error handling
   - Add loading states for mobile UX

5. Styling Guidelines:
   - Use consistent spacing and typography
   - Implement ${style} design principles
   - Ensure dark/light mode compatibility
   - Use NativeWind design tokens
   - Optimize for mobile touch interactions

6. Mobile-Specific Considerations:
   - Implement proper touch targets (minimum 44px)
   - Add haptic feedback where appropriate
   - Optimize for different screen sizes
   - Handle keyboard appearance properly
   - Add pull-to-refresh functionality if needed

Please provide complete, production-ready code with proper imports and TypeScript types.`,
                    },
                },
            ],
        };
    },
    "create-dashboard": ({ dashboardType, widgets = "charts,tables,cards", navigation = "sidebar" }) => {
        const framework = getFramework();
        const isExpo = framework === 'expo';
        return {
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `Create a comprehensive ${dashboardType} dashboard using React Native Reusables blocks and components.

REQUIREMENTS:
- Dashboard Type: ${dashboardType}
- Widgets: ${widgets}
- Navigation: ${navigation}

INSTRUCTIONS:
1. First, explore available dashboard blocks:
   - Use 'list_blocks' with category="dashboard" to see available dashboard blocks
   - Use 'get_block' to examine dashboard-01 and other dashboard implementations
   - Study the structure and component usage

2. Dashboard Structure:
   - Implement ${navigation} navigation using appropriate React Native Reusables components
   - Create a responsive grid layout for widgets using NativeWind
   - Include proper header with user menu and notifications
   - Add breadcrumb navigation or tab navigation for mobile

3. Widgets to Include:
   ${widgets.split(',').map(widget => `- ${widget.trim()} with real-time data simulation`).join('\n   ')}

4. Key Features:
   - Responsive design that works on different mobile screen sizes
   - Interactive charts using a charting library compatible with React Native
   - Data tables with sorting, filtering, and pagination
   - Modal dialogs for detailed views
   - Toast notifications for user feedback
   - Pull-to-refresh functionality

5. Data Management:
   - Create mock data structures for ${dashboardType}
   - Implement state management with React hooks
   - Add loading states and error handling
   - Include data refresh functionality
   - Add offline support considerations

6. Mobile Optimization:
   - Implement proper touch interactions
   - Add haptic feedback for important actions
   - Optimize for portrait and landscape orientations
   - Handle keyboard appearance properly
   - Add swipe gestures where appropriate

7. Accessibility:
   - Proper accessibility labels and roles
   - VoiceOver/TalkBack support
   - Keyboard navigation support
   - Color contrast compliance
   - Screen reader compatibility

Provide complete code with all necessary imports, types, and implementations optimized for React Native.`,
                    },
                },
            ],
        };
    },
    "create-auth-flow": ({ authType, providers = "email", features = "validation" }) => {
        return {
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `Create a complete ${authType} authentication flow using React Native Reusables login blocks and components.

REQUIREMENTS:
- Auth Type: ${authType}
- Providers: ${providers}
- Features: ${features}

INSTRUCTIONS:
1. Explore login blocks first:
   - Use 'list_blocks' with category="login" to see available login blocks
   - Use 'get_block' to examine login-01, login-02, etc. implementations
   - Study different authentication patterns and layouts

2. Authentication Components:
   - Form validation using react-hook-form or similar
   - Input components with proper error states
   - Loading states during authentication
   - Success/error feedback with toast notifications
   - Biometric authentication support (fingerprint/face ID)

3. Providers Implementation:
   ${providers.split(',').map(provider => `- ${provider.trim()}: Implement ${provider.trim()} authentication UI`).join('\n   ')}

4. Security Features:
   - Form validation with proper error messages
   - Password strength indicator (if applicable)
   - Secure form submission patterns
   - Token storage using secure storage
   - Biometric authentication integration

5. Mobile UX Considerations:
   - Smooth transitions between auth states
   - Clear error messaging
   - Progressive enhancement
   - Mobile-friendly design
   - Remember me functionality (if applicable)
   - Auto-fill support for password managers

6. Form Features:
   ${features.split(',').map(feature => `- ${feature.trim()}: Implement ${feature.trim()} functionality`).join('\n   ')}

7. Layout Options:
   - Choose appropriate layout from available login blocks
   - Center-aligned forms with proper spacing
   - Background images or gradients (optional)
   - Responsive design for all screen sizes
   - Handle keyboard appearance properly

8. Platform-Specific Features:
   - iOS: Face ID/Touch ID integration
   - Android: Fingerprint authentication
   - Web: Social login buttons
   - Cross-platform: Secure token storage

Provide complete authentication flow code with proper TypeScript types, validation, and error handling optimized for React Native.`,
                    },
                },
            ],
        };
    },
    "optimize-rnr-component": ({ component, optimization = "performance", useCase = "general" }) => {
        const framework = getFramework();
        const isExpo = framework === 'expo';
        return {
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `Optimize the ${component} React Native Reusables component for ${optimization} and ${useCase} use case.

REQUIREMENTS:
- Component: ${component}
- Optimization Focus: ${optimization}
- Use Case: ${useCase}

INSTRUCTIONS:
1. First, analyze the current component:
   - Use 'get_component' to fetch the ${component} source code
   - Use 'get_component_demo' to see current usage examples
   - Use 'get_component_metadata' to understand dependencies

2. Optimization Strategy for ${optimization}:
   ${getOptimizationInstructions(optimization, isExpo)}

3. Use Case Specific Enhancements for ${useCase}:
   - Analyze how ${component} is typically used in ${useCase} scenarios
   - Identify common patterns and pain points
   - Suggest improvements for better developer experience
   - Consider mobile-specific optimizations

4. Implementation:
   - Provide optimized component code
   - Include performance benchmarks or considerations
   - Add proper TypeScript types and interfaces
   - Include usage examples demonstrating improvements
   - Add mobile-specific optimizations

5. Best Practices:
   - Follow React Native performance best practices
   - Implement proper memoization where needed
   - Ensure backward compatibility
   - Add comprehensive prop validation
   - Optimize for mobile rendering

6. Mobile-Specific Optimizations:
   - Implement proper touch handling
   - Add haptic feedback where appropriate
   - Optimize for different screen densities
   - Handle keyboard appearance
   - Add accessibility support

7. Testing Considerations:
   - Suggest test cases for the optimized component
   - Include accessibility testing recommendations
   - Performance testing guidelines
   - Cross-platform testing considerations

Provide the optimized component code with detailed explanations of improvements made for React Native.`,
                    },
                },
            ],
        };
    },
    "create-data-table": ({ dataType, features = "sorting,filtering,pagination", actions = "edit,delete" }) => {
        return {
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `Create an advanced data table for ${dataType} using React Native Reusables components.

REQUIREMENTS:
- Data Type: ${dataType}
- Features: ${features}
- Actions: ${actions}

INSTRUCTIONS:
1. Explore table components:
   - Use 'get_component' for 'table' to see the base table implementation
   - Use 'get_component_demo' for 'table' to see usage examples
   - Look for any existing table blocks in the blocks directory

2. Table Structure:
   - Create a reusable DataTable component
   - Define proper TypeScript interfaces for ${dataType} data
   - Implement column definitions with proper typing
   - Add responsive table design for mobile

3. Features Implementation:
   ${features.split(',').map(feature => {
                            const featureInstructions = {
                                'sorting': '- Column sorting (ascending/descending) with visual indicators',
                                'filtering': '- Global search and column-specific filters',
                                'pagination': '- Page-based navigation with configurable page sizes',
                                'search': '- Real-time search across all columns',
                                'selection': '- Row selection with bulk actions support'
                            };
                            return featureInstructions[feature.trim()] || `- ${feature.trim()}: Implement ${feature.trim()} functionality`;
                        }).join('\n   ')}

4. Row Actions:
   ${actions.split(',').map(action => `- ${action.trim()}: Implement ${action.trim()} action with proper confirmation dialogs`).join('\n   ')}

5. Data Management:
   - Create mock data for ${dataType}
   - Implement data fetching patterns (loading states, error handling)
   - Add optimistic updates for actions
   - Include data validation
   - Add offline support considerations

6. Mobile UI/UX Features:
   - Loading skeletons during data fetch
   - Empty states when no data is available
   - Error states with retry functionality
   - Responsive design for mobile devices
   - Touch-friendly interactions
   - Pull-to-refresh functionality
   - Infinite scroll for large datasets

7. Advanced Features:
   - Column resizing and reordering
   - Export functionality (CSV, JSON)
   - Bulk operations
   - Virtual scrolling for large datasets
   - Search highlighting
   - Row expansion for detailed views

8. Mobile-Specific Considerations:
   - Implement swipe actions for row operations
   - Add haptic feedback for interactions
   - Optimize for different screen sizes
   - Handle keyboard appearance properly
   - Add accessibility support

Provide complete data table implementation with proper TypeScript types, mock data, and usage examples optimized for React Native.`,
                    },
                },
            ],
        };
    },
};
/**
 * Helper function to get page type specific instructions
 */
function getPageTypeSpecificInstructions(pageType) {
    const instructions = {
        dashboard: `
   - Use dashboard blocks as foundation (dashboard-01)
   - Include metrics cards, charts, and data tables
   - Implement sidebar navigation with proper menu structure
   - Add header with user profile and notifications
   - Create responsive grid layout for widgets
   - Add pull-to-refresh functionality`,
        login: `
   - Use login blocks as reference (login-01 through login-05)
   - Implement form validation with clear error messages
   - Add social authentication options if specified
   - Include forgot password and sign-up links
   - Ensure mobile-responsive design
   - Add biometric authentication support`,
        calendar: `
   - Use calendar blocks (calendar-01 through calendar-32)
   - Implement different calendar views (month, week, day)
   - Add event creation and management
   - Include date navigation and filtering
   - Support event categories and colors
   - Add touch gestures for navigation`,
        sidebar: `
   - Use sidebar blocks as foundation (sidebar-01 through sidebar-16)
   - Implement collapsible navigation
   - Add proper menu hierarchy
   - Include search functionality
   - Support both light and dark themes
   - Add swipe gestures for mobile`,
        products: `
   - Use products blocks as reference (products-01)
   - Create product grid/list views
   - Implement filtering and sorting
   - Add product details modal or page
   - Include shopping cart functionality if needed
   - Add image lazy loading for performance`,
        custom: `
   - Analyze requirements and choose appropriate blocks
   - Combine multiple block patterns as needed
   - Focus on component reusability
   - Ensure consistent design patterns
   - Optimize for mobile performance`
    };
    return instructions[pageType] || instructions.custom;
}
/**
 * Helper function to get optimization specific instructions
 */
function getOptimizationInstructions(optimization, isExpo) {
    const instructions = {
        performance: `
   - Use React.memo for preventing unnecessary re-renders
   - Use useMemo and useCallback hooks appropriately
   - Optimize bundle size by code splitting
   - Implement virtual scrolling for large lists
   - Minimize bridge calls between native and JS
   - Use native modules for heavy computations
   - Optimize image loading and caching
   - Implement proper list virtualization`,
        accessibility: `
   - Add proper accessibility labels and roles
   - Ensure VoiceOver/TalkBack support
   - Implement focus management
   - Add screen reader compatibility
   - Ensure color contrast compliance
   - Support high contrast mode
   - Add haptic feedback for important actions`,
        responsive: `
   - Implement mobile-first design approach
   - Use NativeWind effectively for responsive design
   - Add proper breakpoints for all screen sizes
   - Optimize touch interactions for mobile
   - Ensure readable text sizes on all devices
   - Implement responsive navigation patterns
   - Handle different device orientations`,
        animations: `
   - Add smooth transitions between states
   - Implement loading animations and skeletons
   - Use React Native Reanimated for better performance
   - Add hover and focus animations
   - Implement page transition animations
   - Ensure animations respect reduced motion preferences
   - Add haptic feedback for interactions`
    };
    return instructions[optimization] ||
        'Focus on general code quality improvements and React Native best practices implementation.';
}