dstack

The design stack for Claude Code.

Six skills that share one bar and one knowledge engine, plus a bundled animation and video lane. Every finding cites a practice and fixes with a number, never with a vibe.

/dstack              route anything design shaped to the right skill
/design-review       audit craft, score it, name the exact fix
/design-improve      apply the surgery, or build from intent
/design-motion       animation, transitions, scroll, gestures, video
/design-system       tokens, scales, theming, dark mode, migration
/design-ship         pre ship gate across seven checks, go or no go

The bar

If another AI, given the same prompt, would produce substantially the same output, the work failed. Correct is not the bar. Most generated interfaces are correct and still uncrafted: they render, they align, nothing clashes, and nothing was decided.

Every skill holds its work against one question: would a design lead at Linear, Vercel, Stripe, or Apple put their name on this?

The engine

624 entries across three searchable bases, ranked with BM25. Pure Python 3, no dependencies.

Base	Entries	Covers
Design practices	504	typography, color, spacing, hierarchy, buttons, forms, cards, navigation, icons, shadows, gradients, dashboards, mobile, accessibility, copy
Motion practices	80	timing, easing, choreography, feedback, scroll, page transitions, gestures, performance, reduced motion, text animation, layout animation, video pacing, Remotion, audio, delivery
Style recipes	40	dark mode, soft UI, brutalist, and other full formulas with real values

DS=~/.claude/dstack/engine/dstack.py

python3 $DS "modal feels sluggish" --motion     # motion practices
python3 $DS "card padding inconsistent"         # craft practices
python3 $DS "dark mode elevation" --styles      # style recipes
python3 $DS "contrast" --all                    # every base at once
python3 $DS --audit --motion -c performance     # checklist for one area
python3 $DS --categories --motion               # what is in there

The animation lane

design-motion owns interface motion directly: durations, curves, springs, choreography, and the performance rules. For everything past that it hands off to skills bundled with the plugin, so one install covers the whole path from script to rendered MP4.

Skill	For
awwwards-animations	GSAP, Motion, Lenis, scroll experiences, premium web animation
animated-component-libraries	Magic UI and React Bits, prebuilt animated components
apple-design	Gesture driven UI, springs, physical and interruptible motion
motion-designer	Scene by scene video specs before any code
remotion-best-practices	Implementing the spec in Remotion
remotion-render	Rendering the composition to MP4
explainer-video-guide	Script formulas, hooks, and pacing
ffmpeg	Encoding, aspect variants, asset prep

See ATTRIBUTION.md for where these came from.

Install

As a plugin

/plugin marketplace add AnimaEcho/dstack
/plugin install dstack@dstack

Locally, without the marketplace

./install.sh

That copies the skills into ~/.claude/skills/, the commands into ~/.claude/commands/, and the engine into ~/.claude/dstack/engine/. Both install paths resolve the engine automatically.

See it work

Demo: jetro.go.jp/en run through the stack — a real government homepage audited and rebuilt. Every finding measured in the live DOM.

Before	After

There is also a 45 second walkthrough, built with the stack's own video lane (Remotion, captions burned in, no audio track). Source in /video.

The review found an empty H1 (the page's only <h1> is the cookie banner title), pinch zoom disabled via user-scalable=no, 37 of 68 touch targets under 44px, all 65 transitions on the browser default ease, no reduced motion rule anywhere, and 17 unsystematic spacing values. The ship gate then caught three violations in the rebuild itself and those were fixed too.

How the skills fit together

review    finds and scores, never edits
  ↓
improve   applies the surgery with exact values
  ↓
motion    gives it life, or routes into the video lane
  ↓
system    locks the decisions into tokens so they survive
  ↓
ship      gates it before it goes out

Run one, or say "run the whole stack" and the router runs them in order.

What each skill will not do

Boundaries are the reason the reports stay readable.

• review never edits. A reviewer that patches loses the ability to tell you what was wrong.
• ship never fixes. It reports blockers and hands off.
• improve never exceeds the ask. Asked to fix a button, it fixes the button and notes the rest in one line.
• Nothing pads a report. Three real findings beat twelve where nine are filler.

Note on pixel-surgeon

dstack bundles the knowledge engine from pixel-surgeon and expands it with motion, system, and ship skills. Both define a /design-review command, so install one or the other rather than both.

License

MIT for everything original to this repo: the six core skills, the commands, the engine, and the motion practice base.

The eight bundled animation and video skills came from a local skill library and their upstream licenses have not been verified. See ATTRIBUTION.md. If you are the author of one of them and want it credited differently or removed, open an issue and I will fix it.

Cover art generated with Higgsfield.