tuning-panel
Create visual parameter tuning panels for iterative adjustment of animations, layouts, colors, typography, physics, or any numeric/visual values. Use when the user asks to "create a tuning panel", "add parameter controls", "build a debug panel", "tweak parameters visually", "fine-tune values", "dial in the settings", or "adjust parameters interactively". Also triggers on mentions of "leva", "dat.GUI", or "tweakpane".
- Installs
- 49
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/petekp/agent-skills --skill tuning-panel- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads tuning-panel automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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.
Debug-mode only. Tuning panels should never appear in production. Use environment checks, build flags, or URL parameters.
Export changed values only. LLM exports should show only what was tuned, not all 100+ parameters.
Platform Selection
| Platform | Library | Reference |
|---|---|---|
| React | Leva (recommended) | references/react-leva.md |
| SwiftUI | Native controls | references/swiftui.md |
| Vanilla JS | Tweakpane or dat.GUI | references/vanilla-js.md |
Implementation Workflow
Step 1: Identify All Tunable Parameters
Analyze the code being tuned and extract every parameter that affects the output. See references/parameter-categories.md for exhaustive lists by domain.
Common categories:
- Animation: duration, delay, easing, spring physics (stiffness, damping, mass)
- Layout: padding, margin, gap, width, height, position
- Visual: colors, opacity, shadows, borders, transforms
- Typography: font size, line height, letter spacing, weight
Discovery strategies:
- Search for magic numbers (any hardcoded numeric value)
- Look for style objects (CSS-in-JS, inline styles, theme values)
- Find animation definitions (Framer Motion, CSS transitions, SwiftUI animations)
- Identify color values (hex, RGB, HSL anywhere in the file)
- Check component props with numeric or color defaults
- Examine CSS custom properties (
--var-namedeclarations)
Step 2: Create Debug-Mode Panel
Wrap the tuning panel so it only appears in development:
- React:
process.env.NODE_ENV === 'development' - SwiftUI:
#if DEBUG - Vanilla JS: URL parameter
?debugor environment check
See platform-specific references for code patterns.
Step 3: Implement Controls
Follow these principles:
- Group related parameters using folders/sections
- Use appropriate control types: sliders for numbers, color pickers for colors, dropdowns for enums
- Set sensible min/max/step values based on the parameter domain
- Include presets for common configurations
- Add reset buttons to return to defaults
Step 4: Add LLM Export
Critical requirements:
- Store defaults at initialization for comparison
- Use tolerance for floats (e.g.,
Math.abs(a - b) > 0.001) - Filter to changed values only - don't show unchanged parameters
- Format for readability - group by category, use human-readable names
Export format:
## Tuned Parameters for [ComponentName]
### Changed Values
- Duration: 300 → 450
- Spring Damping: 0.80 → 0.65
- Corner Radius: 12 → 16
### Apply These Values
Update the component at `src/components/Card.tsx:42` with the values above.
Why this matters:
- A panel might expose 100+ parameters
- Exporting all values wastes tokens and obscures what changed
- The
default → currentformat makes diffs scannable
Additional Resources
Reference Files
- references/react-leva.md - Complete React/Leva implementation guide
- references/swiftui.md - SwiftUI native controls and export patterns
- references/vanilla-js.md - Tweakpane and dat.GUI for plain JS
- references/parameter-categories.md - Exhaustive parameter lists by domain
Example Files
- examples/react-leva-animation.tsx - Complete animation tuning panel
- examples/export-format.md - Full LLM export template
FAQ
What does the tuning-panel skill do?
Create visual parameter tuning panels for iterative adjustment of animations, layouts, colors, typography, physics, or any numeric/visual values. Use when the user asks to "create a tuning panel", "add parameter controls", "build a debug panel", "tweak parameters visually", "fine-tune values", "dial in the settings", or "adjust parameters interactively". Also triggers on mentions of "leva", "dat.GUI", or "tweakpane".
How do I install tuning-panel?
Run npx skills add https://github.com/petekp/agent-skills --skill tuning-panel in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/tuning-panel/ (personal) or .claude/skills/tuning-panel/ (project).
Which AI agents can use tuning-panel?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is tuning-panel safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains tuning-panel?
It is published by petekp in petekp/agent-skills. It has 49 recorded installs.
More from petekp/agent-skills
typography
petekp/agent-skills
Apply professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. Use when setting type scales, choosing fonts, adjusting spacing, designing text-heavy layouts, implementing dark mode typography, or when asked about readability, font pairing, line height, measure, typographic hierarchy, variable fonts, font loading, or OpenType features.
macos-app-design
petekp/agent-skills
Open the skill to read its SKILL.md instructions.
optimize-agent-docs
petekp/agent-skills
Build a retrieval-optimized knowledge layer over agent documentation in dotfiles (.claude, .codex, .cursor, .aider). Use when asked to "optimize docs", "improve agent knowledge", "make docs more efficient", or when documentation has accumulated and retrieval feels inefficient. Generates a manifest mapping task-contexts to knowledge chunks, optimizes information density, and creates compiled artifacts for efficient agent consumption.
codebase-study-guide
petekp/agent-skills
Generate a pedagogically-grounded study guide for learning an unfamiliar codebase. Use when the user wants to onboard onto a codebase, understand a project's architecture, create learning materials for a team, or asks things like "help me learn this codebase", "create an onboarding guide", "I'm new to this project", "how does this system work", "study guide for this repo", or "explain this codebase to me". Produces a structured document that builds understanding from purpose to systems to patterns, using evidence-based learning techniques (elaborative interrogation, concept mapping, threshold concepts, worked examples, progressive disclosure).
unix-macos-engineer
petekp/agent-skills
Expert Unix and macOS systems engineer for shell scripting, system administration, command-line tools, launchd, Homebrew, networking, and low-level system tasks. Use when the user asks about Unix commands, shell scripts, macOS system configuration, process management, or troubleshooting system issues.
explainer-visuals
petekp/agent-skills
Create high-quality animated explainer visuals for essays and blog posts. Use when the user wants to visualize concepts, processes, data, or ideas with interactive web animations. Triggers on requests like "create a visual for", "animate this concept", "make an explainer", "visualize this idea", "diagram this process", "show this data", or when essay content would benefit from visual explanation. Handles abstract concepts (mental models, frameworks), technical processes (algorithms, systems), and data visualization (trends, comparisons). Outputs self-contained HTML/CSS/JS that embeds directly in web content.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available