# api-design

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 552 installs · ★ 178
- Author: margelo
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/margelo/react-native-skills/tree/HEAD/skills/api-design/SKILL.md
- Updated: 2026-08-21
- HTML: https://affpapa.org/en/nevibecode/skills/margelo-api-design

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill api-design -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/api-design/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/api-design/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill api-design -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/api-design/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill api-design -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/api-design/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install margelo/react-native-skills api-design
```

2. **Manually: put the files in place**
- File: `.github/skills/api-design/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill api-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/margelo/react-native-skills --path skills/api-design
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/api-design/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill api-design -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/margelo/react-native-skills/tree/HEAD/skills/api-design/SKILL.md

## When to use it
- 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
- 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.

## Similar
- [mcp-builder](https://affpapa.org/en/nevibecode/skills/mcp-builder.md) — skill · 130949 installs
- [claude-api](https://affpapa.org/en/nevibecode/skills/claude-api.md) — skill · 74198 installs
- [lark-im](https://affpapa.org/en/nevibecode/skills/lark-im.md) — skill · 472900 installs
- [lark-event](https://affpapa.org/en/nevibecode/skills/lark-event.md) — skill · 466800 installs
- [caveman-discover](https://affpapa.org/en/nevibecode/skills/caveman-discover.md) — skill · 104400 installs
- [migration](https://affpapa.org/en/nevibecode/skills/migration.md) — skill · 103900 installs

## Other versions with the same name
- [api-design · affaan-m](https://affpapa.org/en/nevibecode/skills/api-design.md) — 5500 installs
- [api-design · aaronontheweb](https://affpapa.org/en/nevibecode/skills/aaronontheweb-api-design.md) — 660 installs
- [api-design · akillness](https://affpapa.org/en/nevibecode/skills/agent-skills-team-api-design.md) — 387 installs

From the same set: [margelo/react-native-skills](https://affpapa.org/en/nevibecode/by/margelo/react-native-skills.md) — 6 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md