Tuning Panel Skill

Create bespoke parameter tuning panels that give users visual control over values they're iterating on. These panels surface all relevant parameters for the current task, enable real-time adjustment, and export tuned values in an LLM-friendly format.

Core Philosophy

Err on the side of exhaustive. When a user is tuning something, surface every parameter that could reasonably affect the outcome. Missing a parameter forces context-switching; having "too many" parameters costs only scroll distance.

Platform-native approach. Use the most appropriate library for the codebase:

• React → leva (preferred) or react-dat-gui
• Vue → tweakpane with Vue bindings
• Vanilla JS → tweakpane or dat.GUI
• Swift/SwiftUI → Native controls with @State bindings
• Flutter → Debug overlay with ValueNotifier

Implementation Workflow

Step 1: Identify All Tunable Parameters