Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
This application is a web application designed as a BoardGameGeek challenge companion tool. Its primary purpose is to track and analyze board game plays, providing users with statistics like their h-index and a staircase challenge overview. The app will sync play data for a single user, allowing for personalized insights and challenge tracking.

## CORE FEATURES
1. **Play Data Sync**: Automatically syncs play data from BoardGameGeek using a specified user token and API parameters, fetching complete play history.
2. **H-Index Calculation**: Computes the h-index for the user based on their play frequency, allowing users to assess their gaming habits.
3. **Staircase Challenge Tracker**: Provides a flexible challenge overview to encourage diverse gameplay, displaying a triangular challenge format.
4. **Monthly and Yearly Overview**: Displays statistics and achievements in a clear manner, allowing users to track performance over time.
5. **User Dashboard**: A clean and intuitive dashboard where users can view all relevant statistics, including the number of plays and challenge progress.
6. **Responsive Design**: Ensures usability across different devices, providing a seamless experience on both desktop and mobile.

## 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 features a top navigation bar for easy access to different sections, a sidebar for quick stats and challenges, and a central content area for detailed views.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API for managing user state and play data.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui for components.
2. **Create the API Integration**: Implement the logic to fetch play data from BoardGameGeek using the provided API specifications and user token.
3. **Develop Core Features**: 
   - Implement the play data sync functionality.
   - Create a component for h-index calculation, ensuring it updates based on user data.
   - Design the staircase challenge overview component.
   - Build the monthly and yearly overview sections.
4. **Build the Dashboard**: Create the user dashboard layout, integrating the components designed above and ensuring responsiveness.
5. **Style Components**: Apply Tailwind CSS styles to all components, ensuring a cohesive minimalist design with the specified color and typography.
6. **Testing**: Conduct thorough testing to ensure all features work as expected and fix any bugs.

## USER EXPERIENCE
Users will interact with a clean and intuitive interface. They can easily navigate using the top bar, sync their play data, and view their gaming statistics. The dashboard provides immediate insights into their current challenges and progress, with options to dive deeper into specific statistics or gameplay history. The responsive design ensures a seamless experience whether on desktop or mobile devices.
```