From productionos
Interface Craft by ProductionOS Design — a toolkit for building polished, animated interfaces in React. Includes Motion System (human-readable animation DSL with stage-driven sequencing), DialKit (live control panels for tuning animation values), and Design Evaluator (systematic UI review based on ProductionOS Design's methodology). Triggers on: animate, animation, transition, storyboard, entrance, motion, spring, easing, timing, finetune-control, sliders, controls, tune, tweak, critique, review, feedback, audit, improve, polish, refine, redesign.
npx claudepluginhub shaheerkhawaja/productionos --plugin productionosThis skill uses the workspace's default tool permissions.
**By ProductionOS Design**
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
By ProductionOS Design
A toolkit for building polished, animated interfaces. Write animations you can read like a script, then tune them with live controls.
| Parameter | Values | Default | Description |
|---|---|---|---|
target | path or context | cwd | What to operate on |
| Skill | When to Use | Invoke |
|---|---|---|
| Motion System | 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 finetune-control or mention dials/sliders/controls |
| Design Evaluator | Systematic UI critique of a screenshot, component, or page | /interface-craft critique or paste a screenshot for review |
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 motion-system.md for the full pattern spec.
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 finetune-control.md for all control types and patterns.
When the user invokes /interface-craft:
storyboard argument or animation-related context → Load and follow motion-system.mdfinetune-control argument or control-panel-related context → Load and follow finetune-control.mdcritique argument, a pasted image, or review-related context → Load and follow design-evaluator.md.map(), not copy-pasted blocks