Adds a DialKit floating control panel for tuning React animations and visual properties at runtime.
npx skills add https://github.com/tommylower/cortex --skill dialkit-tommylower
Please help me install this Agent Skill. Skill: dialkit Source: https://github.com/tommylower/cortex/tree/main/design/tools/dialkit Command: npx skills add https://github.com/tommylower/cortex --skill dialkit-tommylower
useDialKit with config types like sliders, toggles, color pickers, spring and easing editors, plus a scrubbable timeline via dialkit/timeline. - Token-scoped dials: Rebinds CSS custom properties on a component root via data-dial attributes so tuning one component does not repaint the whole site in token-driven codebases. - Use Case: While polishing a card component, dial its blur, opacity, spring bounce, and spacing live in the browser, then hardcode the final values as defaults. ## Quick Start Set up DialKit in my Next.js app so I can tune this component's spring animation and spacing with a floating dev panel.High-intent search queries and answers about installing and using this skill.
Install dialkit and motion as dev dependencies, render DialRoot in a dynamically imported client component, and call useDialKit with a config object. Sliders, toggles, color pickers, and spring editors then update the component's values live in the browser.
Split the panel into two files: one client component importing dialkit/styles.css and DialRoot, and a guard component using next/dynamic with ssr false plus a NODE_ENV development check. The static CSS import must live behind the dynamic import since a NODE_ENV guard alone does not remove it.
Yes. DialKit provides createDialKit from dialkit/solid and dialkit/svelte, useDialKit from dialkit/vue, and a framework-free build at dialkit/vanilla. The React entry requires the motion peer dependency at version 11.0.0 or higher.
Stamp the component root with a data-dial attribute and write a style element rebinding its CSS custom properties, like [data-dial="path-card"] { --space-inset: 2rem }. Custom properties inherit, so only that subtree repaints instead of the whole site.
A tokens-only gate scans files for raw hex literals, and a free color picker dial introduces one. Prefer a role swap like --color-sand: var(--color-slate-light), keep color dials out of gated files, or grandfather the file.
A descendant reading the same CSS variable moves with its parent, and two uses of one role inside a single component cannot be separated since they share the variable. Separating those requires a real component prop instead of token rebinding.
portalshqBuild design systems with tokens, theming infrastructure, and component architecture patterns.
ElvinOuyangApply a structured polish pass to iOS/SwiftUI views for HIG compliance.
NealSTGenerate annotated screenshot documentation for web applications by injecting SVG overlays onto UI elements.
Marshal-NguyenAuthor Lottie JSON animations that render in a Skia Skottie player.