Interface craft

Skill tommylower/cortex/design/craft/interface-craft

Public skill library, workflows, tools, and references for AI-assisted development.

Install

npx -y skills add tommylower/cortex --skill interface-craft

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

1 stars1 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

Interface Craft for polished React interfaces. Use for three branches: storyboard animation, DialKit-style live tuning, or design critique. Trigger on storyboard, dialkit, sliders, controls, tune, critique, polish, animated interface, or Josh Puckett.

SKILL.md

3.6 KB, as published. Nobody here has run it

Interface Craft

By Josh Puckett

A toolkit for building polished, animated interfaces. Write animations you can read like a script, then tune them with live controls.

Skills

Skill	When to Use	Invoke
Storyboard Animation	Writing or refactoring multi-stage animations into a human-readable DSL	`/interface-craft storyboard` or describe an animation
DialKit	Adding live control panels to tune animation/style values	`/interface-craft dialkit` or mention dials/sliders/controls
Design Critique	Systematic UI critique of a screenshot, component, or page	`/interface-craft critique` or paste a screenshot for review

Quick Start

Storyboard Animation

Turn any animation into a readable storyboard with named timing, config objects, and stage-driven sequencing:

/* ─────────────────────────────────────────────────────────
 * ANIMATION STORYBOARD
 *
 *    0ms   waiting for scroll into view
 *  300ms   card fades in, scale 0.85 → 1.0
 *  900ms   heading highlights
 * 1500ms   rows slide up (staggered 200ms)
 * ───────────────────────────────────────────────────────── */

const TIMING = {
  cardAppear:  300,   // card fades in
  heading:     900,   // heading highlights
  rows:        1500,  // rows start staggering
};

See storyboard-animation.md for the full pattern spec.

DialKit

Generate live control panels for tuning values in real time:

const params = useDialKit('Card', {
  scale: [1, 0.5, 2],
  blur: [0, 0, 100],
  spring: { type: 'spring', visualDuration: 0.3, bounce: 0.2 },
})

See dialkit.md for all control types and patterns.

Sub-Skill Routing

When the user invokes /interface-craft:

With storyboard argument or animation-related context → Load and follow storyboard-animation.md
With dialkit argument or control-panel-related context → Load and follow dialkit.md
With critique argument, a pasted image, or review-related context → Load and follow design-critique.md
With a file path → Read the file, detect whether it needs storyboard refactoring, dialkit controls, or a design critique, and apply the appropriate skill
With a plain-English description of an animation → Use storyboard-animation to write it
Ambiguous → Ask which skill to use

Design Principles

Readable over clever — Anyone should be able to scan the top of a file and understand the animation sequence without reading implementation code
Tunable by default — Every value that affects timing or appearance should be a named constant, trivially adjustable
Data-driven — Repeated elements use arrays and .map(), not copy-pasted blocks
Stage-driven — A single integer state drives the entire sequence; no scattered boolean flags
Spring-first — Prefer spring physics over duration-based easing for natural motion