Add live UI tuning controls with the Claude Code expose-tunable-knob skill
Expose an adjustable value for spacing, color, or timing so a person can compare results in the running interface.
中文Install in Claude Code
Claude Code and a locally previewable page or prototype.
- Open the pinned GitHub source below and retrieve the `agent-patterns-plugin/skills/expose-tunable-knob/` directory from that revision.
- Copy it into `.claude/skills/expose-tunable-knob/` in your project, keeping `SKILL.md` and its companion files together.
- Open Claude Code in the project root and enter `/expose-tunable-knob` followed by the example task.
Example task
Start with a card list using a fixed 16px gap. Add an 8–32px range control with a 16px default. Show the current value as it updates the CSS gap.What to check
Moving the slider changes spacing immediately. The default matches the original layout, and both range limits can be checked in a browser.
Original SKILL.md on GitHub · Updated
Frequently asked question
Which values are good candidates for live controls?
Choose continuous settings that depend on human judgment, such as spacing or animation duration. Use tests for values with a known correct result.