Skip to main content
affpapa.org
RU EN
skill CX Codex

api-design · margelo — Claude Code skill: what it does, how to install

This skill shapes and reviews public APIs for TypeScript, JavaScript, React, and React Native libraries before implementation.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add margelo/react-native-skills --skill api-design -a claude-code
Open on GitHub

What api-design does

api-design starts with the consumer-facing TypeScript surface rather than the internal implementation. It covers exported functions and classes, hooks, option objects, events, listener contracts, error behavior, naming, and APIs shared across platforms.

Its workflow asks for realistic call sites, including failure and cleanup cases, then checks the exported types with the repository’s typecheck, lint, and documentation tooling. The guidance favors typed state variants, focused option objects, and a clear split between required configuration and best-effort preferences.

A Nitro Module needs build-nitro-modules afterward: api-design handles the public TypeScript and React shape, while the second skill covers Nitro-specific specs, native state, and bindings.

What it helps with

  • shape a library’s exported API before coding
  • review typed states and failure behavior
  • separate required settings from preferences
  • write call-site examples with cleanup paths
  • check the API against typecheck, lint, and docs

Example prompts for the agent

  • Design the public TypeScript API for this library before implementing its internals.
  • Review these options and state variants so invalid combinations cannot be represented.
  • Create call-site examples that cover an error and resource cleanup.

How to install api-design

1Skills CLI (Vercel)

npx skills add margelo/react-native-skills --skill api-design -a claude-code

2Manually: put the files in place

~/.claude/skills/api-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/api-design/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about api-design

How do I install api-design in Claude Code?

Run npx skills add margelo/react-native-skills --skill api-design -a claude-code, then check ~/.claude/skills/api-design/SKILL.md.

What does api-design do?

It helps design and review public APIs for TypeScript, JavaScript, React, and React Native libraries, covering types, options, events, errors, naming, and cross-platform behavior.

What changes when the library is a Nitro Module?

Use api-design for the public TypeScript and React API first. Follow it with build-nitro-modules for Nitro-specific specifications, native state, and binding constraints.

Similar skills

All skills for Backend and APIs →

api-design by other authors comes first.

api-design affaan-m Provides REST API design standards covering resource naming, status codes, pagination, and error payloads. Use it when creating or auditing API contracts. CX Codex +1 5,500installs api-design Aaronontheweb A skill for designing public APIs that only extend, so new releases don't break the code that already depends on them. CX Codex +1 660installs api-design Agent Skills Team This skill designs or refactors REST and GraphQL contracts, covering operations, errors, compatibility, and contract artifacts for implementation. CX Codex +1 387installs mcp-builder official anthropics This skill walks through building an MCP server in TypeScript or Python, from reading the protocol spec to writing tests and evaluation questions. 130,949installs claude-api official anthropics Reference skill for the Claude API and Anthropic SDK that enforces valid model IDs, adaptive thinking, and streaming. 74,198installs lark-im larksuite This skill lets an agent work with Lark IM messages, chats, files, and interactive cards. Use it when coding tasks need access to team conversations. CX Codex +1 472,900installs lark-event larksuite Listens to Lark/Feishu events and streams them as NDJSON. Use it for bots, message processing, and long-running subscribers. CX Codex +1 466,800installs caveman-discover JuliusBrussee Finds and labels every LLM workflow in your repository so Caveman Cloud breaks down spend by actual job rather than grouping everything into one bucket. CX Codex +1 104,400installs migration JuliusBrussee Enforces reversible, compatibility-safe transitions for schema, data, and API updates. Useful whenever data loss or rollout downtime is unacceptable. CX Codex +1 103,900installs

From the same set6

react-native-mmkv This skill points your AI assistant at the real react-native-mmkv APIs: instance setup, hooks, encryption, AsyncStorage migration. CX Codex +1 841installs build-nitro-modules Walks through building a React Native Nitro Module: HybridObject TypeScript specs, nitrogen codegen, native Swift, Kotlin and C++ implementations. CX Codex +1 820installs react-native-vision-camera A routing skill for VisionCamera v5 in React Native: it tells the agent which reference to load for the task and which v5 rules to respect. CX Codex +1 702installs nitro-fetch A skill that points AI assistants at the real react-native-nitro-fetch APIs instead of invented ones: fetch, WebSocket, TextDecoder, prefetching. CX Codex +1 615installs kotlin A skill for Kotlin and Android API work: it pushes typed state modeling, explicit async boundaries, and keeps blocking calls out of properties. Useful when you touch .kt files or a Nitro Module wrapper. CX Codex +1 469installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor