frontend-backend-contract-plan

Name: frontend-backend-contract-plan
Availability: InStock
Author: Wendeus

Creates unified CONTRACT.md files documenting frontend-backend specifications from SPEC and code.

Updated Aug 23, 2026

Search Tags:#ui #frontend #api #backend #spec #contract

Ready to run

npx skills add https://github.com/wendeus0/AI-dotfiles --skill frontend-backend-contract-plan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-backend-contract-plan
Source: https://github.com/wendeus0/AI-dotfiles/tree/main/core/skills/frontend-backend-contract-plan
Command: npx skills add https://github.com/wendeus0/AI-dotfiles --skill frontend-backend-contract-plan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establish explicit contracts between frontend and backend before writing tests, reducing ambiguity and rework by aligning data, endpoints, and UI behavior.

Core Features & Use Cases

Extract screens and user flows from the SPEC to identify required data and interactions.
Infer endpoints, request/response shapes, and payloads for API integration.
Document UI states (loading, error, success, empty) and associated side effects to guide testing and implementation.

Quick Start

Draft a CONTRACT.md by reviewing the feature SPEC and existing code to capture screens, data, endpoints, and UI states.

Frequently Asked Questions about frontend-backend-contract-plan

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I define frontend-backend contracts before writing tests?▼

Draft explicit frontend-backend contracts by reviewing the SPEC and existing code to document screens, endpoints, payloads, and UI states in a unified CONTRACT.md file for test alignment.

What should a frontend-backend API contract specification include?▼

A frontend-backend API contract should include screens, data flows, endpoints, request/response payloads, UI states (loading, error, success, empty), and side effects to ensure alignment with backend behavior.

How do I document UI states for API integration planning?▼

Document UI states for API integration by extracting user flows from the SPEC and mapping loading, error, success, and empty states alongside associated side effects in a unified contract.

When do I need a frontend-backend contract specification?▼

You need a frontend-backend contract specification when developing features involving both UI and API work, reducing ambiguity and rework by aligning data, endpoints, and UI behavior before tests.

Can I infer API endpoints and payloads from existing code for contract planning?▼

Yes, you can infer endpoints, request/response shapes, and payloads for API integration by analyzing existing code and the feature SPEC to draft a unified CONTRACT.md.

Does writing a contract before tests reduce rework for full-stack features?▼

Writing a contract before tests reduces rework for full-stack features by establishing explicit frontend-backend alignment on data, endpoints, and UI behavior, minimizing ambiguity during implementation.