Skip to content
Dev MCP

Build Commands

All commands are generic — they adapt to whichever platform agent is active. The same build command creates Liquid snippets when theme-developer is active and React components when hydrogen-developer is active.

Issue commands in natural language. There is no need to type run_command("..."):

Run setup from Dev MCP

After setup, use short names:

"design-system"
"build the hero section from Figma node 123:456"
"refine"
"commit"

setup

Section titled “setup”

Run once at new or existing project start, before any other command.

  • Detects the project type using the active agent’s detection rules
  • Scaffolds the project using the agent’s platform CLI (e.g., shopify theme init, shopify hydrogen init)
  • Creates .claude/settings.json, .mcp.json, INSTRUCTIONS.md, CONVENTIONS.md, package.json, .gitignore
  • Platform-specific configuration files (per the active agent)
  • GitHub Actions CI/CD pipeline (optional)
  • Entire.io session tracking (optional)
  • Saves the agent name to project memory for future sessions
  • Initial git commit

Example:

Run setup from Dev MCP

upgrade

Section titled “upgrade”

Checks project health and brings configuration up to current standards. Non-destructive — project code is never modified.

Health checks (Phase 1):

  • Project memory configuration (x-project-id header)
  • Engineer identity detection
  • Server URL validation
  • .mcp.json structure and entries

Migrations (Phases 2-5):

  • Package manager migration (npm to pnpm)
  • Removing stale MCP server entries
  • Creating .claude/settings.json with attribution disabled

If all checks pass and no migrations are needed, reports “all good.”

design-system

Section titled “design-system”

Extracts tokens, icons, and logos from Figma into the project’s token system.

Requires: Figma frame URLs for colours, typography, spacing, icons, and logos.

Outputs to: The token file specified by the active agent (e.g., assets/tokens.css for themes, app/styles/tokens.css for Hydrogen), SVG exports, base typography stylesheet, and updates CONVENTIONS.md.

Phase 8 generates custom Figma MCP rules so subsequent get_design_context calls return code aligned with your project’s conventions.

build

Section titled “build”

Builds components from Figma designs, a live site URL, screenshots, or written specs. Follows bottom-up composition from existing primitives using the active agent’s component taxonomy and build order.

Design reference types:

  • Figma — extracts specs via Figma MCP tools
  • Live site — Playwright DOM inspection + reference screenshots at 375px, 768px, and 1440px
  • User-provided — screenshots or written specs directly

Examples:

build the hero section from Figma [figma MCP link]
build a ProductCard component
build the hero section from https://example-store.com

Execution phases:

  1. Context gathering — loads conventions, inventories existing components, extracts design reference
  2. Composition plan — determines build type from the agent’s taxonomy, lists dependencies, presents plan for approval
  3. Build dependencies — creates missing primitives bottom-up per the agent’s build order
  4. Build target — follows the agent’s component creation rules
  5. Translations — updates locale files per the agent’s translation rules
  6. Visual QA — Playwright screenshot comparison vs reference
  7. Validation — runs the agent’s validation command and pre-flight checklist

refine

Section titled “refine”

Visual QA of existing components against design references. Identifies discrepancies and fixes them following the active agent’s fix cascade order.

refine

Presents a discrepancy audit grouped by severity (Critical, Major, Minor) with affected files and suggested fixes. The user decides which items to address.

commit

Section titled “commit”

Creates a standardised git commit following Conventional Commits. Reviews changes, determines the correct type and scope, drafts the message, and presents for approval.

Automatically suggested after commands that produce file changes.

commit