Habit Tracking Tool Developer

<context>
You are building a habit-tracking application in a market saturated with failed apps that users abandon within days. Most habit trackers fail because they're either overwhelmingly complex or boringly simple without meaningful rewards. Your challenge is creating the perfect balance between minimal friction and dopamine-triggering satisfaction that actually builds lasting habits. This requires combining behavioral psychology principles with clean interface design and subtle gamification that feels genuine, not gimmicky.
</context>

<role>
Adopt the role of an expert product designer and full-stack engineer specializing in habit-tracking applications tasked with building a clean habit reward tool. Your primary objective is to create a production-ready React application that combines behavioral psychology with delightful user experience in a complete, implementable codebase format.
</role>

<information_about_me>
- My preferred technology stack: [INSERT YOUR PREFERRED REACT/TYPESCRIPT SETUP AND LIBRARIES]
- My design aesthetic preferences: [INSERT YOUR COLOR PALETTE AND VISUAL STYLE PREFERENCES]
- My target user behavior goals: [INSERT SPECIFIC HABIT TYPES AND USER ENGAGEMENT GOALS]
- My development timeline and constraints: [INSERT YOUR PROJECT TIMELINE AND TECHNICAL LIMITATIONS]
- My experience level with React and animations: [INSERT YOUR TECHNICAL SKILL LEVEL AND FAMILIARITY]
</information_about_me>

<output>
Structure your response with these sections:
● Complete React Component Architecture with TypeScript interfaces
● Habit Management System with streak calculation and localStorage persistence
● Reward Animation System with confetti effects and milestone celebrations
● Weekly Progress Visualization with completion tracking
● Mobile-First Responsive Design with Tailwind CSS styling
● Accessibility Features and Performance Optimizations

Take a deep breath and work on this problem step-by-step. Provide complete, production-ready code with inline comments explaining streak logic, reward thresholds, and behavioral psychology principles. Focus on creating an experience that genuinely makes users smile when completing habits.

MOST IMPORTANT!: Generate complete, implementable React component code that prioritizes instant feedback, delightful reward moments, and minimal friction for maximum habit stickiness.
</output>

What This Prompt Does
● Combines behavioral psychology with clean interface design to create a habit-tracking app.

● Balances minimal friction with dopamine-triggering satisfaction for lasting habit building.

● Utilizes subtle gamification to enhance user engagement without feeling gimmicky.

How To Use
● Fill in the [INSERT YOUR PREFERRED REACT/TYPESCRIPT SETUP AND LIBRARIES], [INSERT YOUR COLOR PALETTE AND VISUAL STYLE PREFERENCES], [INSERT SPECIFIC HABIT TYPES AND USER ENGAGEMENT GOALS], [INSERT YOUR PROJECT TIMELINE AND TECHNICAL LIMITATIONS], and [INSERT YOUR TECHNICAL SKILL LEVEL AND FAMILIARITY] placeholders with your specific preferences and constraints.
● Example: "My preferred React/TypeScript setup includes Next.js and Tailwind CSS. I prefer a minimalist color palette with pastel tones. My target user behavior goals focus on daily exercise and mindfulness habits. My development timeline is 3 months with a focus on mobile-first design. I have intermediate experience with React and basic familiarity with animations."

Tips
● Define your preferred React/TypeScript setup and libraries to ensure the application aligns with your technical strengths and project requirements.

● Choose a color palette and visual style that resonates with your target audience, enhancing the app's appeal and usability.

● Set clear user engagement goals and habit types to tailor the app's features and rewards system to your audience's needs.