skills.rest
fcannizzaro
fcannizzaroCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

streamdeck-react

Build React-based Stream Deck plugins with hooks and manifest generation.

3|Updated Mar 1, 2026
Search Tags:#react#plugin#vite#adapter#renderer#streamdeck#takumi
One-click install
npx skills add https://github.com/fcannizzaro/streamdeck-react --skill streamdeck-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streamdeck-react
Source: https://github.com/fcannizzaro/streamdeck-react/tree/main/skills/streamdeck-react
Command: npx skills add https://github.com/fcannizzaro/streamdeck-react --skill streamdeck-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designing and maintaining Stream Deck plugins with React is complex due to rendering, state synchronization, and hardware backend integration. The skill provides a complete React renderer, hooks, and scaffolding to build isolated action roots that render to hardware surfaces.

Core Features & Use Cases

  • React-driven rendering for keys, dials, and touch screens with a Takumi-based rasterizer.
  • Automatic plugin manifest generation and per-action hooks for settings, events, and coordinator support.
  • Starter templates and scaffolding to bootstrap new plugins with a minimal, production-ready setup.

Quick Start

Install the scaffolding and start a new plugin project using the provided CLI to quickly bootstrap a Stream Deck React plugin.

Frequently Asked Questions about streamdeck-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Stream Deck plugins with React?▼

React-based Stream Deck plugins are built using a complete renderer that maps components to hardware surfaces. The skill provides an adapter, action hooks, and manifest generation to manage full lifecycle and state synchronization automatically.

Can I render React components directly on Stream Deck keys and touch screens?▼

React components render directly on Stream Deck keys, dials, and touch screens using a Takumi-based rasterizer. This handles isolated action roots and renders them directly to the hardware backend surfaces.

What is the best way to scaffold a new Stream Deck plugin using Vite?▼

The best way to scaffold a Stream Deck plugin is using the provided CLI starter templates. This bootstraps a minimal, production-ready Vite setup with lazy native bindings and a complete workflow from development to manifest generation.

Does this Stream Deck adapter support automatic plugin manifest generation?▼

Yes, the Stream Deck adapter supports automatic plugin manifest generation. It also provides per-action hooks for settings, events, and coordinator support to streamline the hardware integration and state management workflow.

How does state synchronization work when rendering React on hardware surfaces?▼

State synchronization when rendering React on hardware surfaces is managed through per-action hooks and a specialized adapter. This ensures React component lifecycle updates correctly reflect across Stream Deck keys, dials, and touch screens.

Related Skills

Explore More Software Engineering Skills→
verygoodpluginsverygoodplugins
31

streamdeck-designer

Design custom Stream Deck layouts with streamdeck-mcp tools.

Official
Advanced
FlowingSPDGFlowingSPDG
2

streamdeck-native-plugin

{Error: Answer is incorrect. Please see below for the correct answer: {Error:Incorrect tagline format. Please see the below error.}}

Community
Advanced
OpenAEC-FoundationOpenAEC-Foundation
6

react-agents-review

Validate React code against hooks, TypeScript, and quality checklists.

Official
Advanced
FlowingSPDGFlowingSPDG
2

streamdeck-node-plugin

Build, test, and deploy Node.js Stream Deck plugins with the CLI and SDK.

Community
Intermediate