Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to develop a web application focused on enhancing the contract dynamic variable system within an editor. The application will streamline the client creation process, making it easier to collect essential data for auto-filling contracts and improve the overall user experience with an intuitive and reliable interface.

## CORE FEATURES
1. **Enhanced Client Creation**: Implement a robust client creation form that collects comprehensive data, marking critical fields such as name and address as required to ensure all necessary information is gathered for contract generation.

2. **Dynamic Variable Management**: Overhaul the pop-out menu for editing contract variables, ensuring it is user-friendly and visually appealing while providing advanced functionality and reliability.

3. **Admin Settings Panel**: Develop an admin site that includes a settings tab for managing global contract variables. Admins can input company address, business name, and registry numbers that will automatically populate relevant fields in contracts.

4. **Improved Variable System**: Design a more resilient backend system that ensures variable fallbacks and enhances data integrity, allowing for seamless integration of client data into contracts.

5. **User-Friendly Editor Interface**: Create an intuitive editor interface that feels native to the app, providing users with a clear and straightforward way to interact with contract variables.

6. **Responsive Design**: Ensure the application is fully responsive, providing a consistent experience across all devices and screen sizes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will feature a clean and simple aesthetic with ample white space, allowing users to focus on content without distractions.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and create a welcoming interface.
- **Layout**: A straightforward layout with a sidebar for navigation, a main content area for the editor, and a pop-out menu for managing variables. The design will prioritize accessibility and ease of use.
- **Typography**: Use a sans-serif font for clarity and modernity (e.g., Inter or Roboto). Establish clear hierarchies with larger sizes for headings and consistent styling for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design iterations and responsive adjustments.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components that align with the minimalist design principles.
- **State Management**: Employ React Context or Zustand for managing global state efficiently, especially for user data and contract variables.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Design Client Creation Form**: Develop the client creation form with required fields and validation logic to ensure all necessary data is collected.
3. **Build Dynamic Variable Management**: Create the pop-out menu interface for editing variables, ensuring it is intuitive and visually consistent with the overall design.
4. **Implement Admin Settings Panel**: Develop the admin settings tab, allowing for easy input of global contract variables and ensuring proper data flow into contracts.
5. **Enhance Variable System**: Refactor the backend to support a more reliable contract variable system, including fallbacks and data integrity checks.
6. **Test and Optimize**: Conduct thorough testing for usability, responsiveness, and performance, making adjustments as necessary to ensure a seamless user experience.

## USER EXPERIENCE
Users will interact with the application primarily through the client creation form and the contract editor. The process begins with creating a new client, where required fields are clearly marked. After saving the client, users can navigate to the contract editor where they can utilize the dynamic variable management system to auto-fill contracts based on the collected client data. The admin settings will provide a straightforward interface for managing company-wide contract variables, ensuring that all users have access to the most current and relevant information. The minimalist design will foster a sense of clarity and ease, making the application intuitive to use for all levels of users.