# Dialkit

> Integrate DialKit for live UI parameter and motion tuning.

- Skill: `shaunandrews/dialkit` (Agent Skill)
- Install (CLI): `npx skillmds@latest add shaunandrews/dialkit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shaunandrews/dialkit/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: shaunandrews (https://skillmd.com/u/shaunandrews)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/shaunandrews/dialkit

---


# DialKit Live Tuning

## Procedure

1. Inspect the target before installing anything.
   - Confirm the project uses React 18+, Solid 1.6+, Svelte 5.8+, or Vue 3.3+.
   - Identify its package manager, development command, styling conventions, existing debug tooling, and whether Motion is already installed.
   - Prefer an existing project tuning panel when it already provides the requested capability.
   - Complete when the framework entry point, install command, preview command, and values to tune are known.

2. Install DialKit for the target framework.
   - Add `dialkit` and its required Motion peer with the project's package manager.
   - Import `dialkit/styles.css`.
   - Mount one `DialRoot` at the application or preview root.
   - Use `dialkit` for React, `dialkit/solid` for Solid, `dialkit/svelte` for Svelte, and `dialkit/vue` for Vue.
   - Keep the default production protection. Do not enable `productionEnabled` unless the user explicitly requests a production-visible panel.
   - Complete when the development build renders one DialKit panel and the ordinary application still runs.

3. Model the design question as a small control schema.
   - Expose only values that help answer the current question.
   - Use explicit numeric ranges when the meaningful bounds are known; use bare numbers only when DialKit's inferred range is appropriate.
   - Use booleans for states, select controls for named alternatives, hex colors for color pickers, nested objects for related controls, and spring or easing controls for motion.
   - Name groups and controls in product language rather than implementation jargon.
   - Use action controls only for safe, repeatable preview actions such as replay or reset.
   - Keep application data, accounts, backend state, and production configuration outside the panel.
   - Complete when each control maps directly to a rendered property or repeatable preview state.

4. Wire controls without changing the product contract.
   - Keep DialKit registration in a clearly named development helper or adjacent preview component.
   - Apply returned values to the real rendered UI immediately.
   - Preserve the component's exports, props, data flow, accessibility semantics, responsive behavior, and reduced-motion behavior.
   - Use `id` only when multiple mounts must share one logical panel.
   - Leave persistence disabled unless the user asks for values to survive reloads; when requested, choose localStorage or sessionStorage deliberately.
   - Complete when changing every control produces the intended visible effect and removing the helper restores the original runtime path.

5. Support a useful comparison loop.
   - Add named presets only when the user needs to compare meaningful states.
   - Use DialKit's JSON copy as a handoff snapshot, not as the final source of truth.
   - For motion work, provide a repeatable trigger and tune the spring, easing, duration, and affected values together.
   - For structural alternatives with different markup or hierarchy, use a variation workflow instead of forcing the choice into continuous controls.
   - Complete when the user can compare the relevant states without editing source or reconstructing values.

6. Bake the decision into source.
   - Record the selected values.
   - Replace temporary DialKit-driven values with ordinary project constants, tokens, styles, or component defaults.
   - Remove the DialKit hook, root, style import, and dependency when the project does not intend to keep development tooling.
   - Preserve DialKit only when the user explicitly wants an ongoing development panel.
   - Complete when the chosen design works without the temporary control path.

7. Verify and hand off.
   - Run the focused typecheck, lint, tests, and build appropriate to the changed surface.
   - Confirm the production build does not expose the panel.
   - Report the preview URL, controls, selected values, files changed, whether DialKit remains installed, and any cleanup still requested.
   - Complete when the user can reproduce the tuned result from the checked source alone.

## Boundaries

Use this skill for DialKit integration or complex continuous tuning in supported JavaScript frameworks. Use a lightweight temporary panel for a few simple values or unsupported stacks. Use a variation workflow for multiple structurally different design directions.