Help us improve
Share bugs, ideas, or general feedback.
From frontend-craft
Guides frontend-to-backend API integration: typed clients, auth refresh, error mapping, upload flows, SSE/WebSocket/polling, and cross-boundary loading/error states.
npx claudepluginhub bovinphang/frontend-craft --plugin frontend-craftHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-craft:fec-api-integrationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
适用于前端与后端边界的类型、错误、鉴权、上传、实时通信和用户状态设计。需要具体代码模式时加载 [integration-patterns.md](references/integration-patterns.md)。
Integrates backend APIs with frontend apps using type-safe patterns: tRPC for E2E type safety, OpenAPI codegen (openapi-typescript, orval), TanStack Query/SWR for data fetching, optimistic updates, error handling.
Implements frontend UI screens with design system components, state management, centralized API clients, and error handling for backend integration. Triggers on UI integration or API client needs.
Enforces workflow for full-stack apps: requirements, architecture decisions, scaffolding checklists, patterns for API integration, auth, error handling, real-time (SSE/WebSocket) across Node/React/Next.js, Python, Go.
Share bugs, ideas, or general feedback.
适用于前端与后端边界的类型、错误、鉴权、上传、实时通信和用户状态设计。需要具体代码模式时加载 integration-patterns.md。
规范前端 API 集成边界,让请求、错误、鉴权和实时数据可维护。
明确接口所有权
fetch、URL、header、错误解析和 token 逻辑。建立客户端边界
映射用户可理解的错误
管理接口演进
处理鉴权刷新
选择上传与实时方案
验证集成质量
输出应包含 API client 边界、接口类型来源、错误映射、鉴权刷新策略、上传/实时方案和验证结果。完成后组件不散落请求细节,用户状态完整,失败场景可恢复,客户端不会泄露服务端密钥。