skills.rest
ChenyCHENYU
ChenyCHENYUCOMMUNITY
Explore all skills by this author →
Website𝕏@CHENY_ychenyGitHub

api-contract

Generates machine-validated API contracts and per-page api.md files for frontend-backend alignment.

5|1|Updated Apr 8, 2026
Search Tags:#openapi#interface design#vue 3#api contract#contract validation#api.md#frontend backend alignment
One-click install
npx skills add https://github.com/ChenyCHENYU/wl-skills-kit --skill api-contract-chenychenyu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: api-contract
Source: https://github.com/ChenyCHENYU/wl-skills-kit/tree/main/files/.wl-skills/skills/core/api-contract
Command: npx skills add https://github.com/ChenyCHENYU/wl-skills-kit --skill api-contract-chenychenyu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend and backend teams often diverge on URL naming, field names, response envelopes, and pagination conventions, causing integration bugs discovered only during joint debugging. This Skill establishes a single machine-checkable wl-api-contract.json contract and renders a per-page api.md so both sides code against the same verified interface definition. ## Core Features & Use Cases - Contract lifecycle commands: Preview, validate, compare, and render contracts via wl-skills contract init/validate/compare/render, with strict mode for frontend-backend handshake. - Standardized conventions: Enforces URL patterns (/service/resource/action), standard CRUD operations, business action naming (submit/approve/release), and the real response envelope { code, message, data } with success code 2000. - Dictionary contract integration: Embeds machine-parseable dict-contract blocks in api.md and syncs them into module-level dicts.ts for D1 validation. - Use Case: After scanning prototypes into a page inventory, generate api.md files for seven customer-management pages, send them to the backend for review, run strict contract compare, and only then generate data.ts API_CONFIG code. ## Quick Start Ask the AI to generate api.md interface contracts for all pages listed in your prototype scan report using the mmwr service prefix.

Frequently Asked Questions about api-contract

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

FAQPage Schema
How do I create an API contract between frontend and backend before coding?▼

Run wl-skills contract init with a contract-id, service prefix, resource name, and permission prefix to preview the contract, then confirm to write wl-api-contract.json. Validate it with --strict and render per-page api.md files for team review.

How to verify frontend and backend API contracts match?▼

Use wl-skills contract compare --left frontend.json --right backend.json --strict to check resources, transport, operations, models, API_CONFIG, and completion status. Both sides must pass strict comparison before the contract is marked confirmed.

What response structure does the backend use in this contract?▼

The envelope is { code, message, data } with success code 2000, not 200 and not a result field. Paginated responses return data.records and data.total, and the request interceptor strips the envelope so business code receives data directly.

Can I generate api.md without a backend contract or design docs?▼

Yes, the Skill runs standalone with only requirement documents. All inferred fields and operations must be recorded in openQuestions and the contract stays in draft status until confirmed, so unverified assumptions never become production inputs.

Why does my mock data fail with code is not 2000 errors?▼

The interceptor rejects any response whose code is not 2000, so mocks returning 200 fail immediately. Update mock responses to use code 2000 with the { code, message, data } envelope.

Where should api.md files be placed in the project?▼

Each api.md lives in its page directory alongside index.vue, so pull request reviews show exactly which page contract changed. Pages using business dictionaries must also update the module-level dicts.ts for D1 validation.

Related Skills

Explore More Software Engineering Skills→
stellaronestellarone

pdf

Extract text and structure from PDFs, fill forms, and annotate documents.

Official
Advanced
certdcertd
5.0k

fast-crud-page-dev

Implements Certd admin CRUD list pages using Fast Crud with Vue 3 and Ant Design Vue.

Official
Intermediate
mshaheerzmshaheerz
1

cloudflare

Manage Cloudflare infrastructure resources like Workers, KV, R2, and D1.

Community
Advanced
jon23djon23d
3

openapi-codegen

Generate type-safe API clients from OpenAPI specifications using openapi-typescript and openapi-fetch.

Community
Advanced