Can I use this for non-visual parameters?

While optimized for UI, it can be used to tune any numeric, boolean, or string-based parameters, such as game physics, logic constants, or API timing.

How do I save the changes I make in the panel?

The panel includes an LLM Export feature that identifies only the values you modified and formats them as a clear summary to be applied back to your source code.

Does this panel show up in my production app?

No, the skill automatically wraps panels in environment checks like process.env.NODE_ENV === 'development' or #if DEBUG to ensure they only appear during development.

Which libraries does the Tuning Panel support?

It provides tailored implementations for Leva in React, Tweakpane or dat.GUI for Vanilla JS, and native controls for SwiftUI.

Visual Tuning Panel

Name: Visual Tuning Panel
Author: petekp

bypetekp

•

デザインツール

Generates interactive debug panels for real-time adjustment of UI parameters like animations, layouts, and styles.

The Tuning Panel skill enables developers to quickly create bespoke, visual interfaces for fine-tuning UI parameters without repetitive code changes. By surfacing exhaustive controls for animations, typography, and physics in a debug-only overlay, it allows for real-time iteration and provides a specialized LLM-friendly export of only the modified values, streamlining the handoff from visual experimentation to production code.

主な機能

01Automatically identifies tunable magic numbers, colors, and physics constants

02Exports only changed values in a clean format for easy LLM integration

03Supports React (Leva), SwiftUI, and Vanilla JS (Tweakpane/dat.GUI)

04Groups related parameters into logical folders with intuitive UI controls

051 GitHub stars

06Generates debug-only panels that won't leak into production environments

ユースケース

01Iterating on layout spacing, padding, and positioning in real-time

02Fine-tuning complex spring physics and easing curves for UI animations

03Testing color palettes and typography scales across different components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petekp/agent-skills tuning-panel

For use in Claude.ai and ChatGPT

Download Skill