openwhisper-devtools-sheet

Place dev-only UI overrides inside the DevToolsPanel sheet gated by import.meta.env.DEV.

2|Updated Apr 22, 2026

Search Tags:#typescript #react #devtools #tauri #dev-overrides #devpanel

Ready to run

npx skills add https://github.com/jimmi-joensson/OpenWhisper --skill openwhisper-devtools-sheet

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: openwhisper-devtools-sheet
Source: https://github.com/jimmi-joensson/OpenWhisper/tree/main/.claude/skills/openwhisper-devtools-sheet
Command: npx skills add https://github.com/jimmi-joensson/OpenWhisper --skill openwhisper-devtools-sheet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes dev-only UI overrides inside the DevToolsPanel sheet to avoid cluttering the UI with ad-hoc widgets and panels, keeping development-focused experiments organized in a single place.

Core Features & Use Cases

Single home for dev overrides inside the DevToolsPanel, preventing floating dev widgets.
Reuses existing structure and CSS classes to minimize surface area and keep consistency.
Enables wired development-time controls via App.tsx, Tauri commands s, and gated visibility under the development flag.

Quick Start

Add a new internal section component inside DevToolsPanel.tsx and wire it through App.tsx, gating the entire section with import.meta.env.DEV.

Frequently Asked Questions about openwhisper-devtools-sheet

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

FAQPage Schema

How do I centralize dev-only UI overrides in a Tauri app?▼

You can centralize dev-only UI overrides by placing them inside the DevToolsPanel sheet rather than adding floating widgets, keeping development experiments organized in a single component.

How do I gate dev tools behind a development flag in React?▼

You can gate dev tools behind a development flag in React by wiring the DevToolsPanel through App.tsx and using the import.meta.env.DEV flag to ensure visibility only in development builds.

Does this approach provide test hooks for Playwright in Tauri apps?▼

Yes, this approach provides test hooks for Playwright by wiring development-time controls through App.tsx and Tauri commands, allowing automated tests to interact with parked app state and simulated behaviors.

What is the best way to manage parked app state and toggles during development?▼

The best way to manage parked app state and toggles during development is to use a centralized DevToolsPanel sheet, which applies to features requiring simulated behaviors and keeps the main UI uncluttered.

How do I add new dev overrides without creating floating UI panels?▼

To add new dev overrides without creating floating UI panels, add a new internal section component inside dev-tools-panel.tsx and wire it through App.tsx, reusing existing CSS classes for consistency.