skills.rest
jimmi-joensson
jimmi-joenssonCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/jimmi-joensson/OpenWhisper --skill openwhisper-devtools-sheet
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
DiologIRDiologIR

acceptance-e2e

Automate end-to-end UI tests for web applications using Playwright.

Official
Advanced
cheng80cheng80
1

open-gstack-browser

Launch a real-time GStack Browser session with a live activity sidebar.

Community
Advanced
Hashzin-0Hashzin-0

design-system-rigoroso

Enforce token-based styling and required visual states across UI components.

Community
Intermediate