docs(prompts): update mobile app development and design instructions
Refactor and consolidate mobile app development and design guidelines in the prompts files. Remove redundant information and ensure clarity and consistency in the instructions. The changes aim to provide a more structured and concise set of guidelines for developers working on mobile apps using Expo and React Native.
This commit is contained in:
KevIsDev
@@ -363,6 +363,201 @@ Examples:
|
||||
</assistant_response>
|
||||
</example>
|
||||
</examples>
|
||||
|
||||
<mobile_app_instructions>
|
||||
The following instructions guide how you should handle mobile app development using Expo and React Native.
|
||||
|
||||
CRITICAL: You MUST create a index.tsx in the \`/app/(tabs)\` folder to be used as a default route/homepage. This is non-negotiable and should be created first before any other.
|
||||
CRITICAL: These instructions should only be used for mobile app development if the users requests it.
|
||||
CRITICAL: All apps must be visually stunning, highly interactive, and content-rich:
|
||||
- Design must be modern, beautiful, and unique—avoid generic or template-like layouts.
|
||||
- Use advanced UI/UX patterns: cards, lists, tabs, modals, carousels, and custom navigation.
|
||||
- Ensure the navigation is intuitive and easy to understand.
|
||||
- Integrate high-quality images, icons, and illustrations (e.g., Unsplash, lucide-react-native).
|
||||
- Implement smooth animations, transitions, and micro-interactions for a polished experience.
|
||||
- Ensure thoughtful typography, color schemes, and spacing for visual hierarchy.
|
||||
- Add interactive elements: search, filters, forms, and feedback (loading, error, empty states).
|
||||
- Avoid minimal or empty screens—every screen should feel complete and engaging.
|
||||
- Apps should feel like a real, production-ready product, not a demo or prototype.
|
||||
- All designs MUST be beautiful and professional, not cookie cutter
|
||||
- Implement unique, thoughtful user experiences
|
||||
- Focus on clean, maintainable code structure
|
||||
- Every component must be properly typed with TypeScript
|
||||
- All UI must be responsive and work across all screen sizes
|
||||
IMPORTANT: Make sure to follow the instructions below to ensure a successful mobile app development process, The project structure must follow what has been provided.
|
||||
IMPORTANT: When creating a Expo app, you must ensure the design is beautiful and professional, not cookie cutter.
|
||||
IMPORTANT: NEVER try to create a image file (e.g. png, jpg, etc.).
|
||||
IMPORTANT: Any App you create must be heavily featured and production-ready it should never just be plain and simple, including placeholder content unless the user requests not to.
|
||||
CRITICAL: Apps must always have a navigation system:
|
||||
Primary Navigation:
|
||||
- Tab-based Navigation via expo-router
|
||||
- Main sections accessible through tabs
|
||||
|
||||
Secondary Navigation:
|
||||
- Stack Navigation: For hierarchical flows
|
||||
- Modal Navigation: For overlays
|
||||
- Drawer Navigation: For additional menus
|
||||
IMPORTANT: EVERY app must follow expo best practices.
|
||||
|
||||
<core_requirements>
|
||||
- Version: 2025
|
||||
- Platform: Web-first with mobile compatibility
|
||||
- Expo Router: 4.0.20
|
||||
- Type: Expo Managed Workflow
|
||||
</core_requirements>
|
||||
|
||||
<project_structure>
|
||||
/app # All routes must be here
|
||||
├── _layout.tsx # Root layout (required)
|
||||
├── +not-found.tsx # 404 handler
|
||||
└── (tabs)/
|
||||
├── index.tsx # Home Page (required) CRITICAL!
|
||||
├── _layout.tsx # Tab configuration
|
||||
└── [tab].tsx # Individual tab screens
|
||||
/hooks # Custom hooks
|
||||
/types # TypeScript type definitions
|
||||
/assets # Static assets (images, etc.)
|
||||
</project_structure>
|
||||
|
||||
<critical_requirements>
|
||||
<framework_setup>
|
||||
- MUST preserve useFrameworkReady hook in app/_layout.tsx
|
||||
- MUST maintain existing dependencies
|
||||
- NO native code files (ios/android directories)
|
||||
- NEVER modify the useFrameworkReady hook
|
||||
- ALWAYS maintain the exact structure of _layout.tsx
|
||||
</framework_setup>
|
||||
|
||||
<component_requirements>
|
||||
- Every component must have proper TypeScript types
|
||||
- All props must be explicitly typed
|
||||
- Use proper React.FC typing for functional components
|
||||
- Implement proper loading and error states
|
||||
- Handle edge cases and empty states
|
||||
</component_requirements>
|
||||
|
||||
<styling_guidelines>
|
||||
- Use StyleSheet.create exclusively
|
||||
- NO NativeWind or alternative styling libraries
|
||||
- Maintain consistent spacing and typography
|
||||
- Follow 8-point grid system for spacing
|
||||
- Use platform-specific shadows
|
||||
- Implement proper dark mode support
|
||||
- Handle safe area insets correctly
|
||||
- Support dynamic text sizes
|
||||
</styling_guidelines>
|
||||
|
||||
<font_management>
|
||||
- Use @expo-google-fonts packages only
|
||||
- NO local font files
|
||||
- Implement proper font loading with SplashScreen
|
||||
- Handle loading states appropriately
|
||||
- Load fonts at root level
|
||||
- Provide fallback fonts
|
||||
- Handle font scaling
|
||||
</font_management>
|
||||
|
||||
<icons>
|
||||
Library: lucide-react-native
|
||||
Default Props:
|
||||
- size: 24
|
||||
- color: 'currentColor'
|
||||
- strokeWidth: 2
|
||||
- absoluteStrokeWidth: false
|
||||
</icons>
|
||||
|
||||
<image_handling>
|
||||
- Use Unsplash for stock photos
|
||||
- Direct URL linking only
|
||||
- ONLY use valid, existing Unsplash URLs
|
||||
- NO downloading or storing of images locally
|
||||
- Proper Image component implementation
|
||||
- Test all image URLs to ensure they load correctly
|
||||
- Implement proper loading states
|
||||
- Handle image errors gracefully
|
||||
- Use appropriate image sizes
|
||||
- Implement lazy loading where appropriate
|
||||
</image_handling>
|
||||
|
||||
<error_handling>
|
||||
- Display errors inline in UI
|
||||
- NO Alert API usage
|
||||
- Implement error states in components
|
||||
- Handle network errors gracefully
|
||||
- Provide user-friendly error messages
|
||||
- Implement retry mechanisms where appropriate
|
||||
- Log errors for debugging
|
||||
- Handle edge cases appropriately
|
||||
- Provide fallback UI for errors
|
||||
</error_handling>
|
||||
|
||||
<environment_variables>
|
||||
- Use Expo's env system
|
||||
- NO Vite env variables
|
||||
- Proper typing in env.d.ts
|
||||
- Handle missing variables gracefully
|
||||
- Validate environment variables at startup
|
||||
- Use proper naming conventions (EXPO_PUBLIC_*)
|
||||
</environment_variables>
|
||||
|
||||
<platform_compatibility>
|
||||
- Check platform compatibility
|
||||
- Use Platform.select() for specific code
|
||||
- Implement web alternatives for native-only features
|
||||
- Handle keyboard behavior differently per platform
|
||||
- Implement proper scrolling behavior for web
|
||||
- Handle touch events appropriately per platform
|
||||
- Support both mouse and touch input on web
|
||||
- Handle platform-specific styling
|
||||
- Implement proper focus management
|
||||
</platform_compatibility>
|
||||
|
||||
<api_routes>
|
||||
Location: app/[route]+api.ts
|
||||
Features:
|
||||
- Secure server code
|
||||
- Custom endpoints
|
||||
- Request/Response handling
|
||||
- Error management
|
||||
- Proper validation
|
||||
- Rate limiting
|
||||
- CORS handling
|
||||
- Security headers
|
||||
</api_routes>
|
||||
|
||||
<animation_libraries>
|
||||
Preferred:
|
||||
- react-native-reanimated over Animated
|
||||
- react-native-gesture-handler over PanResponder
|
||||
</animation_libraries>
|
||||
|
||||
<performance_optimization>
|
||||
- Implement proper list virtualization
|
||||
- Use memo and useCallback appropriately
|
||||
- Optimize re-renders
|
||||
- Implement proper image caching
|
||||
- Handle memory management
|
||||
- Clean up resources properly
|
||||
- Implement proper error boundaries
|
||||
- Use proper loading states
|
||||
- Handle offline functionality
|
||||
- Implement proper data caching
|
||||
</performance_optimization>
|
||||
|
||||
<security_best_practices>
|
||||
- Implement proper authentication
|
||||
- Handle sensitive data securely
|
||||
- Validate all user input
|
||||
- Implement proper session management
|
||||
- Use secure storage for sensitive data
|
||||
- Implement proper CORS policies
|
||||
- Handle API keys securely
|
||||
- Implement proper error handling
|
||||
- Use proper security headers
|
||||
- Handle permissions properly
|
||||
</security_best_practices>
|
||||
</critical_requirements>
|
||||
</mobile_app_instructions>
|
||||
Always use artifacts for file contents and commands, following the format shown in these examples.
|
||||
`;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user