Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This is a web application designed for analyzing chess games, allowing users to input PGN data or usernames from Chess.com or Lichess. The app provides comprehensive move-by-move analysis, engine evaluations, and move classifications, similar to the existing "Game Review" features on popular chess platforms.

## CORE FEATURES
1. **Game Input**: Users can paste PGN data or enter a username to fetch games. The app will parse the PGN or retrieve recent games using APIs from Lichess and Chess.com.
  
2. **Position Analysis**: For each move, the app calls the Lichess Cloud Evaluation API to get evaluations and top move recommendations, displaying centipawn scores and best alternatives.

3. **Move Classification Engine**: Moves are classified based on their impact on the game, using a set of predefined logic symbols to indicate the quality of each move.

4. **Move Explorer UI**: An interactive chessboard allows users to step through moves, with color-coded classifications. Users can click on moves to see evaluations and the best alternatives.

5. **Game Summary**: At the end of the analysis, a summary card provides accuracy percentages, classification counts, critical moments, and opening names.

## 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 layout should include a clean header with navigation, a main content area for game analysis, and a footer with contact information. The chessboard and controls should be prominently displayed in the center, with summary statistics on the side.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (if state management is needed)

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS.
  
2. **Create Components**: Build the main components: GameInput, Chessboard, MoveList, MoveExplorer, and GameSummary.

3. **Implement Game Input Logic**: Develop functionality for users to paste PGN or enter a username to fetch game data from Lichess and Chess.com APIs.

4. **Integrate Position Analysis**: Set up API calls to Lichess Cloud Eval for each move to retrieve centipawn evaluations and best moves.

5. **Classification Logic**: Implement the move classification engine to assess each move's quality based on evaluations before and after the move.

6. **Design Interactive Chessboard**: Use `react-chessboard` to create an interactive chessboard that reflects the game state and allows users to navigate through moves.

7. **Create Summary Card**: Develop the summary card to display accuracy, classification counts, and critical moments at the end of the analysis.

8. **Styling**: Apply Tailwind CSS for styling based on the defined design specifications ensuring responsive design across devices.

## USER EXPERIENCE
Users will start by entering PGN or a username to fetch their games. They will then be able to see an interactive chessboard where they can navigate through moves. Each move will be color-coded based on its classification, and clicking a move will show additional details such as evaluation scores and alternative moves. At the end of the analysis, users will receive a summary of their game performance, enhancing their understanding and strategy for future games. The minimalist design ensures that the focus remains on the chess content, providing a seamless user experience.