Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is an End-to-End Debug and Optimization Loop tool designed to assist developers in identifying and fixing code issues efficiently. It automates the diagnostic process, iteratively rectifies errors, and ensures deployment readiness by optimizing the codebase, all while providing real-time progress updates.

## CORE FEATURES
1. **Diagnostic Scan**: Automatically scans the entire codebase and preview console for hidden errors, TypeScript mismatches, and deployment blockers, generating a comprehensive issue report.
2. **Iterative Rectification**: Fixes identified issues one by one, re-running build checks and inspecting the browser console for new errors after each fix.
3. **Zero-Bug Verification**: Continues the diagnostic loop until there are zero console errors, linting errors, and verified active database connections.
4. **Deployment Readiness**: Optimizes the code for production deployment once all issues are resolved and confirms readiness for final deployment.
5. **Progress Reporting**: Provides real-time updates after each fix-and-check cycle, keeping users informed of the current status.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focused on usability and clarity.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high readability.
- **Layout**: A single-column layout that emphasizes simplicity, with clear sections for diagnostics, rectification, verification, and deployment. Each section is visually separated with ample whitespace.
- **Typography**: Use a sans-serif font like 'Roboto' for body text and 'Montserrat' for headings to maintain a modern and clean aesthetic. Establish a clear hierarchy with larger sizes for headings and a consistent line height for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and enhanced developer experience.
- **Styling**: Tailwind CSS for rapid styling and responsive design.
- **UI Components**: Utilize shadcn/ui for consistent UI elements and styling.
- **State Management**: Implement React Context API or Zustand for managing global state if necessary.

## IMPLEMENTATION STEPS
1. **Set up the React environment** with TypeScript and Tailwind CSS.
2. **Create the main components**:
   - Diagnostic Component: For displaying scan results and issues.
   - Rectification Component: For managing the fixing process and showing current fixes.
   - Verification Component: To track the zero-bug verification status.
   - Deployment Component: For final deployment readiness checks.
3. **Implement the diagnostic logic** to scan the codebase and console for errors using relevant libraries or APIs.
4. **Develop iterative rectification logic** to fix issues one at a time, running build checks automatically.
5. **Set up progress reporting** using state management to keep track of the diagnostic and rectification cycles.
6. **Ensure responsiveness** by leveraging Tailwind CSS utilities for various screen sizes.
7. **Test the application thoroughly**, focusing on usability and performance before deployment.

## USER EXPERIENCE
Users will interact with the application through a streamlined interface where they can initiate the diagnostic scan with a single click. After receiving a report of issues, users will be guided through the rectification process, with clear updates on progress after each fix. The verification stage will visually indicate when the application is free of errors. Finally, the deployment readiness section will confirm that the application is optimized and ready for production, ensuring a smooth workflow for developers.