|
| 1 | +# V0 Frontend Redesign Prompt — TaskMan |
| 2 | + |
| 3 | +## What This App Is |
| 4 | + |
| 5 | +TaskMan is a full-stack collaborative task management application. Think Linear meets Notion meets Todoist — a productivity tool for teams and individuals to organize work across projects with Kanban boards, calendar views, time tracking, gamification (XP/levels/achievements), real-time collaboration, and powerful filtering. It runs on React 18 + Vite + TypeScript + Tailwind CSS with a REST/WebSocket backend. |
| 6 | + |
| 7 | +## Why a Redesign |
| 8 | + |
| 9 | +The current UI is functional but visually generic. It looks like a Bootstrap-era CRUD app wearing a Tailwind skin. Flat white cards with gray borders, basic form selects for filters, no visual hierarchy or rhythm, no personality. The glassmorphism system exists in CSS but is barely used in practice. The gamification features (XP bars, level badges, celebrations) feel bolted on rather than integrated into the experience. The login/register pages are bare-bones centered card forms. The dashboard is a wall of identically-styled stat cards and task lists with no visual breathing room. The sidebar navigation is a plain vertical list. The table view is a standard HTML table. There's no craft here — no delightful micro-interactions, no considered typography scale, no spatial rhythm, no thoughtful use of color to create information hierarchy. |
| 10 | + |
| 11 | +## Design Direction |
| 12 | + |
| 13 | +Redesign TaskMan as a **premium, modern SaaS product** that feels like it belongs alongside Linear, Raycast, Arc Browser, and Vercel's dashboard. The aesthetic should be: |
| 14 | + |
| 15 | +- **Refined and confident** — not flashy, not minimal to the point of sterile. Every element should feel intentional. |
| 16 | +- **Dark-mode first** — the dark theme should be the hero. Rich charcoal backgrounds (not pure black), subtle gradients, thoughtful use of luminance to create depth. The light theme should be equally polished, not an afterthought. |
| 17 | +- **Spatial rhythm** — consistent spacing scale, breathing room between sections, clear visual grouping. Use whitespace as a design element. |
| 18 | +- **Typographic hierarchy** — a clear type scale with weight, size, and color contrast to create scannable layouts. Headers should have presence. Body text should be comfortable. Metadata should recede. |
| 19 | +- **Color with purpose** — the primary accent color (configurable: indigo/purple/rose/emerald/amber) should be used sparingly for CTAs, active states, and key indicators. Status colors (gray/blue/yellow/green) and priority colors (gray/blue/orange/red) should be instantly recognizable but not overwhelming. |
| 20 | +- **Subtle depth** — layered surfaces with soft shadows, subtle borders, and occasional blur effects. Not heavy glassmorphism — think frosted panels for modals and command palette, solid surfaces for cards and tables. |
| 21 | +- **Micro-interactions that reward** — hover states that respond, smooth transitions between views, satisfying feedback on task completion, drag-and-drop that feels physical. |
| 22 | + |
| 23 | +**Design references to channel**: Linear (information density + polish), Raycast (command palette + keyboard-first feel), Vercel Dashboard (typography + spacing), Stripe Dashboard (data presentation), Arc Browser (sidebar + spatial design). |
| 24 | + |
| 25 | +--- |
| 26 | + |
| 27 | +## Pages to Redesign |
| 28 | + |
| 29 | +### 1. Login & Register Pages |
| 30 | +Currently: centered white card on gray background with basic form fields. No brand presence. |
| 31 | + |
| 32 | +Redesign with: |
| 33 | +- Split layout or full-bleed design with brand illustration/gradient on one side |
| 34 | +- The TaskMan logo and tagline with visual impact |
| 35 | +- Form fields with floating labels or clean outlined inputs |
| 36 | +- Social-proof element (e.g., "Join 10,000+ teams" or animated task-completion counter) |
| 37 | +- Smooth transition between login/register states |
| 38 | +- Subtle background animation or gradient mesh |
| 39 | + |
| 40 | +### 2. Main Layout (Sidebar + Content) |
| 41 | +Currently: white sidebar (w-64) with icon+text nav items, user avatar at bottom, content area with basic padding. |
| 42 | + |
| 43 | +Redesign with: |
| 44 | +- **Sidebar**: Collapsible sidebar with a polished feel. Logo at top. Nav items with subtle hover/active indicators (left accent bar or background highlight). Group items into sections (Core: Dashboard/Tasks/Projects/Calendar, Tools: Focus/Dependencies, Settings: API Keys/Webhooks/Profile). User profile section at bottom with avatar, name, and level badge. XP progress bar integrated naturally, not crammed. Notification bell with unread dot. Keyboard shortcut hints (Cmd+K for command palette). |
| 45 | +- **Content area**: Consistent page header pattern (title + description + action buttons right-aligned). Breadcrumbs where appropriate. Smooth page transitions. |
| 46 | +- Support for minimal mode (collapsed to icon-only rail, ~56px wide) and full mode (~260px). |
| 47 | + |
| 48 | +### 3. Dashboard Page |
| 49 | +Currently: 4 stat cards in a row, then a 2-column grid of task lists and project cards. Flat, repetitive. |
| 50 | + |
| 51 | +Redesign with: |
| 52 | +- **Welcome header**: "Good morning, {name}" with date, or a motivational productivity message |
| 53 | +- **Stats row**: 4 metric cards but with visual differentiation — use icon color, subtle background tints, and a spark line or progress indicator to give each stat context (e.g., "+3 from yesterday" or a tiny bar chart) |
| 54 | +- **Activity/productivity section**: A compact heatmap or streak calendar (like GitHub contributions) showing daily task completion. Integrate the gamification naturally here — current level, XP to next level, current streak. |
| 55 | +- **Recent tasks section**: Not just a plain list — show tasks as compact rows with status dot, priority indicator, project color tag, due date, and assignee avatar. Make it scannable. |
| 56 | +- **Projects overview**: Cards with project color as accent, task count, member avatars (stacked), and a mini progress bar (% complete). |
| 57 | +- **Quick actions**: Floating or inline quick-add for new tasks, a shortcut to focus mode. |
| 58 | + |
| 59 | +### 4. Tasks Page (Table, Kanban, Calendar views) |
| 60 | +Currently: view toggle pills, dropdown filters, HTML table with alternating rows. Kanban with basic columns. Calendar with a grid. |
| 61 | + |
| 62 | +Redesign with: |
| 63 | +- **View switcher**: Segmented control with icons, smooth animation between active states |
| 64 | +- **Filter bar**: Pill-based active filters that are dismissible (click X). Filter dropdowns should be popovers, not native selects. Search input with Cmd+K hint. |
| 65 | +- **Table view**: Modern data table with sticky header, subtle row hover, inline status/priority badges (not native selects — use custom styled dropdowns or click-to-cycle). Compact but readable. Column headers with sort indicators. Row selection with checkboxes for bulk actions. |
| 66 | +- **Kanban view**: Columns with subtle background differentiation per status. Cards with clear visual hierarchy (title > project > priority > due date > assignee). Smooth drag with a slight lift/shadow effect. Column headers with task count badges. Empty column states. |
| 67 | +- **Calendar view**: Clean month grid with task dots/pills on days. Click a day to see tasks in a popover. Drag tasks between days. |
| 68 | +- **Task creation modal**: A polished modal or slide-over panel. Title input should be large and prominent (like Linear's). Form fields organized in logical groups. Support for the "smart input" (NLP quick-add) as an inline mode at the top. |
| 69 | +- **Task detail view**: Could be a full slide-over panel (right side) instead of a modal, showing title, description (rich text), status/priority selectors, assignee picker with avatars, due date picker, project selector, tags, custom fields, dependency list, file attachments. Below that: tabbed view of Comments and Activity timeline. |
| 70 | + |
| 71 | +### 5. Project Detail Page |
| 72 | +Currently: project name header, member list, Kanban board. |
| 73 | + |
| 74 | +Redesign with: |
| 75 | +- Project header with color accent, description, member avatars (stacked with +N overflow), and action buttons (settings, invite) |
| 76 | +- Tab navigation: Board | List | Calendar | Members | Settings |
| 77 | +- Board view matching the Tasks page Kanban but scoped to this project |
| 78 | +- Members section with role badges, invite functionality |
| 79 | + |
| 80 | +### 6. Focus Page |
| 81 | +Currently: full-screen mode with top 3 tasks, a progress bar, and a timer. |
| 82 | + |
| 83 | +Redesign with: |
| 84 | +- Immersive, distraction-free design. Dark background even in light mode, or a distinct "focus" color scheme. |
| 85 | +- Large task title in the center with status controls |
| 86 | +- Pomodoro timer with circular progress visualization |
| 87 | +- Ambient mode indicator (subtle pulsing or breathing animation) |
| 88 | +- Quick task switching between your top tasks |
| 89 | +- Minimal chrome — just the essentials |
| 90 | + |
| 91 | +### 7. Profile / Settings Page |
| 92 | +Currently: tabs for Appearance, Achievements, Profile, Password. |
| 93 | + |
| 94 | +Redesign with: |
| 95 | +- Clean settings layout with sidebar navigation for sections |
| 96 | +- Appearance settings: Live preview of theme changes. Color theme picker with visual swatches. Dark/light/system toggle with icons. Density picker with visual examples. |
| 97 | +- Achievements: Card grid with locked/unlocked states, progress bars, rarity indicators |
| 98 | +- Profile: Avatar upload area, form fields, save button |
| 99 | + |
| 100 | +### 8. Gamification Elements (XP Bar, Level Badge, Celebrations) |
| 101 | +Currently: small XP bar in sidebar, basic badge, canvas confetti on task completion. |
| 102 | + |
| 103 | +Redesign with: |
| 104 | +- **XP Bar**: Sleek progress bar with gradient fill matching the theme color. Show current XP / XP needed. Animate on XP gain with a subtle glow pulse. |
| 105 | +- **Level Badge**: A polished badge that communicates progress. Different visual tiers (bronze/silver/gold/diamond style or numbered with increasing visual complexity). |
| 106 | +- **Celebrations**: Task completion should trigger a satisfying micro-animation (checkmark animation, brief confetti burst, XP +number float-up). Level-up should be a brief modal celebration with the new level prominently displayed. Keep celebrations brief (1-2 seconds) and not annoying on repeat. |
| 107 | +- **Streak indicator**: Show daily streak prominently (dashboard + sidebar) with a flame or streak icon. |
| 108 | + |
| 109 | +### 9. Command Palette |
| 110 | +Currently: basic command palette overlay. |
| 111 | + |
| 112 | +Redesign with: |
| 113 | +- Centered modal with backdrop blur (like Raycast/Linear) |
| 114 | +- Search input at top with "Type a command or search..." placeholder |
| 115 | +- Categorized results (Navigation, Tasks, Projects, Settings) |
| 116 | +- Keyboard navigation with highlighted active item |
| 117 | +- Recent commands section |
| 118 | +- Smooth open/close animation |
| 119 | + |
| 120 | +### 10. Empty States |
| 121 | +Currently: SVG illustrations with centered text and CTA button. |
| 122 | + |
| 123 | +Redesign with: |
| 124 | +- Contextual illustrations that match the brand |
| 125 | +- Clear, friendly copy |
| 126 | +- Primary CTA button |
| 127 | +- Optional secondary action or help link |
| 128 | +- Subtle animation on enter |
| 129 | + |
| 130 | +--- |
| 131 | + |
| 132 | +## Data Model Summary (for context) |
| 133 | + |
| 134 | +**User**: name, email, avatar, XP, level, streak |
| 135 | +**Project**: name, description, color, owner, members (with roles: OWNER/ADMIN/MEMBER/VIEWER) |
| 136 | +**Task**: title, description, status (TODO/IN_PROGRESS/IN_REVIEW/DONE), priority (LOW/MEDIUM/HIGH/URGENT), dueDate, assignee, creator, project, tags, dependencies, recurring flag, custom fields, attachments, comments, time entries |
| 137 | +**Comment**: content (markdown), author, parentId (threading), @mentions |
| 138 | +**TimeEntry**: start/end times, duration, associated task |
| 139 | +**Achievement**: name, description, icon, criteria, user unlocks |
| 140 | +**Notification**: message, type, read status, link |
| 141 | +**Tag**: name, color, project-scoped |
| 142 | +**TaskDependency**: blocking/blocked-by relationships |
| 143 | + |
| 144 | +--- |
| 145 | + |
| 146 | +## Technical Constraints |
| 147 | + |
| 148 | +- **Framework**: React 18 + TypeScript + Vite |
| 149 | +- **Styling**: Tailwind CSS v3.4 with `darkMode: 'class'`. Use Tailwind utilities. CSS variables for theme colors (`--primary`, `--primary-foreground`, `--ring`, `--primary-light`, `--primary-dark`). |
| 150 | +- **Component library**: No external UI library (no shadcn, no Radix, no Headless UI). All components are custom-built. You may introduce shadcn/ui or Radix primitives if it significantly improves quality. |
| 151 | +- **Icons**: lucide-react |
| 152 | +- **State**: Zustand stores (auth, theme, layout, density, timer, toast, celebration, commandPalette, socket) |
| 153 | +- **Data fetching**: @tanstack/react-query v5 with REST API |
| 154 | +- **Animations**: framer-motion v12. Respect `animationIntensity` (normal/reduced/none) and `performanceMode` (balanced/performance/quality) user settings. |
| 155 | +- **Drag & drop**: @dnd-kit for Kanban |
| 156 | +- **Real-time**: socket.io-client |
| 157 | +- **Routing**: React Router v6 |
| 158 | + |
| 159 | +--- |
| 160 | + |
| 161 | +## Component Inventory (existing, to be restyled) |
| 162 | + |
| 163 | +These components exist and need visual redesign while maintaining their API/prop interfaces: |
| 164 | + |
| 165 | +| Component | Purpose | |
| 166 | +|-----------|---------| |
| 167 | +| `Layout.tsx` | Main sidebar + content layout shell | |
| 168 | +| `TaskCard.tsx` | Reusable task card (used in lists, kanban, dashboard) | |
| 169 | +| `TaskDetailModal.tsx` | Full task detail modal with form + comments + activity | |
| 170 | +| `KanbanColumn.tsx` | Kanban status column | |
| 171 | +| `CalendarView.tsx` | Month calendar with task pills | |
| 172 | +| `StatCard` (in DashboardPage) | Metric display card | |
| 173 | +| `CommandPalette.tsx` | Cmd+K command palette | |
| 174 | +| `ThemePicker.tsx` | Color theme selector | |
| 175 | +| `ThemeToggle.tsx` | Dark/light/system toggle | |
| 176 | +| `DensityPicker.tsx` | Spacing density selector | |
| 177 | +| `NotificationCenter.tsx` | Bell icon + notification dropdown | |
| 178 | +| `Toast.tsx` | Toast notification container | |
| 179 | +| `TimerWidget.tsx` | Floating pomodoro timer | |
| 180 | +| `XPBar.tsx` | XP progress bar | |
| 181 | +| `LevelBadge.tsx` | Level display badge | |
| 182 | +| `SmartTaskInput.tsx` | NLP-powered quick task input | |
| 183 | +| `CommentList.tsx` / `CommentEditor.tsx` | Threaded comment system | |
| 184 | +| `ActivityTimeline.tsx` | Task change history | |
| 185 | +| `EmptyState.tsx` | Empty state illustrations | |
| 186 | +| `Skeletons.tsx` | Loading skeleton placeholders | |
| 187 | +| `SearchBar.tsx` | Search input | |
| 188 | +| `Pagination.tsx` | Pagination controls | |
| 189 | +| `TagPicker.tsx` | Tag selector | |
| 190 | +| `DependencyPicker.tsx` / `DependencyList.tsx` | Task dependency management | |
| 191 | +| `FileAttachments.tsx` | File upload/display | |
| 192 | +| `RecurrencePickerModal.tsx` | Recurring task configuration | |
| 193 | +| `AccessibilityControls.tsx` | High contrast / animation settings | |
| 194 | +| `OnboardingModal.tsx` | First-time user onboarding | |
| 195 | +| `GlassCard.tsx` | Glassmorphism card wrapper | |
| 196 | +| `AnimatedButton.tsx` | Button with hover animation | |
| 197 | +| `LoginPage.tsx` / `RegisterPage.tsx` | Auth pages | |
| 198 | +| `DashboardPage.tsx` | Main dashboard | |
| 199 | +| `TasksPage.tsx` | Multi-view task management | |
| 200 | +| `ProjectDetailPage.tsx` | Single project view | |
| 201 | +| `FocusPage.tsx` | Distraction-free focus mode | |
| 202 | +| `ProfilePage.tsx` | User settings + achievements | |
| 203 | + |
| 204 | +--- |
| 205 | + |
| 206 | +## Deliverables |
| 207 | + |
| 208 | +For each page/component, produce: |
| 209 | +1. The complete React + TypeScript + Tailwind component code |
| 210 | +2. Both dark and light mode styles using Tailwind's `dark:` prefix |
| 211 | +3. Responsive design (mobile-first, breakpoints at sm/md/lg/xl) |
| 212 | +4. Framer Motion animations where appropriate (page transitions, modals, list items, hover states) |
| 213 | +5. Accessible markup (proper ARIA attributes, keyboard navigation, focus management) |
| 214 | + |
| 215 | +Start with the **Layout (sidebar + shell)**, **Dashboard Page**, **Tasks Page** (all three views), and **Login Page** — these are the highest-impact surfaces. |
0 commit comments