frontend-from-backend

name	frontend-from-backend
model	opus
description	Produces a backend-grounded frontend specification document covering API contracts, integration guide, auth flows, and updated track prompts. Use when 'spec the frontend for this API', 'write frontend spec from backend', or 'ground the UI in this existing backend'.
category	specification-driven-development
triggers	["spec the frontend for this API","write frontend spec from backend","ground the UI in this existing backend"]
tier	1
agents	["primary"]
tool_dependencies	["file_system"]
inputs	[{"name":"backend_spec","type":"string","description":"Path or content of the backend API specification or code to derive from","required":true}]
outputs	[{"name":"frontend_spec","type":"ref","format":"cas-ref","description":"Backend-grounded frontend specification document covering API contracts, integration guide, auth flows, and track prompts"}]

Write Frontend Spec From Backend Skill

Version: 1.0 Created: 2026-02-07 Author: Manus AI Purpose: To provide a structured, repeatable process for writing high-quality frontend specifications that are deeply integrated with an existing backend, ensuring seamless development and reducing integration friction.

---

I. The Philosophy: Grounding Before Building

Frontend development in a full-stack application does not happen in a vacuum. The most common source of bugs, delays, and rework is a disconnect between the frontend implementation and the backend reality. This skill is built on a simple but powerful principle: grounding before building.

By deeply understanding the existing backend architecture, APIs, and data models before writing a single line of frontend specification, we can prevent entire classes of integration problems. This process transforms specification writing from a creative exercise into a disciplined engineering practice, ensuring that what we design is not just beautiful, but buildable.

---

II. When to Use This Skill

• When planning a new frontend feature that will interact with an existing backend.
• When writing specifications for a UI redesign of a feature that has a backend component.
• When commissioning frontend work to an autonomous agent like Claude Code, Zenflow, or other implementation agents.
• When you feel a disconnect between the frontend vision and the backend reality.
• At the beginning of any major frontend development cycle.

---

III. The Workflow

This workflow is a 5-step process that takes you from a high-level feature idea to a production-ready, backend-grounded specification.

Step 1: Deep Backend Analysis

Goal: Achieve a comprehensive understanding of the existing backend architecture.

1. Run /repo-context-sync: Generate a comprehensive context map of the repository.
2. Read Key Backend Files:
   • main.go (or equivalent): Understand route registration and server setup.
   • handlers/: Read the handlers for the relevant feature areas.
   • middleware/: Understand the authentication and request lifecycle.
3. Document APIs: Map all relevant API endpoints, including methods, authentication requirements, request bodies, and success/error responses.