fec-api-integration

Standardize frontend-backend API integration with typed clients and centralized error handling.

21|3|Updated Mar 17, 2026
One-click install
npx skills add https://github.com/bovinphang/frontend-craft --skill fec-api-integration
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fec-api-integration
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-api-integration
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-api-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

设计用于前端与后端在 API 边界上的标准化与协作,帮助团队实现类型化 API client、统一错误处理、认证刷新、上传流程以及实时通信策略的一致性。

Core Features & Use Cases

  • 规范前端 API 集成边界,确保请求、错误解析、鉴权与状态管理集中化,避免直接在组件中拼接接口。
  • 提供客户端边界、错误映射、鉴权刷新策略以及上传/实时通信方案的可组合实现,支持 REST、OpenAPI、tRPC 等场景。
  • Use cases: 需要在大型前后端联调、跨域场景和多消费者 API 的前端应用。

Quick Start

设计并实现一个面向前端的类型化 API client,包含错误处理、鉴权刷新和实时通信策略的初步示例。

Frequently Asked Questions about fec-api-integration

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

FAQPage Schema
How do I standardize frontend API integration boundaries with TypeScript?

Standardize frontend API integration boundaries by building typed clients that centralize request shaping, error normalization, and authentication flows. This prevents direct API calls in components and ensures consistent client contracts across REST, OpenAPI, and tRPC services.

What is the best way to handle API error mapping and token refresh in a frontend client?

Handle API error mapping and token refresh by centralizing these strategies within a typed API client boundary. This approach normalizes backend errors and manages refresh tokens consistently, avoiding scattered authentication logic across application components.

Does this approach support both REST and tRPC for frontend backend integration?

Yes, this approach supports both REST and tRPC for frontend backend integration. It provides composable implementations for client boundaries, error mapping, and authentication refresh strategies across REST, OpenAPI, and tRPC-based services.

How do I manage real-time communication options like SSE or WebSocket in a typed API client?

Manage real-time communication options like SSE or WebSocket by defining them within the API client boundary. This standardizes real-time strategy choices alongside request shaping and error handling for a consistent integration contract.

When do I need contract tests for frontend API integration?

You need contract tests for frontend API integration when validating that client boundaries, error normalization, and token refresh strategies align with backend services. This ensures scalable error mapping and consistent authentication flows across multiple API consumers.

Can I use this for large frontend applications with cross-domain API consumers?

Yes, you can use this for large frontend applications with cross-domain API consumers. It standardizes frontend-backend collaboration, ensuring centralized state management and consistent integration boundaries across multiple consumers and complex cross-domain scenarios.