Agent skill

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"

View SKILL.md on GitHub Repository
Stars 0
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/Spectaculous-Code/raamattu-nyt/tree/main/.claude/skills/react-package-builder

SKILL.md

React Package Builder

Create decoupled, reusable React packages for the monorepo.

Workflow

  1. Audit existing component for app-specific dependencies
  2. Design props contract (see props-patterns.md)
  3. Scaffold package structure (see package-structure.md)
  4. Verify decoupling (see decoupling-checklist.md)
  5. 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;
}

Cross-cutting learnings: See .claude/LEARNINGS.md → "React/TypeScript" section for useCallback deps, controlled component patterns, and infinite loop prevention.

References

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

Spectaculous-Code/raamattu-nyt

docs-updater

Expert assistant for keeping documentation synchronized with code changes in the KR92 Bible Voice project. Use when updating API docs, maintaining architecture diagrams, syncing README, updating CLAUDE.MD, or generating documentation from code.

0 0
Explore
Spectaculous-Code/raamattu-nyt

ai-prompt-manager

Expert assistant for managing AI prompts, features, and configuration in the KR92 Bible Voice AI system. Use when creating AI prompts, configuring AI features, managing prompt versions, setting up AI bindings, or working with AI pricing and models.

0 0
Explore
Spectaculous-Code/raamattu-nyt

performance-auditor

Expert assistant for monitoring and optimizing performance in the KR92 Bible Voice project. Use when analyzing query performance, optimizing database indexes, reviewing React Query caching, monitoring AI call costs, or identifying N+1 queries.

0 0
Explore
Spectaculous-Code/raamattu-nyt

edge-function-generator

Expert assistant for creating and maintaining Supabase Edge Functions for the KR92 Bible Voice project. Use when creating Edge Functions, setting up CORS, integrating shared modules, adding JWT validation, or configuring environment variables.

0 0
Explore
Spectaculous-Code/raamattu-nyt

admin-panel-builder

Expert assistant for creating and maintaining admin panel pages in the KR92 Bible Voice project. Use when creating admin pages, building admin components, integrating with admin navigation, or adding admin features.

0 0
Explore
Spectaculous-Code/raamattu-nyt

lint-fixer

Expert assistant for analyzing and fixing linting and formatting issues in the KR92 Bible Voice project using Biome and TypeScript. Use when fixing lint errors, resolving TypeScript issues, applying code formatting, or reviewing code quality.

0 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results