Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a user-friendly tool for Roblox users to customize how their Robux balance is displayed visually. It allows users to change the way their Robux amount appears on their screen without altering their actual balance, providing a cosmetic enhancement to the user interface.

## CORE FEATURES
1. **Visual Robux Editor**: A simple input field where users can set their desired Robux amount with real-time updates on the display.
2. **Storage Functionality**: The application saves the user’s preferences using local storage, so their settings persist across sessions.
3. **UI Toggle**: Users can easily show or hide the visual editor using keyboard shortcuts for quick access.
4. **Real-Time Formatting**: The application formats the Robux display in thousands (K) and millions (M) for better readability.
5. **Reset Functionality**: Users can reset to their real balance value with one click, restoring the original display.
6. **Mutation Observer**: Automatically detects changes in the DOM to apply user settings dynamically.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout consists of a fixed-position UI panel for the Robux editor, positioned in the top-right corner of the screen, with a clear structure for input fields and buttons.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management (useState and useEffect)

## IMPLEMENTATION STEPS
1. **Set Up the React App**: Create a new React application using Create React App with TypeScript support.
   ```bash
   npx create-react-app roblox-visual-robux --template typescript
   ```
2. **Install Dependencies**: Install Tailwind CSS and any required libraries for UI components.
   ```bash
   npm install tailwindcss postcss autoprefixer
   ```
3. **Configure Tailwind CSS**: Set up Tailwind CSS by creating `tailwind.config.js` and `postcss.config.js` files.
4. **Create the UI Components**: Develop the UI components using Tailwind CSS classes while ensuring they match the design specifications.
5. **Implement State Management**: Use React hooks to manage state for the Robux value and UI visibility.
6. **Add Local Storage Functionality**: Implement local storage logic to save and retrieve user settings for the Robux display.
7. **Set Up Event Listeners**: Add keyboard event listeners to toggle the visual editor UI on specific key presses.
8. **Test the Application**: Thoroughly test the application for usability, ensuring that all features work as intended and the UI is responsive.

## USER EXPERIENCE
Users will interact with the application primarily through the visual editor UI. Upon loading the Roblox page, the editor will automatically show or hide based on user input. Users can enter a Robux amount, apply the changes, and see the display update in real-time. They can toggle the editor UI with keyboard shortcuts, enhancing the experience by allowing quick adjustments without navigating away from their current activity. The clean and minimalist design ensures that the focus remains on the Robux balance, making it easy for users to customize their experience.