refactor: remove unused qrCodeAtom and update mobile app prompts
Remove the unused `qrCodeAtom` from the QR code store to clean up the codebase. Additionally, update the mobile app development prompts to emphasize critical requirements, such as creating a default route, ensuring high-quality UI/UX, and following Expo best practices.
This commit is contained in:
@@ -481,26 +481,43 @@ Here are some examples of correct usage of artifacts:
|
|||||||
|
|
||||||
<mobile_app_instructions>
|
<mobile_app_instructions>
|
||||||
The following instructions guide how you should handle mobile app development using Expo and React Native.
|
The following instructions guide how you should handle mobile app development using Expo and React Native.
|
||||||
IMPORTANT: These instructions should only be used for mobile app development if the users requests it.
|
|
||||||
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. The app should be populted with content and never just be a blank example.
|
|
||||||
|
|
||||||
<core_requirements>
|
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.
|
||||||
- Version: 2025
|
CRITICAL: These instructions should only be used for mobile app development if the users requests it.
|
||||||
- Platform: Web-first with mobile compatibility
|
CRITICAL: All apps must be visually stunning, highly interactive, and content-rich:
|
||||||
- Expo SDK: 52.0.30
|
- Design must be modern, beautiful, and unique—avoid generic or template-like layouts.
|
||||||
- Expo Router: 4.0.20
|
- Use advanced UI/UX patterns: cards, lists, tabs, modals, carousels, and custom navigation.
|
||||||
- Type: Expo Managed Workflow
|
- Ensure the navigation is intuitive and easy to understand.
|
||||||
- You have been given an example package.json below you dont need to add every dependency to the package.json only the required dependencies and never add any unnecessary dependencies for the project at hand.
|
- Integrate high-quality images, icons, and illustrations (e.g., Unsplash, lucide-react-native).
|
||||||
|
- Implement smooth animations, transitions, and micro-interactions for a polished experience.
|
||||||
<design_philosophy>
|
- 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
|
- All designs MUST be beautiful and professional, not cookie cutter
|
||||||
- Apps MUST be fully featured and production-ready
|
|
||||||
- Implement unique, thoughtful user experiences
|
- Implement unique, thoughtful user experiences
|
||||||
- Focus on clean, maintainable code structure
|
- Focus on clean, maintainable code structure
|
||||||
- Every component must be properly typed with TypeScript
|
- Every component must be properly typed with TypeScript
|
||||||
- All UI must be responsive and work across all screen sizes
|
- All UI must be responsive and work across all screen sizes
|
||||||
</design_philosophy>
|
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: 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>
|
</core_requirements>
|
||||||
|
|
||||||
<project_structure>
|
<project_structure>
|
||||||
@@ -508,7 +525,7 @@ Here are some examples of correct usage of artifacts:
|
|||||||
├── _layout.tsx # Root layout (required)
|
├── _layout.tsx # Root layout (required)
|
||||||
├── +not-found.tsx # 404 handler
|
├── +not-found.tsx # 404 handler
|
||||||
└── (tabs)/
|
└── (tabs)/
|
||||||
├── index.tsx # Home Page (required)
|
├── index.tsx # Home Page (required) CRITICAL!
|
||||||
├── _layout.tsx # Tab configuration
|
├── _layout.tsx # Tab configuration
|
||||||
└── [tab].tsx # Individual tab screens
|
└── [tab].tsx # Individual tab screens
|
||||||
/hooks # Custom hooks
|
/hooks # Custom hooks
|
||||||
@@ -533,19 +550,6 @@ Here are some examples of correct usage of artifacts:
|
|||||||
- Handle edge cases and empty states
|
- Handle edge cases and empty states
|
||||||
</component_requirements>
|
</component_requirements>
|
||||||
|
|
||||||
<navigation_architecture>
|
|
||||||
<primary_navigation>
|
|
||||||
- Tab-based Navigation via expo-router
|
|
||||||
- Main sections accessible through tabs
|
|
||||||
</primary_navigation>
|
|
||||||
|
|
||||||
<secondary_navigation>
|
|
||||||
- Stack Navigation: For hierarchical flows
|
|
||||||
- Modal Navigation: For overlays
|
|
||||||
- Drawer Navigation: For additional menus
|
|
||||||
</secondary_navigation>
|
|
||||||
</navigation_architecture>
|
|
||||||
|
|
||||||
<styling_guidelines>
|
<styling_guidelines>
|
||||||
- Use StyleSheet.create exclusively
|
- Use StyleSheet.create exclusively
|
||||||
- NO NativeWind or alternative styling libraries
|
- NO NativeWind or alternative styling libraries
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { atom } from 'nanostores';
|
import { atom } from 'nanostores';
|
||||||
|
|
||||||
export const qrCodeAtom = atom<string | null>(null);
|
|
||||||
export const expoUrlAtom = atom<string | null>(null);
|
export const expoUrlAtom = atom<string | null>(null);
|
||||||
|
|||||||
Reference in New Issue
Block a user