362 lines
11 KiB
Python
362 lines
11 KiB
Python
# WORLD-CLASS REACT DESIGNER PROMPTS
|
|
# Creates dynamic, production-ready React architecture for ANY application
|
|
|
|
from typing import Dict, Any, List
|
|
|
|
class ReactPrompts:
|
|
"""World-class React frontend designer prompts for dynamic component generation"""
|
|
|
|
def create_dynamic_react_prompt(self, feature_name: str, feature_description: str,
|
|
technical_requirements: List[str], business_logic_rules: List[str],
|
|
complexity_level: str, tech_stack: Dict, all_features: List[str]) -> str:
|
|
"""
|
|
Creates a world-class React designer prompt that generates production-ready
|
|
React applications dynamically based on actual functional requirements
|
|
"""
|
|
|
|
# Extract tech stack details
|
|
frontend_config = tech_stack.get('frontend', {})
|
|
ui_library = self._extract_ui_library(frontend_config)
|
|
state_management = self._extract_state_management(frontend_config)
|
|
|
|
return f"""You are a WORLD-CLASS React Frontend Architect with 10+ years of experience building production React applications. You have deep expertise in:
|
|
|
|
- React 18+ with hooks, context, and modern patterns
|
|
- State management (Redux Toolkit, Zustand, Context API)
|
|
- UI libraries (Tailwind CSS, Material-UI, Chakra UI)
|
|
- Performance optimization and code splitting
|
|
- TypeScript integration and type safety
|
|
- Testing strategies and best practices
|
|
|
|
# YOUR MISSION
|
|
Analyze the following REAL project requirements and design a complete, production-ready React frontend architecture. Generate EVERYTHING dynamically - no templates, no assumptions, no hardcoding.
|
|
|
|
# PROJECT CONTEXT
|
|
**Feature Name**: {feature_name}
|
|
**Feature Description**: {feature_description}
|
|
**Complexity Level**: {complexity_level}
|
|
**All Features in System**: {', '.join(all_features) if all_features else 'Single feature system'}
|
|
|
|
**Technical Requirements**:
|
|
{self._format_requirements_list(technical_requirements)}
|
|
|
|
**Business Logic Rules**:
|
|
{self._format_requirements_list(business_logic_rules)}
|
|
|
|
**Technology Stack Context**:
|
|
- Frontend Framework: React 18+
|
|
- UI Library: {ui_library}
|
|
- State Management: {state_management}
|
|
- Routing: React Router v6
|
|
- Build Tool: Vite or Create React App
|
|
|
|
# YOUR EXPERT ANALYSIS PROCESS
|
|
|
|
## 1. FEATURE ANALYSIS
|
|
Analyze "{feature_name}" to understand:
|
|
- What user interfaces are needed?
|
|
- What user interactions will occur?
|
|
- What data needs to be displayed and managed?
|
|
- What forms and input validation are required?
|
|
- What real-time features or updates are needed?
|
|
|
|
## 2. COMPONENT ARCHITECTURE
|
|
Design React components based on actual feature needs:
|
|
- Break down the feature into logical UI components
|
|
- Determine component hierarchy and data flow
|
|
- Identify reusable vs feature-specific components
|
|
- Plan component composition and props interfaces
|
|
|
|
## 3. STATE MANAGEMENT STRATEGY
|
|
Design state management using {state_management}:
|
|
- What global state is needed for this feature?
|
|
- What local component state is sufficient?
|
|
- How will data flow between components?
|
|
- What API calls and data fetching patterns are needed?
|
|
|
|
## 4. ROUTING AND NAVIGATION
|
|
Design routing structure for {feature_name}:
|
|
- What pages/views are needed?
|
|
- How do users navigate through the feature?
|
|
- What route protection is needed?
|
|
- How does this integrate with other features?
|
|
|
|
## 5. UI/UX IMPLEMENTATION
|
|
Design user interface using {ui_library}:
|
|
- What specific UI components are needed?
|
|
- How will forms be structured and validated?
|
|
- What loading states and error handling?
|
|
- How will responsive design be handled?
|
|
|
|
# CRITICAL REQUIREMENTS
|
|
1. **ANALYZE ACTUAL FEATURE** - Don't use generic templates
|
|
2. **IMPLEMENT BUSINESS RULES** as form validation and UI logic
|
|
3. **CREATE PRODUCTION-READY COMPONENTS** with proper props and state
|
|
4. **USE {ui_library}** styling consistently throughout
|
|
5. **IMPLEMENT {state_management}** for state management
|
|
6. **ADD PROPER ERROR HANDLING** and loading states
|
|
7. **MAKE IT RESPONSIVE** and accessible
|
|
8. **INCLUDE TYPESCRIPT INTERFACES** for type safety
|
|
|
|
# OUTPUT FORMAT
|
|
Return ONLY a JSON object with this exact structure:
|
|
|
|
{{
|
|
"folder_structure": {{
|
|
"src/components/{feature_name.lower().replace(' ', '')}": {{
|
|
"purpose": "Feature-specific components for {feature_name}",
|
|
"components": [
|
|
"List of specific component files needed for this feature"
|
|
]
|
|
}},
|
|
"src/components/ui": {{
|
|
"purpose": "Reusable UI components using {ui_library}",
|
|
"components": [
|
|
"List of reusable components needed"
|
|
]
|
|
}},
|
|
"src/pages": {{
|
|
"purpose": "Page-level components for routing",
|
|
"pages": [
|
|
"List of pages needed for {feature_name}"
|
|
]
|
|
}},
|
|
"src/hooks": {{
|
|
"purpose": "Custom React hooks for {feature_name}",
|
|
"hooks": [
|
|
"List of custom hooks needed"
|
|
]
|
|
}},
|
|
"src/services": {{
|
|
"purpose": "API services for {feature_name}",
|
|
"services": [
|
|
"List of API service files"
|
|
]
|
|
}},
|
|
"src/types": {{
|
|
"purpose": "TypeScript interfaces for {feature_name}",
|
|
"interfaces": [
|
|
"List of TypeScript interfaces needed"
|
|
]
|
|
}}
|
|
}},
|
|
|
|
"components": {{
|
|
"feature_components": [
|
|
{{
|
|
"name": "ComponentName",
|
|
"purpose": "What this component does for {feature_name}",
|
|
"props": {{
|
|
"prop_name": "prop_type and description"
|
|
}},
|
|
"state": [
|
|
"Local state variables needed"
|
|
],
|
|
"hooks_used": [
|
|
"React hooks used in this component"
|
|
],
|
|
"styling": "{ui_library} classes and approach"
|
|
}}
|
|
],
|
|
"ui_components": [
|
|
{{
|
|
"name": "UIComponentName",
|
|
"purpose": "Reusable UI component",
|
|
"props": {{
|
|
"prop_name": "prop_type and description"
|
|
}},
|
|
"variants": [
|
|
"Different variants/styles available"
|
|
]
|
|
}}
|
|
]
|
|
}},
|
|
|
|
"state_management": {{
|
|
"global_state": {{
|
|
"tool": "{state_management}",
|
|
"structure": {{
|
|
"state_slice_name": {{
|
|
"purpose": "What this state manages for {feature_name}",
|
|
"initial_state": "Structure of initial state",
|
|
"actions": [
|
|
"List of actions/reducers needed"
|
|
],
|
|
"selectors": [
|
|
"State selectors for components"
|
|
]
|
|
}}
|
|
}}
|
|
}},
|
|
"local_state": [
|
|
{{
|
|
"component": "ComponentName",
|
|
"state_variables": [
|
|
"Local state variables and their purposes"
|
|
]
|
|
}}
|
|
]
|
|
}},
|
|
|
|
"routing": {{
|
|
"routes": [
|
|
{{
|
|
"path": "/route-path",
|
|
"component": "PageComponent",
|
|
"purpose": "What this route does for {feature_name}",
|
|
"protection": "Authentication/authorization required",
|
|
"lazy_loading": true/false
|
|
}}
|
|
],
|
|
"navigation": {{
|
|
"main_navigation": [
|
|
"Navigation items for {feature_name}"
|
|
],
|
|
"breadcrumbs": "Breadcrumb navigation strategy",
|
|
"route_guards": [
|
|
"Route protection logic needed"
|
|
]
|
|
}}
|
|
}},
|
|
|
|
"api_integration": {{
|
|
"api_services": [
|
|
{{
|
|
"service_name": "ServiceName",
|
|
"purpose": "API interactions for {feature_name}",
|
|
"endpoints": [
|
|
"List of API endpoints this service calls"
|
|
],
|
|
"error_handling": "How API errors are handled",
|
|
"caching_strategy": "Data caching approach"
|
|
}}
|
|
],
|
|
"data_fetching": {{
|
|
"patterns": [
|
|
"Data fetching patterns used (useEffect, React Query, etc.)"
|
|
],
|
|
"loading_states": "How loading states are managed",
|
|
"error_boundaries": "Error boundary implementation"
|
|
}}
|
|
}},
|
|
|
|
"ui_implementation": {{
|
|
"design_system": {{
|
|
"ui_library": "{ui_library}",
|
|
"theme_configuration": "Theme/styling configuration",
|
|
"component_patterns": [
|
|
"UI patterns used throughout the feature"
|
|
]
|
|
}},
|
|
"forms": [
|
|
{{
|
|
"form_name": "FormName",
|
|
"purpose": "What this form does for {feature_name}",
|
|
"fields": [
|
|
"Form fields and validation rules"
|
|
],
|
|
"validation": "Validation strategy and rules",
|
|
"submission": "Form submission handling"
|
|
}}
|
|
],
|
|
"responsive_design": {{
|
|
"breakpoints": "Responsive breakpoint strategy",
|
|
"mobile_considerations": "Mobile-specific UI adaptations",
|
|
"accessibility": "Accessibility features implemented"
|
|
}}
|
|
}},
|
|
|
|
"business_logic_implementation": [
|
|
{{
|
|
"rule": "Business rule from requirements",
|
|
"implementation": "How this rule is implemented in React",
|
|
"components_affected": [
|
|
"Components that implement this rule"
|
|
],
|
|
"validation": "Frontend validation for this rule"
|
|
}}
|
|
],
|
|
|
|
"testing_strategy": {{
|
|
"unit_tests": [
|
|
"Components that need unit tests"
|
|
],
|
|
"integration_tests": [
|
|
"Integration test scenarios for {feature_name}"
|
|
],
|
|
"e2e_tests": [
|
|
"End-to-end test scenarios"
|
|
],
|
|
"testing_utilities": [
|
|
"Testing utilities and helpers needed"
|
|
]
|
|
}},
|
|
|
|
"performance_optimization": {{
|
|
"code_splitting": [
|
|
"Components/routes that should be lazy loaded"
|
|
],
|
|
"memoization": [
|
|
"Components that benefit from React.memo or useMemo"
|
|
],
|
|
"bundle_optimization": "Bundle size optimization strategies",
|
|
"rendering_optimization": "Rendering performance considerations"
|
|
}},
|
|
|
|
"package_dependencies": {{
|
|
"core_dependencies": [
|
|
"Essential React packages needed"
|
|
],
|
|
"ui_dependencies": [
|
|
"{ui_library} specific packages"
|
|
],
|
|
"state_dependencies": [
|
|
"{state_management} packages"
|
|
],
|
|
"utility_dependencies": [
|
|
"Additional utility packages needed for {feature_name}"
|
|
]
|
|
}}
|
|
}}
|
|
|
|
# REMEMBER
|
|
- Analyze the ACTUAL feature "{feature_name}", don't use generic templates
|
|
- Implement ALL business logic rules in the frontend
|
|
- Use {ui_library} consistently for all styling
|
|
- Design for {complexity_level} complexity level
|
|
- Make it production-ready with proper error handling
|
|
- Consider the specific technical requirements provided
|
|
|
|
Generate the complete React frontend architecture for "{feature_name}" now."""
|
|
|
|
def _extract_ui_library(self, frontend_config: Dict) -> str:
|
|
"""Extract UI library from frontend configuration"""
|
|
libraries = frontend_config.get('libraries', [])
|
|
|
|
ui_libraries = ['tailwind css', 'material-ui', 'chakra ui', 'ant design', 'bootstrap']
|
|
|
|
for lib in libraries:
|
|
if any(ui_lib in lib.lower() for ui_lib in ui_libraries):
|
|
return lib
|
|
|
|
return 'Tailwind CSS' # Default
|
|
|
|
def _extract_state_management(self, frontend_config: Dict) -> str:
|
|
"""Extract state management from frontend configuration"""
|
|
libraries = frontend_config.get('libraries', [])
|
|
|
|
state_libs = ['redux toolkit', 'zustand', 'context api', 'recoil', 'jotai']
|
|
|
|
for lib in libraries:
|
|
if any(state_lib in lib.lower() for state_lib in state_libs):
|
|
return lib
|
|
|
|
return 'Redux Toolkit' # Default for complex apps
|
|
|
|
def _format_requirements_list(self, requirements: List[str]) -> str:
|
|
"""Format requirements list for the prompt"""
|
|
if not requirements:
|
|
return "- No specific requirements provided"
|
|
|
|
return "\n".join([f"- {req}" for req in requirements])
|