Main Site ↗

api-integration

by MadAppGang24819GitHub

A comprehensive guide for integrating OpenAPI specifications with React apps using MCP, featuring excellent type safety, query layer patterns, and practical implementation details.

Unlock Deep Analysis

Use AI to visualize the workflow and generate a realistic output preview for this skill.

Powered by Fastest LLM

Target Audience

Frontend developers working with React and TypeScript who need to integrate with REST APIs using OpenAPI specifications

10/10Security

Low security risk, safe to use

9
Clarity
9
Practicality
8
Quality
8
Maintainability
8
Innovation
Frontend
api-integrationopenapitypescriptreactmcp
Compatible Agents
Claude Code
Claude Code
~/.claude/skills/
Codex CLI
Codex CLI
~/.codex/skills/
Gemini CLI
Gemini CLI
~/.gemini/skills/
O
OpenCode
~/.opencode/skills/
O
OpenClaw
~/.openclaw/skills/
GitHub Copilot
GitHub Copilot
~/.copilot/skills/
Cursor
Cursor
~/.cursor/skills/
W
Windsurf
~/.codeium/windsurf/skills/
C
Cline
~/.cline/skills/
R
Roo Code
~/.roo/skills/
K
Kiro
~/.kiro/skills/
J
Junie
~/.junie/skills/
A
Augment Code
~/.augment/skills/
W
Warp
~/.warp/skills/
G
Goose
~/.config/goose/skills/
SKILL.md

🔌 api-integration - API 集成技能

Slogan: 连接世界,集成万物


📋 技能描述

提供完整的 API 集成能力,从 RESTful 到 GraphQL, 帮助 AI Agent 快速接入第三方服务,扩展能力边界。


🎯 核心知识

1. RESTful API

HTTP 方法:
- GET - 获取资源
- POST - 创建资源
- PUT - 更新资源
- DELETE - 删除资源

状态码:
- 200 - 成功
- 201 - 创建成功
- 400 - 请求错误
- 401 - 未授权
- 404 - 资源不存在
- 500 - 服务器错误

2. 认证方式

方式说明安全性
API Key简单密钥
OAuth2授权框架
JWTToken 认证
Basic Auth基础认证

3. GraphQL

特点:
- 按需查询
- 强类型
- 单一端点
- 实时订阅

🛠️ 应用能力

能力 1:RESTful 调用

import requests

def call_api(endpoint, method='GET', data=None, headers=None):
    response = requests.request(
        method=method,
        url=endpoint,
        json=data,
        headers=headers
    )
    response.raise_for_status()
    return response.json()

能力 2:认证管理

# OAuth2 认证
def get_oauth_token(client_id, client_secret):
    response = requests.post(
        'https://api.example.com/oauth/token',
        data={
            'grant_type': 'client_credentials',
            'client_id': client_id,
            'client_secret': client_secret
        }
    )
    return response.json()['access_token']

能力 3:错误处理

def safe_api_call(endpoint):
    try:
        return call_api(endpoint)
    except requests.exceptions.HTTPError as e:
        if e.response.status_code == 404:
            return {'error': 'Resource not found'}
        elif e.response.status_code == 401:
            return {'error': 'Unauthorized'}
        else:
            return {'error': str(e)}

💚 滚滚的话

好的 API 集成, 稳定、安全、高效。

滚滚陪你一起, 连接更多服务! 🔌💚


创建人: 滚滚 & 地球人
创建时间: 2026-03-15
状态: ✅ 学习完成

Source: https://github.com/MadAppGang/claude-code#plugins~frontend~skills~api-integration

Content curated from original sources, copyright belongs to authors

Grade A
8.3AI Score
Best Practices
Checking...
Try this Skill

User Rating

USER RATING

0UP
0DOWN
Loading files...

WORKS WITH

Claude Code
Claude
Codex CLI
Codex
Gemini CLI
Gemini
O
OpenCode
O
OpenClaw
GitHub Copilot
Copilot
Cursor
Cursor
W
Windsurf
C
Cline
R
Roo
K
Kiro
J
Junie
A
Augment
W
Warp
G
Goose