skills.rest
HACK-WU
HACK-WUCOMMUNITY
Explore all skills by this author →
GitHub

frontend-api-guide

Generates frontend API integration guides from API design documents.

2|Updated Jun 8, 2026
Search Tags:#error handling#mermaid#api design#documentation generation#api documentation#frontend integration#call flow
One-click install
npx skills add https://github.com/HACK-WU/skills --skill frontend-api-guide-hack-wu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-api-guide
Source: https://github.com/HACK-WU/skills/tree/main/skills/frontend-api-guide
Command: npx skills add https://github.com/HACK-WU/skills --skill frontend-api-guide-hack-wu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? After API design is complete, frontend developers often receive raw API contracts without knowing when to call each endpoint, how errors should be handled, or how responses map to UI elements. This Skill converts API design and technical design documents into self-contained frontend integration guides that answer what to call, what to send, and what comes back. ## Core Features & Use Cases - API Documentation Generation: Produces per-module API docs with full contracts (parameters, responses, error codes) and optional UI field mappings. - Scenario-Driven Call Flows: Extracts user operation scenarios and generates step-by-step API call sequences with concise mermaid flowcharts. - Error Handling & FAQ: Builds error-code cheat sheets with concrete frontend behaviors and anticipates common frontend questions in Q&A form. - Use Case: After finishing API design for an order system, generate a frontend-guide directory containing INDEX.md, api/order-api.md, and flow/order-create.md so the frontend team can start coding without asking the backend when to call each endpoint. ## Quick Start Ask the AI to generate a frontend API integration guide based on the completed API design document for your feature.

Frequently Asked Questions about frontend-api-guide

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

FAQPage Schema
How do I generate API documentation for frontend developers?▼

Provide the API design document and technical design document as input, and the skill produces per-module API docs with full contracts, request/response JSON examples, and error codes. Output is organized under a frontend-guide directory with an INDEX.md overview.

How to document API call sequences for frontend integration?▼

The skill extracts user operation scenarios from design documents and generates step-by-step call sequences showing trigger timing, success paths, and failure handling. Each scenario includes a concise mermaid flowchart limited to about 10 nodes.

Does the generated documentation include frontend code examples?▼

No. The documentation deliberately excludes all frontend code such as JS, TS, React, or Vue. It only describes what to call, what to send, and what is returned, leaving implementation choices to the frontend team.

Can the guide map API responses to UI elements?▼

Yes. When a UI design draft is available, the skill creates UI mapping tables linking response fields to specific UI elements, including data formatting rules and empty-state behavior. This mapping is optional and skipped without a design draft.

What inputs are required before using this skill?▼

It requires an API design document listing endpoints, parameters, responses, and error codes, plus a technical design document with business flows and sequence diagrams. A UI design draft is optional and only used for UI mapping.

Related Skills

Explore More Software Engineering Skills→
ramybarsoumramybarsoum

api-design

Design RESTful API contracts with endpoint specs, JSON Schema, and error codes.

Community
Intermediate
NimbleBrainIncNimbleBrainInc
2

qa-tester

Design QA strategies and test cases for web, API, and mobile applications.

Official
Basic
SSiertsemaSSiertsema

sequence-diagramming

Convert described interaction flows into Mermaid sequence diagrams.

Community
Advanced
curiositechcuriositech
181

openapi-spec-writer

Generate OpenAPI 3.0/3.1 YAML or JSON specifications for REST APIs.

Official
Advanced