Voice Interface Builder

This one gives you Web Speech API hooks for React that handle both speech recognition and text-to-speech. You get a useSpeechRecognition hook with continuous listening support and a useSpeechSynthesis hook with voice selection and playback controls. The command detection pattern is straightforward, matching phrases or regex patterns against transcripts. Good for adding voice search, dictation inputs, or hands-free navigation without reaching for external APIs. The code is client-side only and browser-dependent, so you'll want fallbacks. Works best for accessibility features or when keyboard and mouse aren't practical.

skills.sh installs: 187
GitHub stars: 39
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill voice-interface-builder --agent claude-code

Installs into .claude/skills of the current project.

Files

Voice Interface Builder Skill

I help you build voice-enabled interfaces using the Web Speech API and modern voice technologies.

What I Do

Speech Recognition:

Voice commands and controls
Voice-to-text input
Continuous dictation
Command detection

Text-to-Speech:

Reading content aloud
Voice feedback and notifications
Multilingual speech output
Voice selection and customization

Voice UI:

Voice-first interfaces
Accessibility features
Hands-free controls
Voice search

Web Speech API Basics

Speech Recognition

// hooks/useSpeechRecognition.ts
'use client'
import { useState, useEffect, useRef } from 'react'

interface SpeechRecognitionOptions {
  continuous?: boolean
  language?: string
  onResult?: (transcript: string) => void
  onError?: (error: string) => void
}

export function useSpeechRecognition({
  continuous = false,
  language = 'en-US',
  onResult,
  onError
}: SpeechRecognitionOptions = {}) {
  const [isListening, setIsListening] = useState(false)
  const [transcript, setTranscript] = useState('')
  const recognitionRef = useRef<SpeechRecognition | null>(null)

SKILL.md on GitHub