Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
This application is a web-based platform designed to engage users in Capture The Flag (CTF) challenges, providing them with a dashboard for monitoring their progress, the ability to chat with an AI mentor for guidance, and real-time tracking of their skill development. The goal is to create an interactive learning environment that enhances users' problem-solving abilities through CTF exercises.

## CORE FEATURES
1. **Login / Dashboard**: A clean and intuitive login interface that leads to a dashboard displaying user progress, upcoming challenges, and quick access to key features.
2. **CTF Challenge Page**: A dedicated section for users to view and attempt various CTF challenges, complete with descriptions, difficulty levels, and submission options.
3. **Chat with AI Mentor**: An interactive chat interface where users can ask questions and receive explanations or hints from an AI mentor, facilitating immediate assistance.
4. **Progress Tracker**: A visual representation of user progress through challenges, skill levels, and hints utilized, helping users understand their learning journey.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will prioritize clean lines and ample white space, ensuring a distraction-free environment that enhances usability.
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high readability and a pleasant user experience.
- **Layout**: The main layout will feature a top navigation bar for easy access to different sections, a sidebar for quick links to challenges and progress, and a central content area that displays detailed challenge information and chat functionality.
- **Typography**: Utilize a sans-serif font for body text (e.g., Inter or Roboto) with a larger, bold font for headings to create a clear hierarchy and easy readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, enabling quick and responsive design adjustments.
- **UI Components**: Integrate shadcn/ui for pre-built components that align with the minimalist design aesthetic.
- **State Management**: Utilize React's Context API or Redux for managing global state, particularly for user authentication and progress tracking.

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install necessary dependencies**: Tailwind CSS, shadcn/ui, and any additional libraries for state management and routing (e.g., React Router).
3. **Create the folder structure**: Organize components, pages, and services logically to maintain scalability.
4. **Build the Login and Dashboard components**: Implement authentication functionality and display user progress.
5. **Develop the CTF Challenge Page**: Design the UI for displaying challenges and capturing user submissions.
6. **Integrate the AI Mentor chat functionality**: Use an API to connect to the AI layer for real-time responses.
7. **Implement the Progress Tracker**: Create visual components to display user progress and skill levels effectively.
8. **Ensure responsiveness**: Use Tailwind's responsive utilities to make the application accessible on various devices.
9. **Test the application thoroughly**: Conduct testing for usability, functionality, and performance to ensure a smooth user experience.

## USER EXPERIENCE
Users will start at the login page, where they can authenticate securely. Upon logging in, they are directed to the dashboard, which summarizes their progress and displays available challenges. Users can click on a challenge to navigate to its dedicated page, where they can view details and submit attempts. The AI mentor chat window is always accessible, allowing users to seek help as needed. Their progress is continuously tracked and visually represented, fostering a sense of achievement and encouraging further engagement with the platform.
```