This skill should be used when the user is writing API documentation, designing developer onboarding, building interactive API explorers, generating SDKs, creating code examples, setting up sandbox environments, implementing API changelogs, or optimizing time-to-first-API-call. Covers three-panel docs layout, interactive try-it functionality, multi-language examples, and developer experience optimization.
npx claudepluginhub oborchers/fractional-cto --plugin api-design-principlesThis skill uses the workspace's default tool permissions.
Documentation is the #1 factor in API adoption. SmartBear surveys consistently show that "accurate and detailed documentation" is the top requirement developers cite when evaluating an API. Stripe and Twilio did not win because they had better infrastructure -- they won because their docs made developers productive in minutes, not days. Every hour you invest in documentation returns tenfold in ...
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Retrieves current documentation, API references, and code examples for libraries, frameworks, SDKs, CLIs, and services via Context7 CLI. Ideal for API syntax, configs, migrations, and setup queries.
Uses ctx7 CLI to fetch current library docs, manage AI coding skills (install/search/generate), and configure Context7 MCP for AI editors.
Documentation is the #1 factor in API adoption. SmartBear surveys consistently show that "accurate and detailed documentation" is the top requirement developers cite when evaluating an API. Stripe and Twilio did not win because they had better infrastructure -- they won because their docs made developers productive in minutes, not days. Every hour you invest in documentation returns tenfold in reduced support tickets, faster integration times, and higher conversion from free-tier to paid.
Adopt the Stripe three-panel pattern: navigation on the left, conceptual content in the center, runnable code on the right. This layout lets developers read context and copy code simultaneously without scrolling or switching tabs.
Navigation panel rules:
Content panel rules:
Code panel rules:
"Time to first API call" (TTFAC) is the single most important developer experience metric. Stripe achieves approximately 3 minutes. AWS takes 30+ minutes. The difference is not complexity -- it is onboarding design.
The ideal onboarding flow:
Pre-fill everything. When a developer is logged into your docs site, render their real test API key directly into every code example. Never show YOUR_API_KEY as a placeholder. Copy-paste friction kills onboarding.
Provide code examples in at minimum cURL, Python, and JavaScript/Node.js. High-value additions are Ruby, PHP, Java, and Go. Every example must be complete and runnable -- no // ... your code here ... placeholders, no truncated response bodies.
Quality rules:
{ ... }requests, Node uses async/await, Go handles errors explicitlyStructure the docs hierarchy clearly:
Embed interactive API explorers directly in the documentation so developers can make real or simulated calls without leaving the page. Swagger UI and Redoc both support "Try It" panels that can be pre-populated with sandbox credentials.
Best practices:
Tier your explorers: embedded Try-It in docs is the minimum, a standalone Postman workspace or custom console is better, and a guided interactive tutorial that walks through multi-step flows is best.
Every API that handles real data or real money must provide a sandbox. Use the "separate keys" pattern -- test keys (sk_test_...) hit the same API but a separate test database. This is lowest-friction because developers do not need to change base URLs or configure separate environments.
Sandbox rules:
user_good / pass_good)Design the onboarding path so a developer can go from signup to receiving their first webhook in under 10 minutes:
Track TTFAC as a product metric. Measure it in user testing. Optimize it quarterly. Every friction point you remove from onboarding directly increases adoption.
Every error response is an opportunity to teach. Include a doc_url field in every error that links directly to a help page explaining the error, its common causes, and resolution steps.
The anatomy of a great API error:
type -- machine-readable error category (e.g., invalid_request_error)code -- specific error code (e.g., amount_too_small)message -- human-readable explanation that says what went wrong and what to do about itparam -- the request parameter that caused the errordoc_url -- a link to the documentation page for this specific errorsuggestion -- optional actionable fix (e.g., "Set amount to at least 50 for USD")Rules for error messages:
Choose between auto-generated SDKs, hand-crafted SDKs, or the recommended hybrid approach.
Auto-generated (openapi-generator, Stainless, Fern, Speakeasy) is fast and consistent but produces unidiomatic, hard-to-use code. Hand-crafted (Stripe, Twilio) feels native to each language but costs an entire team per language. Hybrid is the sweet spot: generate a base client from the OpenAPI spec, then layer hand-crafted ergonomic wrappers on top.
The hybrid workflow:
The difference matters: client.apis.default_api.create_payment_intent_api_v1_payment_intents_post(...) versus stripe.PaymentIntent.create(amount=2000, currency="usd"). Developers judge your entire platform by how your SDK feels.
Maintain a date-stamped changelog with categorization: Added, Changed, Deprecated, Removed, Fixed. Note the API version on every entry. Provide an RSS/Atom feed so developers can subscribe. Show dashboard banners when a developer's pinned API version approaches end-of-life.
Migration guide formula:
Deprecation lifecycle: Announce with Sunset header and docs notice, then soft-deprecate for 6 months with SDK warnings and monthly emails, then hard-deprecate with aggressive rate limits and dashboard countdowns, then remove after 12+ months by returning 410 Gone with migration instructions in the response body.
Adopt design-first for public APIs: write the OpenAPI specification before writing any code. The spec is the contract. Frontend and backend teams can work in parallel (frontend builds against a Prism mock server), and the design review catches naming issues, missing fields, and inconsistencies before any code is written.
The design-first workflow:
Establish a formal review checklist: resources are nouns, collections are plural, all fields use snake_case, boolean fields use is_ or has_ prefix, timestamps use _at suffix, every list endpoint supports pagination, every error scenario is documented.
Contract tests verify that the running API matches the OpenAPI specification. Run them in CI on every pull request.
Schemathesis generates test cases from the spec and throws them at the API -- it checks that response schemas match, status codes are correct, and edge cases (empty strings, huge numbers, special characters) do not crash the server. Dredd tests every endpoint in the spec against a running server and reports which responses violate the contract.
Integrate both into CI:
--checks all for fuzz testingContract tests should verify: response schemas match the spec, required fields are always present, status codes match the spec, error responses conform to the error schema, pagination has_more is accurate, and Content-Type headers are correct.
When building or reviewing API documentation and developer experience:
type, code, message, param, and doc_url