The-Utopia-Studio/interface-craft
skills/dev-workflow/interface-craft/SKILL.md
Interface Craft by Josh Puckett — a toolkit for building polished, animated interfaces in React. Includes Storyboard Animation (human-readable animation DSL with stage-driven sequencing), DialKit (live control panels for tuning animation values), and Design Critique (systematic UI review based on Josh Puckett's methodology). Triggers on: animate, animation, transition, storyboard, entrance, motion, spring, easing, timing, dialkit, sliders, controls, tune, tweak, critique, review, feedback, audit, improve, polish, refine, redesign.
$ install --global
skillsauthnpx skillsauth add The-Utopia-Studio/skills interface-craftInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 3:12 AM135.4s5 files scanned
SKILL.md
- name:
- interface-craft
- description:
- Interface Craft by Josh Puckett — a toolkit for building polished, animated interfaces in React. Includes Storyboard Animation (human-readable animation DSL with stage-driven sequencing), DialKit (live control panels for tuning animation values), and Design Critique (systematic UI review based on Josh Puckett's methodology). Triggers on: animate, animation, transition, storyboard, entrance, motion, spring, easing, timing, dialkit, sliders, controls, tune, tweak, critique, review, feedback, audit, improve, polish, refine, redesign.
- argument-hint:
- [description, file path, or sub-skill name]
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
storyboardargument or animation-related context → Load and follow storyboard-animation.md - With
dialkitargument or control-panel-related context → Load and follow dialkit.md - With
critiqueargument, 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
Related Skills
The-Utopia-Studio/industrial-brutalist-ui
data-ai
VerifiedTrustedCommunity
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
4SKILL.mdUpdated Jul 18, 2026
The-Utopia-Studio/high-end-visual-design
development
VerifiedTrustedCommunity
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
4SKILL.mdUpdated Jul 18, 2026
The-Utopia-Studio/full-output-enforcement
development
VerifiedTrustedCommunity
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
4SKILL.mdUpdated Jul 18, 2026
The-Utopia-Studio/design-taste-frontend
development
VerifiedTrustedCommunity
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
4SKILL.mdUpdated Jul 18, 2026