📦 RN-Lib-Claude

Claude Code plugin for building and publishing React Native libraries.

3 library types · 13 skills · 7 agents · 8 commands · 4 scripts

---

Note: RN-Lib-Claude is distributed through the claude-plugin-marketplace.

┌────────────────────────────────────────────────────────────────────────────┐
│                                                                            │
│   /plugin marketplace add Shankulkarni/claude-plugin-marketplace            │
│   /plugin install rn-lib-claude@shankulkarni                               │
│   /rn-lib-claude:setup                                                     │
│                                                                            │
│   That's it. Every library. Every component. Same standards.               │
│                                                                            │
└────────────────────────────────────────────────────────────────────────────┘

---

Why this plugin exists

The right way to build an RN library — New Architecture, Expo, Changesets, CI — isn't written down in one place. You piece it together from docs, GitHub issues, and trial and error. This plugin is that one place.

• Setting up is 14 manual steps. /rn-lib-claude:scaffold does them all.
• Broken libraries ship to npm — missing changeset, console.log in src, version at 0.0.0. Pre-publish checks block them.
• New Arch violations (NativeModules, UIManager, console.log in worklets) slip through to users. deslop catches them with file:line.
• Wiring CI from scratch takes hours. The CI skill gives you working YAML for a PR gate and Changesets publish.
• Codegen knowledge is spread across three different docs. The codegen skill has it: threading constraints, Expo class names, auto-linking vs config plugin.
• Code gets published without a spec or review. Agents enforce spec → scaffold → review → publish. No skipping.
• Getting listed on reactnative.directory is a manual PR. One command does it.

---

📚 Library Types

Three types, one plugin. Pick the right one at scaffold time — the plugin handles the rest.

Type	Use when	Expo Go	Native code
turbo-module	Calling native platform APIs — camera, sensors, crypto, storage	❌ Dev client	✅ Kotlin + ObjC++
fabric-view	Rendering a native UI component — maps, video players, native pickers	❌ Dev client	✅ Kotlin + ObjC++
library	Pure TypeScript — pickers, hooks, utilities, formatters	✅ Yes	❌ None

All three use: TypeScript strict · react-native-builder-bob · ESLint v9 · Prettier · Husky · Changesets · Expo example app.

---

🧠 Skills

Loaded on-demand. Only the relevant skill enters context — the rest cost 0 tokens.

	Skill	What it covers
🏗️	scaffold	Full library setup — create-react-native-library, bob config, Expo dev client, Changesets, Husky
🧩	component	Fabric-compatible UI components, ref forwarding, compound patterns, a11y
🪝	hooks	Custom hooks, worklet-safe utilities, stable callbacks
✨	animations	Reanimated v3 worklets, GestureDetector, GPU-only properties
📐	typescript	Strict config, moduleResolution: bundler, exports map, peer dep types
🧪	testing	Jest + React Native Testing Library, Reanimated mocks, Codegen mocks
🚀	publish	Changesets workflow, semver, bob build validation, npm publish
⚙️	codegen	TurboModules, Fabric views, Codegen TypeScript specs, expo-module.config.json
📱	example-app	Expo SDK 52+, Expo Go vs dev client, demo patterns, metro config
⚡	performance	Bundle size, memoization, FlashList, FPS targets
🧹	deslop	Legacy bridge APIs, console.log in worklets, hardcoded values
🗂️	directory	Submit to reactnative.directory — autoSubmit CLI, manual PR
🔧	ci	GitHub Actions — PR quality gate, automated Changesets publish, NPM_TOKEN

---

🤖 Agents

7 specialists. All under 80 lines. Pure signal, no fluff.

╔══════════════════════════════════════════════════════════════════════╗
║                                                                      ║
║  📦 LIBRARY                  ⚙️  NATIVE                              ║
║  ──────────                  ──────────                              ║
║  Library Architect           Codegen Engineer                        ║
║  Component Developer                                                 ║
║  Hooks Developer             🎛️  ORCHESTRATION                       ║
║                              ────────────────                        ║
║  ✅ QUALITY                  Orchestrator                            ║
║  ────────                    (full lifecycle)                        ║
║  Code Reviewer                                                       ║
║  Publisher                                                           ║
║                                                                      ║
╚══════════════════════════════════════════════════════════════════════╝

	Agent	Role
🎯	orchestrator	Coordinates full library lifecycle — scaffold to publish
🏛️	library-architect	Type selection (TurboModule / Fabric view / JS-only), API surface design, peer deps
🧩	component-developer	UI components, animations, gestures
🪝	hooks-developer	Headless hooks, worklet-safe utilities
⚙️	codegen-engineer	TurboModules + Fabric native views
🚀	publisher	Versioning, CHANGELOG, npm publish
✅	code-reviewer	New Arch compliance, API quality gate

---

⚡ Commands

Type these directly in Claude Code:

