tuning-panel_skill

Overview

This skill creates visual tuning panels for iterating on animations, layouts, colors, typography, physics, and other numeric or visual values. It surfaces every relevant parameter for a task, enables real-time adjustment, and exports only the values that changed in an LLM-friendly format. The panels are intended for debug/development use and include sensible controls, grouping, presets, and reset behaviors.

How this skill works

The skill scans the target code or UI to identify tunable parameters (magic numbers, style objects, animation configs, color values, and component props). It builds a debug-only panel using an appropriate platform library (Leva for React, native controls for SwiftUI, Tweakpane/dat.GUI for vanilla JS), groups related controls, and wires live updates into the running UI. When requested, it compares current values to stored defaults, filters changed fields, applies a numeric tolerance for floats, and outputs a concise default → current export grouped by category.

When to use it

• When a user asks to "create a tuning panel", "add parameter controls", or "build a debug panel"
• When iterating on animations, easing, or physics parameters
• When fine-tuning layout, spacing, and responsive values
• When adjusting visual properties like colors, opacity, shadows, and borders
• When you need an exportable summary of tuned values for code updates

Best practices

• Expose every parameter that can affect the outcome; err on the side of exhaustive discovery
• Restrict panels to debug mode (environment flags, build targets, or URL query) so they never ship to production
• Group related controls and choose appropriate control types (sliders for numbers, color pickers for colors, dropdowns for enums)
• Store initial defaults at panel init and export only changed values using a small tolerance for floats
• Provide presets and reset buttons to speed iteration and revert mistakes

Example use cases

• Add a Leva panel to a React animation playground to tweak duration, easing, and spring settings live
• Add a debug overlay in a SwiftUI prototype to adjust font sizes, line heights, and spacing during design reviews
• Attach a Tweakpane to a vanilla JS canvas demo to tune physics parameters like mass, damping, and gravity
• Generate a compact LLM-friendly export showing only changed values to paste into a PR description or issue
• Create presets for common visual themes and share tuned values with engineers for implementation