skills.rest
wendeus0
wendeus0COMMUNITY
Explore all skills by this author →
GitHub

frontend-backend-contract-plan

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
One-click install
npx skills add https://github.com/wendeus0/AI-dotfiles --skill frontend-backend-contract-plan
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
microsoftmicrosoft
35

feature-inventory

Catalog codebase features into structured specs with REQ-XXX IDs.

Official
Advanced
flybirdxxflybirdxx

plan-test-writer

Convert feature implementation plans into executable test cases using Gemini and Claude.

Community
Intermediate
abzhawabzhaw

juliaz-feature

Guide code placement for cross-cutting features across Juliaz Agents components.

Community
Advanced
personamanagmentlayerpersonamanagmentlayer
41

openapi-expert

Design OpenAPI/Swagger specifications and generate client/server code.

Official
Advanced