Dialkit

Skill sarveshsea/design-skills/skills/dialkit

Practical design judgment for AI coding agents: 78 installable skills for craft, research, generation, Figma, and Memoire.

Install

npx -y skills add sarveshsea/design-skills --skill dialkit

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Add or review DialKit controls when a React, Solid, Svelte, or Vue interface needs live tuning of animation, layout, color, typography, or component parameters.

SKILL.md

1.9 KB, as published. Nobody here has run it

Use DialKit

Use DialKit to expose high-leverage design parameters while developing an interface. Treat the panel as a temporary tuning surface unless the product explicitly needs end-user controls.

Setup

Confirm the framework and current DialKit package API from the official repository.
Install the documented peer dependencies for the current version.
Mount one root panel at the application shell.
Wrap related controls in a focused hook with a stable panel name.
Give numeric controls deliberate defaults, bounds, and steps.
Use stable IDs and persistence only when values must survive remounts or navigation.

import { useDialKit } from "dialkit";

export function useCardDials() {
  return useDialKit("Card", {
    radius: [16, 0, 48, 1],
    scale: [1, 0.9, 1.1, 0.01],
    shadow: true,
  });
}

Tuning protocol

Start from the product's existing tokens, not arbitrary extremes.
Change one perceptual dimension at a time.
Exercise realistic content, responsive widths, pointer and keyboard input, and reduced motion.
Record the chosen values in the design tokens or component API.
Remove unused panels and controls before production unless they are intentional tooling.

Guardrails

Do not expose secrets, personal data, or privileged actions through a tuning panel.
Do not let persisted experimental values silently override production defaults.
Do not use live controls as a substitute for accessibility and interaction tests.
Do not copy Interface Craft's paid curriculum into project documentation. Link to it as an external learning resource.

This workflow is an original adaptation of Josh Puckett's MIT-licensed DialKit documentation and codebase.