J
joinearlybird/annokit
Tap any element in your React Native app, say what should change, and send it to your AI coding agent or your…
在 GitHub 查看 ↗链接已于 2026-11-12 核查 · HTTP 200 · 打开的是厂商自己的官网
安装与配置
客户端配置（取自该仓库的安装命令）
{
"mcpServers": {
"joinearlybird-annokit": {
"command": "npx",
"args": ["skills"]
}
}
}解析自我们于 2026-10-29 抓取的该仓库 README；我们未执行过。
command/args 来自仓库写明的安装命令；不确定时请以该项目 README 为准。
VS Code（.vscode/mcp.json —— 键名是 servers）
{
"servers": {
"joinearlybird-annokit": {
"command": "npx",
"args": ["skills"]
}
}
}VS Code 顶层键是 <code>servers</code>，其余与上面那份相同。
Claude Code（命令行）
claude mcp add --transport stdio joinearlybird-annokit -- npx skills
Claude Code 不收 JSON 文件，用这条命令直接加。
配置项的键名以你的客户端为准：客户端与 CLI
- ★ 数取值
- 0 ★ · joinearlybird/annokit · 取自 GitHub 搜索 API · （2026-11-13 20:00:50 核对）
- 来源明细
- 从该仓库的 GitHub 页面直接读取 · 条目类型：开源项目
- 收录与活跃
- 收录于 2026-10-30 · 最近见到 2026-11-14 · 共见到 16 次 · 被 1 个来源列出
- 评分构成
- 综合分 103 · 1 个来源 · repo
- 安装
npx skills
常见问题（答案都来自我们的记录）
怎么安装？
该仓库给出的安装命令是
npx skills。我们的记录里它是仓库自己提供的；不保证在你的客户端上直接可用。它适合谁 / 用来做什么？
我们把它归在这些标签下: 开源项目。标签来自条目自身，不是我们强加的分类。
谁维护它、还在更新吗？
仓库
joinearlybird/annokit；我们收录于 2026-10-30；最近见到 2026-11-14。这里没有"官方认证"或"质量评级"——我们只记录来源与时间。# AnnoKit
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
Tap any element in your React Native app, say what should change, and
send it to your AI coding agent — or to your team.
AnnoKit is an in-app annotation overlay for React Native and Expo apps in
development.
Tap an element and it lights up with its real component name and source
location. Write what you mean, then choose who it is for: an agent task
goes to a coding agent, which acts on it, and a team note goes to your
teammates, who discuss it. Both travel over one small HTTP contract, the
AnnoKit Protocol,
so any server that implements it works. The Earlybird app builder is the
reference implementation.
## Features
Real component identity. Aiming names the nearest user component —
PrimaryButton, not View — symbolicated to its definition site
(FeedRow · FeedRow.tsx:9). Drag to survey before you commit.
One mark, two destinations. Write the sentence first; the button you
tap to send is the choice: Comment for the team, Create Agent Task
for the agent.
Context the agent can act on. Component stack, testID, nearby text,
an optional screenshot and attached references — trimmed to the
Output Detail
level you choose.
Markers on the element. Every task and note leaves a marker anchored
to the element it was made on, re-measured as the screen scrolls.
The answer comes back to the device. Agent replies land in the task's
thread; reply yourself and the task is reopened for another pass.
Development only. Inert outside DEV, zero runtime dependencies,
and every native integration is an optional peer that degrades instead of
breaking.
## What it looks like
| Toolbar | Aim | Compose | Markers |
| Queue | Team notes | Task detail | Note detail |
Captured from examples/expo
on the iOS Simulator (Expo SDK 58, React Native 0.88, Fabric), talking to
the example stub server with Claude Code as the agent. The agent's replies
and edits are real.
How it works
walks through each surface.
## Quick start
From nothing to annotating on the iOS Simulator in about five minutes.
This is exactly how the
Expo example
was made, and npm run verify:starter -- --fresh repeats it against the
latest scaffold. Already have an app? Skip the first command; the steps
are the same.
Using a coding agent? Install the setup skill, then ask the agent to
"set up AnnoKit in this app". It works with Claude Code, Codex, Cursor
and other agents, and follows the steps below:
bash
npx skills add joinearlybird/annokit --skill annokit-setup
1. Install. In a new Expo app:
bash
npx create-expo-app@latest my-app --yes
cd my-app
npx expo install @joinearlybird/annokit \
react-native-view-shot react-native-svg expo-sensors expo-paste-input
In a bare React Native app, npm install @joinearlybird/annokit.
It requires react >=18 and react-native >=0.69. Everything else is
optional, and each one switches a feature on:
| Optional peer | Adds |
| react-native-view-shot | Screenshots in the composer |
| react-native-svg | Vector icons (text glyphs without it) |
| expo-router | Markers per screen, and jumping to a note on another screen |
| expo-sensors | Shake to arm |
| expo-paste-input | Paste an image into the composer; it is uploaded to the app's assets and attached |
2. Wrap your app root in the provider. Mount exactly one. For Expo
send it to your AI coding agent — or to your team.
AnnoKit is an in-app annotation overlay for React Native and Expo apps in
development.
Tap an element and it lights up with its real component name and source
location. Write what you mean, then choose who it is for: an agent task
goes to a coding agent, which acts on it, and a team note goes to your
teammates, who discuss it. Both travel over one small HTTP contract, the
AnnoKit Protocol,
so any server that implements it works. The Earlybird app builder is the
reference implementation.
## Features
Real component identity. Aiming names the nearest user component —
PrimaryButton, not View — symbolicated to its definition site
(FeedRow · FeedRow.tsx:9). Drag to survey before you commit.
One mark, two destinations. Write the sentence first; the button you
tap to send is the choice: Comment for the team, Create Agent Task
for the agent.
Context the agent can act on. Component stack, testID, nearby text,
an optional screenshot and attached references — trimmed to the
Output Detail
level you choose.
Markers on the element. Every task and note leaves a marker anchored
to the element it was made on, re-measured as the screen scrolls.
The answer comes back to the device. Agent replies land in the task's
thread; reply yourself and the task is reopened for another pass.
Development only. Inert outside DEV, zero runtime dependencies,
and every native integration is an optional peer that degrades instead of
breaking.
## What it looks like
| Toolbar | Aim | Compose | Markers |
| Queue | Team notes | Task detail | Note detail |
Captured from examples/expo
on the iOS Simulator (Expo SDK 58, React Native 0.88, Fabric), talking to
the example stub server with Claude Code as the agent. The agent's replies
and edits are real.
How it works
walks through each surface.
## Quick start
From nothing to annotating on the iOS Simulator in about five minutes.
This is exactly how the
Expo example
was made, and npm run verify:starter -- --fresh repeats it against the
latest scaffold. Already have an app? Skip the first command; the steps
are the same.
Using a coding agent? Install the setup skill, then ask the agent to
"set up AnnoKit in this app". It works with Claude Code, Codex, Cursor
and other agents, and follows the steps below:
bash
npx skills add joinearlybird/annokit --skill annokit-setup
1. Install. In a new Expo app:
bash
npx create-expo-app@latest my-app --yes
cd my-app
npx expo install @joinearlybird/annokit \
react-native-view-shot react-native-svg expo-sensors expo-paste-input
In a bare React Native app, npm install @joinearlybird/annokit.
It requires react >=18 and react-native >=0.69. Everything else is
optional, and each one switches a feature on:
| Optional peer | Adds |
| react-native-view-shot | Screenshots in the composer |
| react-native-svg | Vector icons (text glyphs without it) |
| expo-router | Markers per screen, and jumping to a note on another screen |
| expo-sensors | Shake to arm |
| expo-paste-input | Paste an image into the composer; it is uploaded to the app's assets and attached |
2. Wrap your app root in the provider. Mount exactly one. For Expo
收录徽章（可选）
想把收录标记放进 README 就复制这行，可选，不影响收录。
[](https://anclum.com/zh/s/joinearlybird-annokit/)
- 来源
- github · https://github.com/joinearlybird/annokit
- 按领域浏览
- 开源项目
- 收录于
- 今天
同类推荐
所属领域与标签
每个标签都能点进去看同类的全部条目。数字是当前库里的真实条数。