Development

Where the design becomes a working product. By now the hard decisions are made, so development is about executing them faithfully — agentically, on top of the system I already built.

Overview

Development scaffolds the project, implements components against the tokens, and wires in the integrations (auth, data, payments — whatever the scope demands). I build with an agent in the loop, leaning on Skills and MCP servers so it starts from my conventions instead of generic defaults.

Goals

Scaffold the app and its structure once, correctly.
Implement components on the design system, not around it.
Integrate services (auth, data, etc.) cleanly behind boundaries.
Keep the codebase consistent — tokens, cn, server/client boundaries.

Activities

Scaffold the app structure and wire up the token layer.

Build components from the shadcn base, themed with Morpha tokens.

Install primitives via the Morpha CLI or the shadcn MCP as needed.

Integrate services — auth, data, payments — behind clear boundaries.

Keep an agent on-rails with the relevant Skills and MCP servers.

Tools & skills

Claude Code as the agent doing the implementation.
The Components catalog and the Morpha CLI to install them.
MCP servers — shadcn, Figma — to fetch components and read designs.
Next.js Best Practices and Frontend Design skills.
Backend & Data and Auth & Security for integrations.

Deliverables

A scaffolded app with the token layer in place.
Implemented, themed components.
Working integrations behind clean boundaries.
A consistent codebase that follows its own conventions.

How Morpha UI did it

This site is being built with Claude Code, step by step from the macro plan. The component catalog is base shadcn (radix-nova) primitives themed by the Cupido tokens; the shadcn MCP (configured in .mcp.json) lets the agent pull primitives directly. Auth is Clerk, which both gates the pro registry and authenticates the Morpha CLI — a real integration built behind a clear boundary. Each implementation step followed the Next.js Best Practices conventions for the App Router.

Checklist

App structure scaffolded and the token layer wired in.
Components built on the shadcn base and themed with tokens (no hardcoded values).
cn and server/client conventions are consistent across the codebase.
Integrations sit behind clear boundaries.
The agent is running with the right Skills and MCP servers loaded.