Command	What happens
/rn-lib-claude:setup	🔧 One-time: copies conventions to ~/.claude/CLAUDE.md
/rn-lib-claude:update	🔄 Updates plugin + refreshes CLAUDE.md conventions
/rn-lib-claude:uninstall	🗑️ Removes conventions from CLAUDE.md
/rn-lib-claude:scaffold	🏗️ Scaffold a new library — picks type, sets up everything
/rn-lib-claude:publish	🚀 Pre-publish checks + npm publish + optional directory submission
/rn-lib-claude:deslop	🧹 Scan for anti-patterns and New Architecture violations
/rn-lib-claude:directory	🗂️ Submit published library to reactnative.directory
/rn-lib-claude:ci	🔧 Set up GitHub Actions CI/CD — PR gate + automated publish

  /rn-lib-claude:scaffold     ← you type this
       │
       ▼
  commands/scaffold.md         ← picks TurboModule / Fabric view / JS-only
       │
       ▼
  skills/scaffold/SKILL.md     ← full setup playbook
       │
       ▼
  Library ready to code        ← bob · Changesets · Husky · Expo example app

---

🔌 Expo Support

Library type	Expo Go	Dev client	Config plugin
turbo-module	❌	✅ Required	Optional (app.plugin.js)
fabric-view	❌	✅ Required	Optional (app.plugin.js)
library (JS-only)	✅ Works	Not needed	Not needed

• All example apps use Expo SDK 52+ with newArchEnabled: true
• Native libraries get expo-dev-client added to example dependencies automatically
• Native libraries get expo-module.config.json for Expo managed workflow auto-linking

---

🛡️ Hard Rules

  ┌─────────────────────────────────────────────┐
  │  Architecture                               │
  │  New Architecture only — RN 0.76+           │
  │  No legacy bridge APIs ever                 │
  │  Codegen specs in TypeScript, not Flow      │
  ├─────────────────────────────────────────────┤
  │  Package Manager                            │
  │  bun always — bunx not npx                  │
  │  npm publish only for registry              │
  ├─────────────────────────────────────────────┤
  │  TypeScript                                 │
  │  Strict mode, type not interface            │
  │  moduleResolution: bundler                  │
  │  No any, no as                              │
  ├─────────────────────────────────────────────┤
  │  Dependencies                               │
  │  react + react-native always peer deps      │
  │  Never bundle reanimated or gesture-handler │
  │  Changesets required before every publish   │
  └─────────────────────────────────────────────┘

---

📁 Project Structure

rn-lib-claude/
├── CLAUDE.md                ← Conventions (copied to ~/.claude/CLAUDE.md by /rn-lib-claude:setup)
├── agents/                  ← 7 specialist agents
│   ├── orchestrator.md
│   ├── library-architect.md
│   ├── component-developer.md
│   ├── hooks-developer.md
│   ├── codegen-engineer.md
│   ├── publisher.md
│   └── code-reviewer.md
├── skills/                  ← 13 on-demand skills
│   ├── scaffold/
│   ├── component/
│   ├── hooks/
│   ├── animations/
│   ├── typescript/
│   ├── testing/
│   ├── publish/
│   ├── codegen/
│   ├── example-app/
│   ├── performance/
│   ├── deslop/
│   ├── directory/
│   └── ci/
├── commands/                ← 8 slash commands
│   ├── setup.md
│   ├── update.md
│   ├── uninstall.md
│   ├── scaffold.md
│   ├── publish.md
│   ├── deslop.md
│   ├── directory.md
│   └── ci.md
└── scripts/                 ← Pure bash tooling (0 tokens)
    ├── setup.sh
    ├── teardown.sh
    ├── deslop.sh
    └── pre-publish.sh

---

🔧 Install / Update / Uninstall

Uses Claude Code's native plugin system. No custom scripts needed.

Install

# 1. Add the marketplace
/plugin marketplace add Shankulkarni/claude-plugin-marketplace

# 2. Install the plugin
/plugin install rn-lib-claude@shankulkarni

# 3. Restart Claude Code (required after plugin install)

# 4. Run setup in Claude Code
/rn-lib-claude:setup

Update

/plugin marketplace update shankulkarni
/plugin update rn-lib-claude@shankulkarni

Or from Claude Code: /rn-lib-claude:update

Uninstall

Run /rn-lib-claude:uninstall first (removes conventions from CLAUDE.md), then:

/plugin uninstall rn-lib-claude@shankulkarni

---

👥 For the Team

Adding a Skill

1. Create plugins/rn-lib-claude/skills/<name>/SKILL.md with frontmatter:

   ---
   name: my-skill
   description: "Use when [trigger condition]."
   ---

2. Add to skill table in CLAUDE.md

Adding an Agent

1. Create plugins/rn-lib-claude/agents/<name>.md under 80 lines:

   ---
   name: My Agent
   description: Use when [trigger]. Does [what].
   color: blue
   ---

Contributing Rules

  ✅  Tabs, single quotes, no semicolons, trailing commas
  ✅  type not interface, inline type imports
  ✅  Named imports from react (never React.xxx)
  ✅  bunx not npx, bun not npm
  ✅  Kebab-case filenames, .ts/.tsx only

---