Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a mobile-first MVP focused on personalized skincare routines and cosmetic product analysis. Users will be able to search for cosmetic products, analyze ingredients, and build a skincare routine based on their unique skin profiles. The primary goal is to validate user interest in understanding product quality and ingredient safety while promoting a simple and clear user experience.

## CORE FEATURES
1. **Product Search**: Users can search for cosmetic products by name, displaying results with the product name, brand, and an overall quality score. Clicking a product leads to a detailed view with ingredient lists and suitability for different skin types.

2. **Ingredient Analysis**: Each ingredient has an information page detailing its name, safety level (Good / Caution / Avoid), a brief description, and typical uses in cosmetics.

3. **Skin Profile**: Users can create a skin profile by selecting their skin type and main concerns. This profile helps evaluate products and suggests appropriate skincare routines.

4. **My Products**: Users can add products they own to a personal collection, allowing them to see a basic evaluation based on their skin profile, including suitability messages.

5. **Routine Builder**: The app generates a simple skincare routine based on the user's saved products, including suggestions for missing categories.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, ensuring the focus remains on content and usability.
- **Color Mode**: Light theme with dark text on light backgrounds for enhanced readability.
- **Layout**: A single-column layout for mobile-first design, featuring a top navigation bar for easy access to different sections of the app. Each feature will be presented in clearly defined sections with ample spacing.
- **Typography**: Use a sans-serif font for clarity and modernity. Headings should be bold and larger, while body text should be legible and comfortable to read.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and maintainability.
- **Styling**: Tailwind CSS for rapid UI development and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Consider using React's Context API or Zustand for managing application state if needed.

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install Tailwind CSS** and configure it for global styles.
3. **Create the main components**: Home, Product Search, Product Detail, Ingredient Detail, Skin Profile, My Products, and Routine Builder.
4. **Build the core features** as described, starting with the Product Search and integrating the API for product data.
5. **Implement the Skin Profile** feature to collect user preferences and concerns.
6. **Develop the My Products feature** allowing users to save and evaluate their products.
7. **Create the Routine Builder** that suggests skincare routines based on saved products.
8. **Add routing** between the different components using React Router.
9. **Test the application** on various devices to ensure responsiveness and usability.

## USER EXPERIENCE
Users will begin on the Home page, where they can easily navigate to the Product Search. They can enter a product name, view search results, and click through to detailed product pages. Using the Skin Profile feature, users can input their skin type and concerns, which will inform the evaluations of the products they own in the My Products section. The Routine Builder will provide tailored skincare routines based on their selections, ensuring a simple and supportive experience throughout their journey in understanding and improving their skincare regimen.