# Dialkit

> Add DialKit floating control panel for tuning animations and visual properties. Use when the user explicitly asks for DialKit, live dials, sliders, spring controls, or runtime visual tuning.

- **Type:** Skill
- **Install:** `agentstack add skill-tommylower-cortex-dialkit`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tommylower](https://agentstack.voostack.com/s/tommylower)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tommylower](https://github.com/tommylower)
- **Source:** https://github.com/tommylower/cortex/tree/main/design/tools/dialkit

## Install

```sh
agentstack add skill-tommylower-cortex-dialkit
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# DialKit

DialKit is a development-only floating control panel for React: sliders, toggles, color pickers, and spring editors wired to live UI values.

Before editing, read the shared dev-overlay rules in `../dev-overlays.md`.

## Install

Install as dev dependencies:

```bash
bun add -d dialkit motion
```

Use the repo's existing package manager if it is not Bun.

## Setup

Create or update `src/components/DevTools.tsx`:

```tsx
"use client";

import dynamic from "next/dynamic";
import "dialkit/styles.css";

const DialRoot = dynamic(
  () => import("dialkit").then((mod) => ({ default: mod.DialRoot })),
  { ssr: false },
);

export function DevTools() {
  if (process.env.NODE_ENV !== "development") return null;
  return ;
}
```

Mount `` as a sibling of `{children}` in the app shell.

## Usage

```tsx
import { useDialKit } from "dialkit";

const params = useDialKit("Card", {
  blur: [24, 0, 100],
  opacity: [0.8, 0, 1],
  scale: 1.18,
  color: "#ff5500",
  visible: true,
  spring: {
    type: "spring",
    visualDuration: 0.3,
    bounce: 0.2,
  },
});
```

## Config Types

- `[default, min, max, step?]` -> slider
- `number` -> auto-range slider
- `boolean` -> toggle
- `"#hex"` -> color picker
- `{ type: "spring" }` -> spring curve editor
- `{ type: "action" }` -> button trigger
- `{ nested: ... }` -> collapsible folder

## Notes

- Use during polish/refinement for animation, spring, spacing, shadow, and color tuning.
- After tuning, hardcode the final values as defaults.
- Dial config can stay for future passes as long as it remains dev-only.
- Works alongside Agentation and Interface Kit in `DevTools.tsx`.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [tommylower](https://github.com/tommylower)
- **Source:** [tommylower/cortex](https://github.com/tommylower/cortex)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-tommylower-cortex-dialkit
- Seller: https://agentstack.voostack.com/s/tommylower
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.