frontend-from-backend

Frontend From Backend Skill

Version: 1.0 Author: Tres Pies Design Purpose: Write high-quality frontend specifications that are deeply integrated with an existing backend, ensuring seamless development and preventing 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 prevent entire classes of integration problems. What we design is not just beautiful, but buildable.

---

II. When to Use This Skill

• When planning a new frontend feature that interacts with an existing backend
• When writing specifications for a UI redesign with a backend component
• When commissioning frontend work to an autonomous implementation agent
• When you feel a disconnect between the frontend vision and the backend reality
• At the beginning of any major frontend development cycle

---

III. The 5-Step Workflow

Step 1: Deep Backend Analysis

Goal: Achieve comprehensive understanding of the existing backend architecture.

1. Read key backend files: Entry point, route registration, handlers, middleware
2. Document APIs: Map all relevant endpoints with methods, auth requirements, request bodies, success/error responses
3. Identify data models: Understand the shapes of data the backend returns
4. Map integration points: For each frontend feature area, identify the specific backend endpoint it will consume

Output: A Backend Integration Map (table format).

Backend Integration Map Template:

Feature Area	Endpoint	Method	Auth	Request Body	Success Response	Error Response
User List	/api/v1/users	GET	Bearer	-	{ users: User[] }	{ error: string }
Create User	/api/v1/users	POST	Bearer	{ name: string }	{ id: string }	{ error: string, code: number }