Agent skills

[⏱️ ~4 min] Install the MDK Developer Skill suite so your coding agent knows MDK conventions, component props, and the page recipe

The MDK Developer Skill suite (@tetherto/mdk-skill) is how an AI coding agent learns to build with MDK. It ships procedural context in the universal Agent Skills format (SKILL.md), so any skills-aware agent (Cursor, Claude Code, and others) becomes fluent in MDK conventions as soon as the suite is installed.

Nothing here calls a network or a model. Each skill is a file the agent reads, bundled with the component registry MDK builds from its own source. Install once; the agent does the rest.

Install

From your project root:

mdk skill add                      # both Cursor and Claude Code
mdk skill add --client cursor      # .cursor/skills/
mdk skill add --client claude      # .claude/skills/
mdk skill add --dir path/to/app    # target another directory

mdk is the MDK CLI (@tetherto/mdk-cli). mdk onboard also offers the install as one of its steps.

Skills land flat: one directory per skill, each with its own SKILL.md. Agents discover them automatically; there is no rule file to wire by hand.

The five skills

Skill	Covers
`mdk`	Router: what MDK is, how the pieces fit, which skill a prompt belongs to
`mdk-worker-plugin`	Device workers: contract authoring, telemetry, commands
`mdk-gateway-plugin`	Gateway plugins: cross-worker endpoints and rollups
`mdk-ui-component`	UI pages and panels built on the React Devkit
`mdk-deployment`	`mdk.yaml`, `mdk run`, stack deployment

Each skill's description frontmatter is its routing trigger, so you state an intent in plain language and the right skill activates. Composite prompts are routed as an ordered chain by the mdk router.

Example prompt	Skill(s) it invokes
"Add a new power meter worker for our site"	`mdk-worker-plugin`
"Build a plugin that aggregates hashrate across all miners"	`mdk-gateway-plugin`
"Create a dashboard widget that shows live telemetry from a worker"	`mdk-ui-component`
"Create a UI to show <metric> for <device family>"	discover → `mdk-gateway-plugin` → `mdk-deployment` → `mdk-ui-component`
"How do I deploy the MDK stack?"	`mdk-deployment`
"What is MDK and how is it structured?"	`mdk`

What the UI skill knows

mdk-ui-component is the one that matters for dashboards. It carries two references alongside its workflow:

references/ui-registry.json: a verbatim copy of the React Devkit's generated registry, listing every agent-ready component, its exact prop names and types, its category, and its usage doc. This is what stops an agent inventing props that do not exist.
references/page-recipe.md: the composition rules a page must follow.

The registry is generated from the devkit's source on every release, never hand-written, so it cannot drift from the components you actually have.

The layer model it enforces

A page is composition only. Data comes from a Gateway route; shaping lives in a hook; visuals come from @tetherto/mdk-react-devkit.

Layer	Owns
Foundation query	`@tetherto/mdk-ui-foundation`: endpoint and fetch
Hook	`@tetherto/mdk-react-adapter`, or an app-local `use-<thing>.ts`: binds the query, shapes the payload
Page	`src/pages/<Name>.tsx`: thin glue, no fetch or shaping
Panel	`src/components/<Name>Panel.tsx`: props in, markup out
Route	`src/routes.ts`: one line

The workflow it follows

The agent picks visuals from indexes.componentsByName and indexes.componentsByCategory in the registry, copies prop names verbatim from the entry, and reads the worker's mdk-contract.json so units and labels line up (power → W, and so on).

Verify the install

Open the project in a skills-aware agent and give it one of the routing prompts above. The agent should name the skill it activated. If nothing activates, confirm the files landed:

ls .cursor/skills/    # or .claude/skills/

Both directories are gitignored by default: the suite is installed per developer, not committed.

Next steps

Build a dashboard with an agent: a full walkthrough of a real session
UI Devkit: the component library the registry describes
Install and wire the React packages: the manual path, if you would rather not use an agent
MDK repositories: source for the suite and the agent-ready contract