Skip to content
Development
Skill

/implementing-api-patterns

API design and implementation across REST, GraphQL, gRPC, and tRPC patterns. Use when building backend services, public APIs, or service-to-service communication. Covers REST frameworks (FastAPI, Axum, Gin, Hono), GraphQL libraries (Strawberry, async-graphql, gqlgen, Pothos),

From plugin
ai-design-components
52676 skills

Claude Code

$ npx -y skills add ancoleman/ai-design-components --skill implementing-api-patterns --agent claude-code

SKILL.md

implementing-api-patterns.SKILL.md
name: implementing-api-patterns
description: API design and implementation across REST, GraphQL, gRPC, and tRPC patterns. Use when building backend services, public APIs, or service-to-service communication. Covers REST frameworks (FastAPI, Axum, Gin, Hono), GraphQL libraries (Strawberry, async-graphql, gqlgen, Pothos), gRPC (Tonic, Connect-Go), tRPC for TypeScript, pagination strategies (cursor-based, offset-based), rate limiting, caching, versioning, and OpenAPI documentation generation. Includes frontend integration patterns for forms, tables, dashboards, and ai-chat skills.

API Patterns Skill

Purpose

Design and implement APIs using the optimal pattern and framework for the use case. Choose between REST, GraphQL, gRPC, and tRPC based on API consumers, performance requirements, and type safety needs.

When to Use This Skill

Use when:

  • Building backend APIs for web, mobile, or service consumers
  • Connecting frontend components (forms, tables, dashboards) to databases
  • Implementing pagination, rate limiting, or caching strategies
  • Generating OpenAPI documentation automatically
  • Choosing between REST, GraphQL, gRPC, or tRPC patterns
  • Integrating authentication and authorization
  • Optimizing API performance and scalability

Quick Decision Framework

WHO CONSUMES YOUR API?
├─ PUBLIC/THIRD-PARTY DEVELOPERS → REST with OpenAPI
│  ├─ Python → FastAPI (auto-docs, 40k req/s)
│  ├─ TypeScript → Hono (edge-first, 50k req/s, 14KB)
│  ├─ Rust → Axum (140k req/s, <1ms latency)
│  └─ Go → Gin (100k+ req/s, mature ecosystem)
│
├─ FRONTEND TEAM (same org)
│  ├─ TypeScript full-stack? → tRPC (E2E type safety)
│  └─ Complex data needs? → GraphQL
│      ├─ Python → Strawberry
│      ├─ Rust → async-graphql
│      ├─ Go → gqlgen
│      └─ TypeScript → Pothos
│
├─ SERVICE-TO-SERVICE (microservices)
│  └─ High performance → gRPC
│      ├─ Rust → Tonic
│      ├─ Go → Connect-Go (browser-friendly)
│      └─ Python → grpcio
│
└─ MOBILE APPS
   ├─ Bandwidth constrained → GraphQL (request only needed fields)
   └─ Simple CRUD → REST (standard, well-understood)

REST Framework Selection

Python: FastAPI (Recommended)

**Key Features:** Auto OpenAPI docs, Pydantic v2 validation, async/await, 40k req/s

**Basic Example:**

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Item(BaseModel):
    name: str
    price: float

@app.post("/items")
async def create_item(item: Item):
    return {"id": 1, **item.dict()}

See `references/rest-design-principles.md` for FastAPI patterns and `examples/python-fastapi/`.

TypeScript: Hono (Edge-First)

**Key Features:** 14KB bundle, runs on any runtime (Node/Deno/Bun/edge), Zod validation, 50k req/s

**Basic Example:**

import { Hono } from 'hono'
import { zValidator } from '@hono/zod-validator'
import { z } from 'zod'

const app = new Hono()
app.post('/items', zValidator('json', z.object({
  name: z.string(), price: z.number()
})), (c) => c.json({ id: 1, ...c.req.valid('json') }))

See `references/rest-design-principles.md` for Hono patterns and `examples/typescript-hono/`.

TypeScript: tRPC (Full-Stack Type Safety)

**Key Features:** Zero codegen, E2E type safety, React Query integration, WebSocket subscriptions

**Basic Example:**

import { initTRPC } from '@trpc/server'
import { z } from 'zod'

const t = initTRPC.create()
export const appRouter = t.router({
  createItem: t.procedure
    .input(z.object({ name: z.string(), price: z.number() }))
    .mutation(({ input }) => ({ id: '1', ...input }))
})
export type AppRouter = typeof appRouter

See `references/trpc-setup-guide.md` for setup patterns and `examples/typescript-trpc/`.

Rust: Axum (High Performance)

**Key Features:** Tower middleware, type-safe extractors, 140k req/s, compile-time verification

**Basic Example:**

use axum::{routing::post, Json, Router};
use serde::{Deserialize, Serialize};

#[derive(Deserialize)]
struct CreateItem { name: String, price: f64 }

#[derive(Serialize)]
struct Item { id: u64, name: String, price: f64 }

async fn create_item(Json(payload): Json<CreateItem>) -> Json<Item> {
    Json(Item { id: 1, name: payload.name, price: payload.price })
}

See `references/rest-design-principles.md` for Axum patterns and `examples/rust-axum/`.

Go: Gin (Mature Ecosystem)

**Key Features:** Largest Go ecosystem, 100k+ req/s, struct tag validation

**Basic Example:**

type Item struct {
    Name  string  `json:"name" binding:"required"`
    Price float64 `json:"price" binding:"required,gt=0"`
}

r := gin.Default()
r.POST("/items", func(c *gin.Context) {
    var item Item
    if c.ShouldBindJSON(&item); err != nil {
        c.JSON(400, gin.H{"error": err.Error()}); return
    }
    c.JSON(201, item)
})

See `references/rest-design-principles.md` for Gin patterns and `examples/go-gin/`.

Performance Benchmarks

| Language | Framework | Req/s | Latency | Cold Start | Memory | Best For | |----------|-----------|-------|---------|------------|--------|----------| | Rust | Actix-web | ~150k | <1ms | N/A | 2-5MB | Maximum throughput | | Rust | Axum | ~140k | <1ms | N/A | 2-5MB | Ergonomics + performance | | Go | Gin | ~100k+ | 1-2ms | N/A | 5-10MB | Mature ecosystem | | TypeScript | Hono | ~50k | <5ms | <5ms | 128MB | Edge deployment | | Python | FastAPI | ~40k | 5-10ms | 1-2s | 30-50MB | Developer experience | | TypeScript | Express | ~15k | 10-20ms | 1-3s | 50-100MB | Legacy systems |

**Notes:**

  • Benchmarks assume single-core, JSON responses
  • Actual performance varies with workload complexity
  • Cold start only applies to serverless/edge deployments

Pagination Strategies

Cursor-Based (Recommended)

**Advantages:** Handles real-time changes, no skipped/duplicate records, scales to billions

**FastAPI Example:**

@app.get("/items")
async def list_items(cursor: Optional[str] = None, limit: int = 20):
    query = db.query(Item).filter(Item.
Read more
@ancoleman
Ships withai-design-components

Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude

Stars on GitHub

Momentum

stars in total
526
Star history of ancoleman/ai-design-components on GitHub, a chart by star-history.com

Other skills on ai-design-components.

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about implementing-api-patterns.

Which coding agents can use implementing-api-patterns?
implementing-api-patterns installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.