# syncfusion-react-speech-to-text

This skill guides React implementations of Syncfusion SpeechToText, including microphone input, transcript events, listening control, and accessible voice forms.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 705 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-speech-to-text/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-speech-to-text

## What it does

The skill covers Syncfusion’s React SpeechToText component, which relies on the Web Speech API to turn microphone audio into text. It explains how to receive live and final transcripts, select a recognition language, track listening status, and connect speech input to form fields.

Its guidance includes npm setup, theme CSS imports, event handlers such as `onStart`, `onStop`, `onError`, and `transcriptChanged`, plus ref-based calls to `startListening()`, `stopListening()`, and `destroy()`. It also addresses button and tooltip styling, localization, RTL layouts, ARIA attributes, and error handling.

Speech recognition depends on browser microphone permission. The examples use `SpeechToTextComponent`, `TextAreaComponent`, and `@syncfusion/ej2-react-inputs`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-speech-to-text -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-speech-to-text/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-speech-to-text/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-speech-to-text -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-speech-to-text/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-speech-to-text -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-speech-to-text/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-speech-to-text
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-speech-to-text/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-speech-to-text -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-speech-to-text
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-speech-to-text/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-speech-to-text -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-speech-to-text/SKILL.md

## When to use it
- add voice input to a React form
- show live and final speech transcripts
- start and stop listening from code
- customize the microphone button and tooltip
- handle microphone permission errors

## Example prompts
- Add `SpeechToTextComponent` to this React form and place its transcript in `TextAreaComponent`.
- Connect `transcriptChanged` to form state so spoken text updates the field.
- Use a component ref with `startListening()` and `stopListening()`, then display errors from `onError`.

## Similar
- [speech-to-text](https://affpapa.org/en/nevibecode/skills/speech-to-text.md) — skill · 11800 installs
- [azure-speech-to-text](https://affpapa.org/en/nevibecode/skills/azure-speech-to-text.md) — skill · 783 installs
- [speech-engine](https://affpapa.org/en/nevibecode/skills/speech-engine.md) — skill · 6500 installs
- [text-to-speech](https://affpapa.org/en/nevibecode/skills/calesthio-text-to-speech.md) — skill · 1200 installs
- [react-doctor](https://affpapa.org/en/nevibecode/skills/react-doctor.md) — skill · 19200 installs
- [react-testing](https://affpapa.org/en/nevibecode/skills/react-testing.md) — skill · 4800 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 57 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md