skills.rest
FlowingSPDG
FlowingSPDGCOMMUNITY
Explore all skills by this author →
𝕏@FlowingSPDGGitHub

streamdeck-property-inspector

Guide developers in implementing Stream Deck Property Inspectors with sdpi-components.

2|Updated Jan 19, 2026
Search Tags:#debugging#ui-design#plugin-development#stream-deck#sdpi-components#property-inspector
One-click install
npx skills add https://github.com/FlowingSPDG/skills-streamdeck --skill streamdeck-property-inspector
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streamdeck-property-inspector
Source: https://github.com/FlowingSPDG/skills-streamdeck/tree/main/skills/streamdeck-property-inspector
Command: npx skills add https://github.com/FlowingSPDG/skills-streamdeck --skill streamdeck-property-inspector

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers building Stream Deck plugins often struggle to implement and wire up Property Inspectors (PI) for per-action configuration UIs. This skill provides a clear, actionable guide to create, structure, and connect Property Inspectors with plugins, reducing boilerplate and errors.

Core Features & Use Cases

  • Guidance on PI concepts: what a PI is, where to place UI files, and how to reference them in manifest.json.
  • UI patterns and components: how to use sdpi-components web components to build consistent, accessible interfaces.
  • Communication workflow: how the PI exchanges settings with the plugin via didReceiveSettings and setSettings patterns.
  • Use Case: create a property inspector for a sample action to configure simple settings like name and enable state.

Quick Start

Create a Property Inspector HTML file under ui/, add a local sdpi-components.js to the same directory, reference it in your HTML, configure manifest.json with PropertyInspectorPath, and test with Stream Deck's developer tools.

Frequently Asked Questions about streamdeck-property-inspector

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

FAQPage Schema
How do I build a Stream Deck Property Inspector for my plugin actions?▼

To build a Stream Deck Property Inspector, create an HTML file under a ui/ directory, add a local sdpi-components.js file, reference it in your HTML, and configure PropertyInspectorPath in your manifest.json to enable per-action configuration UI.

What are sdpi-components and how do they work for Stream Deck plugin UI?▼

sdpi-components are web components used to build consistent, accessible Property Inspector interfaces for Stream Deck plugins, reducing boilerplate and UI errors by providing pre-built configuration elements that integrate directly with your local HTML setup.

How does a Stream Deck Property Inspector communicate settings with the plugin?▼

A Stream Deck Property Inspector communicates with the plugin using didReceiveSettings and setSettings patterns, establishing a two-way exchange of configuration data between the PI UI and the plugin across multiple registered actions.

Where do I place Property Inspector UI files in my Stream Deck plugin structure?▼

You place Property Inspector UI files in a dedicated ui/ directory within your plugin project structure, ensuring the local sdpi-components.js is in the same directory as your PI HTML file for proper loading and testing.

Can I configure multiple Stream Deck actions with different Property Inspectors?▼

Yes, you can configure multiple Stream Deck actions with different Property Inspectors by referencing distinct PI HTML files via the PropertyInspectorPath in your manifest.json, enabling unique configuration UIs for each action type.

Related Skills

Explore More Software Engineering Skills→
acaprinoacaprino
6

obsidian-check

Validate Obsidian plugin code against quality and style rules.

Community
Advanced
FlowingSPDGFlowingSPDG
2

sdpi-components

Build Stream Deck Property Inspector UIs with sdpi-components web components.

Community
Basic
csim-sgcsim-sg

daisy-ui

Build UI components with DaisyUI v5 and Tailwind CSS 4.

Community
Intermediate
kriscendobotkriscendobot
3

native-customizable-form-control-styling

Style native HTML select elements with CSS pseudo-elements and pseudo-classes.

Community
Advanced