Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-speech-to-text — Claude Code skill: install

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-speech-to-text -a claude-code
Open on GitHub

What syncfusion-react-speech-to-text 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.

What it helps with

  • 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 for the agent

  • 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.

How to install syncfusion-react-speech-to-text

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-speech-to-text -a claude-code

2Manually: put the files in place

~/.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/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-speech-to-text

How do I install syncfusion-react-speech-to-text in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-speech-to-text -a claude-code, then check ~/.claude/skills/syncfusion-react-speech-to-text/SKILL.md.

What does syncfusion-react-speech-to-text do?

It guides the implementation of Syncfusion SpeechToText in React, covering speech recognition, transcript events, listening controls, interface customization, and localization.

What is required for speech recognition?

The component uses the Web Speech API and the browser microphone. Microphone access must be granted by the user.

Similar skills

All skills for Frontend and UI →
speech-to-text elevenlabs Wraps ElevenLabs Scribe v2 so your coding agent can turn audio or video into text, with speaker labels and word-level timings. CX Codex +1 11,800installs azure-speech-to-text calesthio Transcribes local audio files into text with word-level timestamps and speaker diarization using Azure AI Speech. Speeds up subtitle creation and audio processing in OpenMontage pipelines. CX Codex +1 783installs speech-engine elevenlabs Wires ElevenLabs Speech Engine into a custom agent: ElevenLabs handles mic audio, speech-to-text and playback, your server streams the reply text. CX Codex +1 6,500installs text-to-speech calesthio Generates speech audio with HeyGen Starfish and lets you choose a voice, speed, and pitch. Useful for voiceovers, narration, and podcasts. CX Codex +1 1,200installs react-doctor millionco Audits React codebases for architecture, accessibility, and rendering issues. Computes a health score from 0 to 100 and helps patch regressions. CX Codex +1 19,200installs react-testing affaan-m A skill for writing React component, hook and page tests with React Testing Library, Vitest or Jest, MSW network mocks and axe accessibility assertions. CX Codex +1 4,800installs

From the same set57

syncfusion-react-dashboard-layout A skill that tells your coding agent how to build React dashboards with draggable Syncfusion panels. CX Codex +1 709installs syncfusion-react-query-builder Guides integration of Syncfusion's visual query builder in React. Useful when constructing condition trees and transforming filter rules into SQL or Mongo queries. CX Codex +1 708installs syncfusion-react-maps Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. Useful when data has to be shown by region. CX Codex +1 707installs syncfusion-react-blockeditor A skill that walks your agent through the Syncfusion React BlockEditor: block-based content editing with menus, drag-and-drop and Yjs collaboration. CX Codex +1 706installs syncfusion-react-treeview An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates. CX Codex +1 705installs syncfusion-react-dropdown-tree Helps an agent build a Syncfusion React Dropdown Tree for hierarchical selection, checkboxes, and filtering. Useful with local or remote data sources. CX Codex +1 703installs syncfusion-react-inline-ai-assist This skill guides React implementations of Syncfusion Inline AI Assist with AI suggestions, commands, response handling, and service integrations. CX Codex +1 700installs syncfusion-react-ribbon A skill for building Office-style ribbon toolbars in React with Syncfusion: tabs, groups, galleries, backstage view, KeyTips. Use it when an agent needs to scaffold a command-centric UI. CX Codex +1 700installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor