design-engineering

design-engineering

An agent skill that encodes design engineering — the invisible details that make UI feel right. Distills Emil Kowalski (animation), Benji Taylor (delight + Agentation), Jakub Antalik (transitions), James Frewin (guidelines), Vercel (web-interface rules), Ben DC (CSS conventions), Google Labs design.md (design-token format), lucide-animated (icon animation), DiceBear (avatars), and Index (Emil Kowalski & Glenn Carstens-Peters — design vocabulary) into one navigable skill graph.

Not a tutorial. Not a doc site. A working memory the agent loads when you're reviewing UI code, picking an easing curve, designing a component, or asking "why does this feel flat?"

Install

The fastest path — one command, any agent:

npx skills add AgentsORG/design-engineering

This uses the skills.sh CLI to install into your detected agent (Claude Code, Cursor, Windsurf, Codex, Gemini, Cline, Aider, and 18+ others). The CLI prompts for scope (project vs. global) and method (symlink vs. copy).

Plugins CLI (Claude Code + Cursor + Codex)

Install the full plugin bundle — skill graph, six workflow subagents, and slash commands — in one step via vercel-labs/plugins:

npx plugins add AgentsORG/design-engineering

# Dry run — see skills, agents, and commands before installing
npx plugins discover AgentsORG/design-engineering

# List detected agent hosts on this machine
npx plugins targets

# Cursor only, skip confirmation
npx plugins add AgentsORG/design-engineering --target cursor -y

Restart your agent tools after install. Slash commands (when your host supports them) include /design-engineering:review-ui, /design-engineering:motion-audit, /design-engineering:scan-ai-tells, /design-engineering:agentation-fix, /design-engineering:apply-design-md, and /design-engineering:fork-pov.

Per-agent install

The repo also ships agent-specific plugin manifests so you can install via each agent's native plugin system:

Claude Code — uses .claude-plugin/marketplace.json + .claude-plugin/plugin.json. Skills under skills/ auto-discover.

# Add as a marketplace
/plugin marketplace add AgentsORG/design-engineering
/plugin install design-engineering

# Or test locally
claude --plugin-dir .

Codex — uses .codex-plugin/plugin.json with the full interface block (default prompts, brand color, capabilities).

codex plugin marketplace add AgentsORG/design-engineering --sparse .codex-plugin --sparse skills

Cursor — uses .cursor-plugin/plugin.json. Install via the Cursor Marketplace or sideload locally.

Settings → Plugins → Load unpacked → point at this repo root

All three manifests share the same name, version, description, author, homepage, repository, and license so plugin identity stays consistent across hosts. The Codex manifest adds interface (default prompts, brand color, capabilities); the Cursor manifest adds displayName, publisher, tags, and a $schema URL. CI lints all four manifests for valid JSON and version-parity with SKILL.md on every PR.

Recommended companions

Two tools that compound the value of this skill — install both:

# Obsidian — view + edit the skill graph in a real graph view
# https://obsidian.md → "Open folder as vault" → pick this repo

# Agentation — click-to-annotate design review in your localhost dev environment
npx skills add benjitaylor/agentation

Obsidian turns the wikilinks-and-frontmatter graph into a navigable canvas. Ctrl/Cmd + G opens the graph view; theme folders cluster naturally; you can edit any node in place and the agent picks up the change. See the View and edit in Obsidian section below.