Install design-engineering
beginner·5 min·Markdown for agents
What this lesson teaches
Install the skill one way (skills.sh or the Claude Code plugin), check that it loaded, and use its menu.
Once the skill is in, one line brings up its menu. If you see this, everything worked:
There are two ways to get there. Pick one. Both install the same skill; they differ in how you call it afterwards.
Way 1: skills.sh (any agent)
is an installer that puts a skill where your agent looks for it: Claude Code, Cursor, Codex and many more. Run this in your terminal, inside your project folder:
$ npx skills add AgentsORG/design-engineeringnpx runs a tool from npm without installing it for good, so you need Node.js for this. The installer asks which agents to link the skill into; pick the one you use.
Afterwards, you call it as:
$ /design-engineeringWay 2: the Claude Code plugin
If you use Claude Code, you can install it as a instead. A plugin can bring extra helpers along with the skill, such as specialist reviewers for motion or accessibility. These two lines go inside Claude Code (after you have run claude), not in a plain terminal:
$ /plugin marketplace add AgentsORG/design-engineering$ /plugin install design-engineering@agentsorgThe first line adds the (a list of plugins someone publishes); the second installs this plugin from it. Plugins name their commands after themselves, so afterwards you call it as:
$ /design-engineering:design-engineering✕ Both ways at once
Two copies of the skill. Your agent sees two that match every design request, loads both, and may follow two slightly different versions. Confusing and wasteful.
✓ One way
One copy, one entry point. If you switch, remove the old one first: npx skills remove design-engineering, or /plugin uninstall design-engineering@agentsorg in Claude Code.
Check that it loaded
Start a fresh agent session (skills are read when a session starts, so restart after installing). Then type the entry point with nothing after it:
/design-engineering (skills.sh) or /design-engineering:design-engineering (plugin). As you type the slash, it should appear in the list of commands. Press Enter and the menu comes back.If the agent answers with a general reply about design instead of the menu, the skill did not load. Restart the session; if that does not help, run the install again and read what it prints.
The no-argument menu
The menu is your map. It lists every verb with a one-line job, and it puts the two or three that fit first: an unfinished change in your project suggests review, a .design file suggests tokens, a video file suggests film review.
| Verb | What it does |
|---|---|
review | Reviews UI code as a Before / After / Why table |
polish | For screens that work but feel unfinished |
motion | Should it move? Then the timing, easing and springs |
tells | Lists what makes a screen look AI-made, to delete |
a11y | An accessibility audit with evidence |
ship | A whole-app pass before launch |
It never runs a verb on its own. It shows the menu and waits for you to pick, or to describe the job in plain words.
Remember which way you installed. Every prompt in this course says/design-engineering; with the plugin, read it as /design-engineering:design-engineering.
Is the design-engineering skill loaded? If it is, show me its menu with no verb and tell me which two verbs fit this project right now. If it is not, tell me exactly what you see instead.
Quick check
You installed the skill with skills.sh, then also installed the Claude Code plugin. What should you do?
In the skill
The nodes your agent reads when it does this work.
- MOC — CommandsThe verbs behind the single entry `/design-engineering [verb] [target]` — one command file per job, each a whole procedure that points into the graph.
commands/MOC-commands - The skill routerWhat `/design-engineering` does first — classify the phase and the material, resolve the design contract, then hand the job to the owning node, subagent, or installed companion skill (AgentsORG design, impeccable, HyperFrames, cinetic, scenario-kinetic-film, earshot, ElevenLabs, the transitions catalog, the shadcn CLI, diagram-design, tldraw, GSAP, better-icons, Jakub Krehel's interfaces skills, fun-isometric, Stageshow, taste-skill on request). One or two owners, never five.
meta/skill-router
Connected lessons
What this lesson builds on and leads to, across every course.
