Guided home screen with greeting, voice input, suggestion chips, and priority card assembly. Use when implementing the main dashboard home page, greeting message, suggestion chips, or the Claude.ai-inspired conversational home layout. Depends on skill-layout-system and skill-priority-card.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Guided home screen with greeting, voice input, suggestion chips, and priority card assembly. Use when implementing the main dashboard home page, greeting message, suggestion chips, or the Claude.ai-inspired conversational home layout. Depends on skill-layout-system and skill-priority-card.
Objective
Replace the current dashboard overview (stat cards grid) with a guided, conversational home screen inspired by Claude.ai's layout. Optimized for a 65-year-old caregiver who needs clear, simple guidance on what to do next.
Constraints
DO NOT remove the existing dashboard/page.tsx -- refactor it in place
MUST preserve existing data fetching (elder data, compliance stats)
MUST integrate with TaskPriorityContext
MUST work with existing voice command system
Target: one glance tells the caregiver what to do next
No information overload -- progressive disclosure only
Files to Read First
src/app/dashboard/page.tsx -- Current dashboard (to be refactored)
src/components/dashboard/PriorityCard.tsx -- From skill-priority-card
src/lib/voice/voiceNavigation.ts -- Existing voice system
src/hooks/useTaskPriority.ts -- Priority data
src/contexts/ElderContext.tsx -- Elder data provider
Screen Layout (Mobile - 390px)
+------------------------------------------+
| [Logo] [Bell] [Avatar] | <- MinimalHeader (48px)
+------------------------------------------+
| |
| Good morning, Sarah | <- Time-aware greeting
| Martha has 3 tasks today | <- Context summary
| |
+------------------------------------------+
| [PRIORITY CARD - DUE NOW] | <- PriorityCard component
| Metformin 500mg for Martha |
| Due at 8:00 AM |
| [ Mark as Given ] [ Skip ] |
+------------------------------------------+
| [===========--------] 8/12 done | <- DayProgress bar
+------------------------------------------+
| |
| Suggested actions: |
| +----------+ +----------+ +--------+ |
| | Log meal | | Add note | | Voice | | <- Suggestion chips
| +----------+ +----------+ +--------+ |
| |
+------------------------------------------+
| [Mic icon] "What would you like to do?" | <- Voice input area
| Tap to speak or type... |
+------------------------------------------+
| |
| [Home] [Care] [Voice] [Notes] [More] | <- BottomNav (56px)
+------------------------------------------+
Implementation Steps
Step 1: Create Greeting Component
Create src/components/dashboard/HomeGreeting.tsx:
Purpose: Time-aware personalized greeting
Logic:
- 5-11AM: "Good morning, {firstName}"
- 12-16PM: "Good afternoon, {firstName}"
- 17-20PM: "Good evening, {firstName}"
- 21-4AM: "Welcome back, {firstName}"Subtitle (contextual):
- If overdue tasks: "{elderName} has {count} overdue tasks"
- If due soon: "{elderName}'s next task is in {minutes} min"
- If all done: "All caught up! Great job today"
- If multiple elders: "You have {count} elders to check on"Font: greeting 24px semibold, subtitle 16px regular secondary
Purpose: Always-visible voice/text input (like Claude.ai's message box)
Display:
- Rounded input field with mic icon on left
- Placeholder: "What would you like to do?"
- Tap mic = start voice recognition
- Tap text area = show keyboard with autocomplete
Integration:
- Connects to existing voiceNavigation.ts command system
- Recognized commands trigger navigation
- Unrecognized input goes to AI chat
- Shows real-time transcription while listening
States:
- Idle: gray mic icon, placeholder text
- Listening: pulsing blue mic icon, "Listening..."
- Processing: spinner, "Understanding..."
- Error: red mic icon, "Tap to try again"
- Content centered with max-width: 640px
- PriorityCard can show 2-3 upcoming tasks in a mini-list below
- Suggestion chips in 2 rows instead of scrollable
- Voice input area wider but same functionality
- Optional: right sidebar showing today's full schedule
Auto-Suggest Flow (After Action)
When a user completes a task:
Priority card animates out (slide up/fade)
Brief success toast (2 seconds)
Next task slides in from bottom
Suggestion chips update
If all done: show celebration state ("All caught up!")
Edge Cases
No elders assigned: Show onboarding prompt ("Add your first Loved One")
No medications set up: Show setup prompt ("Set up medications to get reminders")
First visit of day: Show daily summary instead of greeting
Offline mode: Show cached last-known state with "Offline" badge
Family member (read-only): Hide action buttons, show status only
Testing Requirements
Greeting matches time of day
Suggestion chips are contextual
Voice input integrates with existing voiceNavigation
