react-package-builder

Create reusable React component packages for the Raamattu Nyt monorepo. Use when: (1) Extracting a component from an app into a shared package (2) Creating a new reusable UI component library (3) Designing props contracts for controlled/uncontrolled components (4) Implementing engine abstraction patterns (GSAP, framer-motion) (5) Decoupling components from Supabase/Auth/fetching Triggers: "create package", "extract component", "make reusable", "shared component", "props contract", "engine abstraction"

Stars 163

Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/react-package-builder

SKILL.md

React Package Builder

Create decoupled, reusable React packages for the monorepo.

Workflow

Audit existing component for app-specific dependencies
Design props contract (see props-patterns.md)
Scaffold package structure (see package-structure.md)
Verify decoupling (see decoupling-checklist.md)
Create adapter in consuming app

Quick Start

bash

# Create package directory
mkdir -p packages/<package-name>/src/{ui,hooks,engine,styles}

# Create package.json
cat > packages/<package-name>/package.json << 'EOF'
{
  "name": "@raamattu-nyt/<package-name>",
  "version": "1.0.0",
  "main": "src/index.ts",
  "peerDependencies": { "react": ">=18" }
}
EOF

Core Principles

Principle	Implementation
No fetching	Data via props, callbacks for mutations
No Supabase	Parent adapter handles DB
No Auth	Parent provides auth context if needed
No persistence	Parent saves progress/preferences
Signals only	Emit callbacks, don't execute side effects

Props Contract Template

typescript

interface ComponentProps {
  // ---- Content ----
  title: string;
  items: Item[];

  // ---- Index (controlled/uncontrolled) ----
  currentIndex?: number;
  defaultIndex?: number;
  onIndexChange?: (index: number, meta: { source: string }) => void;

  // ---- Signals (parent handles audio/media) ----
  onToggleAudio?: (enabled: boolean) => void;
  onVolumeChange?: (volume: number) => void;

  // ---- Lifecycle ----
  onExit?: () => void;
}

References

package-structure.md — Directory layout, naming conventions
props-patterns.md — Controlled/uncontrolled, engine abstraction
decoupling-checklist.md — Verify no app dependencies