skills.rest
longdang193
longdang193COMMUNITY
Explore all skills by this author →
GitHub

skill-full-stack-integration

Implements frontend-to-backend vertical slices with contract reconciliation and end-to-end verification.

Updated Apr 9, 2026
Search Tags:#full-stack#integration#openapi#verification#frontend-backend#API contract#typed client
One-click install
npx skills add https://github.com/longdang193/project-OS-starter --skill skill-full-stack-integration-longdang193
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: skill-full-stack-integration
Source: https://github.com/longdang193/project-OS-starter/tree/main/generated_agents/claude/skills/skill-full-stack-integration
Command: npx skills add https://github.com/longdang193/project-OS-starter --skill skill-full-stack-integration-longdang193

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend features that cross backend API boundaries often drift out of sync with their contracts, causing mismatched routes, untyped clients, and unverified behavior. This Skill reconciles frontend behavior against canonical API contracts and produces evidence-backed, end-to-end verified vertical slices. ## Core Features & Use Cases - Contract Reconciliation: Aligns frontend queries and mutations with the canonical contract owner (e.g., openapi.yaml) and reports exact mismatches before implementation. - Typed Client Wiring: Reuses existing client generation commands to keep frontend data access typed and consistent with backend routes. - End-to-End Verification: Runs direct backend boundary, failure, state, and authorization checks plus focused frontend and browser-interaction evidence before acceptance. - Use Case: When adding a user profile card that calls getUserProfile, use this Skill to map loading, 403, and 404 states to the OpenAPI operation, implement the smallest backend route change, and verify the full flow against the contract. ## Quick Start Use the full-stack integration skill to wire the UserProfileCard component to the getUserProfile API and verify the complete flow against the OpenAPI contract.

Frequently Asked Questions about skill-full-stack-integration

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

FAQPage Schema
How do I integrate a frontend component with a backend API contract?▼

Read the canonical contract owner such as openapi.yaml, implement the smallest backend route or service change, regenerate the typed client, and map UI states to the operation. Then verify with direct backend boundary and frontend checks before accepting the slice.

How to handle frontend and backend contract mismatches?▼

Report the exact mismatch and affected owners, present viable options, and ask the user to decide before implementation. After approval, update all affected owners together so specifications, schemas, clients, routes, and tests stay consistent.

What is an integration sidecar file in full-stack development?▼

A sidecar is a temporary colocated *.integration.md file mapping a contract operation to UI states like loading, 403, and 404. It never replaces specifications or schemas and is removed once all acceptance evidence passes.

Does browser testing replace committed backend tests?▼

No. Browser-interaction evidence covers repeatable user flows and accessibility states, but it does not replace committed tests. Direct backend boundary, failure, state, and authorization checks must pass before consumer proof is accepted.

When should consumer-driven contract testing be used?▼

Use consumer-driven compatibility evidence when the consumer is frontend and independently evolving consumer/provider compatibility risk is material. Invoke it only after direct backend proof has been established.

Related Skills

Explore More Software Engineering Skills→
mirzadhammirzadham

contract-first

Coordinate API and event schema changes through one authoritative machine-checkable contract artifact.

Community
Intermediate
h4v1dh4v1d

verification-before-completion

Enforce fresh verification evidence before reporting completion claims.

Community
Advanced
ddnet-repoddnet-repo
1

bfd

Enforces Boundary-First Development rules during architecture, coding, and code review work.

Official
Advanced
vndeevndee
3

api-contract

Define and align API contracts between frontend and backend teams.

Community
Advanced