How to Build a Full Feature Across Frontend and Backend with Composer

The real payoff of Composer is shipping a feature that spans layers: a new API route, the shared types, and the UI that consumes it. Done well, all of those land as one coherent change. This guide builds a small feature, adding a favorites endpoint and the button that calls it, while keeping each layer in sync.

• A full-stack project open in Cursor
• Composer open (Cmd+I or Ctrl+I)
• The folders for your API, shared types, and components
• A clear one-line description of the feature

Ask for a plan first

For anything spanning multiple layers, ask Composer to outline the change before writing code. A plan lets you catch a wrong assumption cheaply and gives the agent a structure to follow when it edits.

I want users to favorite a post. Before editing, outline the files
you would change across the API, shared types, and the UI. Do not
write code yet.

Approve and let it implement

Once the plan looks right, tell Composer to implement it. It edits each file in the plan and shows the combined diff. Because the types are part of the change, the API and UI stay type-compatible.

import type { FavoriteRequest } from '@/types/post';

export async function addFavorite(req: FavoriteRequest) {
  return db.favorites.create({
    userId: req.userId,
    postId: req.postId,
  });
}

Review each layer separately

Step through the diff one layer at a time. Check the types match between client and server, that the endpoint is wired to the route table, and that the button calls the right function. This is where a layer-spanning change usually breaks.

Verify end to end

Result: a favorites feature implemented across types, API, client, and UI in one session, with the shared types keeping every layer consistent and the type checker confirming it.