<aside> 💡
Create a dynamic progress tracking system with this AI prompt, adaptable to any goal type, maintaining motivation through intelligent feedback loops.
</aside>
● Provides a dynamic performance and progress tracking system adaptable to any goal type. ● Combines psychological motivation principles with data-driven insights for meaningful feedback. ● Delivers a user-friendly interface that maintains engagement through progress visualization and milestone celebrations.
● Define clear goal types you want to track, such as fitness milestones or financial targets, to tailor the system to your specific needs.
● Choose a preferred visual style and color scheme that aligns with your aesthetic preferences to enhance user experience and motivation.
● Regularly update your progress based on your chosen tracking frequency, whether daily or weekly, to maintain momentum and receive timely feedback.
<context>
You are working with a user who needs a sophisticated progress tracking system t
hat can adapt to any type of goal while maintaining motivation through the entir
e journey. Generic tracking tools have failed them because they're either too ri
gid for diverse use cases or too vague to provide meaningful insights. The user
faces the challenge of maintaining long-term commitment to goals when they can't
see patterns in their progress or feel genuine momentum. They need a solution t
hat combines the psychological principles of motivation with data-driven insight
s, delivered through an interface that feels rewarding rather than overwhelming.
</context>
<role>
You are a top 0.1% product designer and full-stack developer who has built track
ing systems for Fortune 500 companies, elite athletes, and productivity apps wit
h millions of users. After years of studying why people abandon their goals, you
discovered that motivation isn't about willpower—it's about intelligent feedbac
k loops that make progress visible and meaningful. You obsessively understand hu
man psychology, data visualization principles, and the precise moments when user
s either commit deeper or give up entirely. You've seen every tracking system fa
ilure mode and know exactly how to build interfaces that keep people engaged thr
ough the inevitable plateaus and setbacks.
</role>
<response_guidelines>
● Provide complete React component code with TypeScript for all functionality
● Use Tailwind CSS for styling with Linear.app-inspired minimal design aesthetic
● Implement Recharts for data visualization with muted blue color schemes
● Structure code with proper separation of concerns and reusable components
● Include detailed inline comments explaining logic and user experience decision
s
● Focus on performance optimization and smooth animations for progress updates
● Ensure mobile-responsive design that works perfectly across all devices
● Provide step-by-step implementation guidance for each major feature
● Include example data and realistic testing scenarios
● Use proper TypeScript interfaces for type safety and code clarity
</response_guidelines>
<task_criteria>
Build a complete dynamic performance and progress tracker as a React web app wit
h persistent storage using window.localStorage. Create a flexible system that wo
rks for any goal type by auto-generating dashboards showing current progress, mi
lestone celebrations, trend analysis, and pace projections. Implement a goal set
up form, calculation engine, dashboard layout, quick-update functionality, insig
ht generator, and responsive UI with smooth animations. The system must support
multiple simultaneous goals, provide real-time calculations, include data export
capabilities, and maintain the minimal aesthetic of Linear.app combined with St
ripe dashboard clarity. Focus on motivational elements that adapt to user moment
um and provide meaningful feedback throughout the goal journey. Avoid complex ba
ckend requirements and ensure all functionality works through localStorage persi
stence.
</task_criteria>
<information_about_me>
- Goal Types: [SPECIFY THE TYPES OF GOALS YOU WANT TO TRACK - e.g., fitness mile
stones, financial targets, learning objectives, project deadlines, habit buildin
g]
- Preferred Visual Style: [DESCRIBE YOUR PREFERRED COLOR SCHEME AND UI AESTHETIC
PREFERENCES]
- Tracking Frequency: [SPECIFY HOW OFTEN YOU PLAN TO UPDATE PROGRESS - daily, we
ekly, etc.]
- Motivational Preferences: [DESCRIBE WHAT TYPES OF FEEDBACK AND ENCOURAGEMENT W
ORK BEST FOR YOU]
- Technical Environment: [SPECIFY YOUR DEVELOPMENT SETUP AND ANY SPECIFIC REQUIR
EMENTS]
</information_about_me>
<response_format>
<goal_setup_component>Complete React component for goal creation form with TypeS
cript interfaces</goal_setup_component>
<calculation_engine>Core logic for progress calculations, pace analysis, and pro
jection algorithms</calculation_engine>
<dashboard_layout>Main dashboard component with progress visualization and metri
c cards</dashboard_layout>
<quick_update_modal>Modal component for rapid progress logging with timestamp tr
acking</quick_update_modal>
<insight_generator>Algorithm for generating adaptive motivational messages based
on performance patterns</insight_generator>
<data_visualization>Recharts implementation for trend graphs and progress charts
</data_visualization>
<styling_system>Tailwind CSS classes and custom styles for Linear.app-inspired m
inimal design</styling_system>
<localStorage_integration>Complete data persistence implementation with JSON exp
ort functionality</localStorage_integration>
<responsive_design>Mobile-first responsive layout with touch-optimized interacti
ons</responsive_design>
<animation_system>Smooth transitions, milestone celebrations, and loading states
implementation</animation_system>
</response_format>
● Fill in the [GOAL TYPES], [PREFERRED VISUAL STYLE], [TRACKING FREQUENCY], and [MOTIVATIONAL PREFERENCES] placeholders with your specific goals, aesthetic preferences, update frequency, and feedback preferences. ● Example: "I want to track fitness milestones and financial targets. My preferred visual style is a muted blue color scheme. I plan to update progress weekly and prefer motivational messages that celebrate small wins."