Wire existing voice command system into the new layout components. Use when integrating voice input, speech recognition, voice commands, or the voice modal into the bottom nav, guided home, or priority card. Depends on skill-layout-system and skill-guided-home.
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.
Wire existing voice command system into the new layout components. Use when integrating voice input, speech recognition, voice commands, or the voice modal into the bottom nav, guided home, or priority card. Depends on skill-layout-system and skill-guided-home.
Objective
Integrate the existing voice command system (40+ commands, fuzzy matching) into the new layout. The voice system is FULLY BUILT -- this skill only wires it into new UI touch points.
Constraints
DO NOT rewrite voice recognition logic -- it works
DO NOT modify voiceNavigation.ts command definitions
MUST connect voice to: VoiceInputArea, BottomNav mic button, SuggestionChips
MUST preserve existing voice command routing
MUST handle: start/stop listening, transcription display, error states
Web Speech API is already implemented
Files to Read First
src/lib/voice/voiceNavigation.ts -- Command definitions and routing (DO NOT MODIFY)
src/lib/voice/speechRecognition.ts -- Web Speech API wrapper (if exists)
src/components/voice/ -- Any existing voice components
src/components/dashboard/VoiceInputArea.tsx -- From skill-guided-home
src/components/shared/BottomNav.tsx -- Mic button integration point
Existing Voice System Architecture
User speaks → Web Speech API → transcript text
→ voiceNavigation.matchCommand(transcript)
→ if matched: router.push(matchedRoute)
→ if not matched: send to AI chat
// Special voice commands when PriorityCard is visible:const priorityVoiceCommands = {
"mark as given": () =>handleComplete(currentTask.id),
"done": () =>handleComplete(currentTask.id),
"skip": () =>handleSkip(currentTask.id),
"skip this one": () =>handleSkip(currentTask.id),
"next": () =>handleSkip(currentTask.id),
"log it": () =>handleComplete(currentTask.id),
"taken": () =>handleComplete(currentTask.id),
};
// Register these as priority commands when PriorityCard is mounted
Step 5: Suggestion Chips Voice Integration
When user taps a suggestion chip with text like "Log breakfast":
// Pre-fill the voice/text input area with the chip text// Then auto-execute the commandconsthandleChipTap = (chipText: string) => {
const matched = voiceNavigation.matchCommand(chipText);
if (matched) {
router.push(matched.route);
}
};
Microphone Permission Flow
// First-time voice use:1.Show permission prompt: "MyGuide needs microphone access for voice commands"2.Ifgranted: proceed to listen
3.Ifdenied: show text-only input, hide mic button
4.Store permission state inlocalStorage// Check on component mount:const hasMicPermission = await navigator.permissions.query({ name: 'microphone' });
Accessibility
Voice modal announces state changes to screen reader
Keyboard shortcut: Ctrl+M or Cmd+M to toggle voice
Voice hints are readable by screen reader
Error states provide clear recovery instructions
Works without voice (text input fallback always available)
Testing Requirements
Voice modal opens from BottomNav mic button
Voice modal opens from VoiceInputArea mic icon
Existing 40+ voice commands still route correctly
Priority card voice commands work (mark as given, skip)
