Monorepo Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Claude Skill Builder project utilizes a monorepo architecture managed by pnpm to co-locate multiple applications, shared packages, and specialized plugins within a single repository. This structure facilitates end-to-end type safety, modular development, and efficient dependency management across the desktop client, backend server, and various AI-integrated skills.
Sources: Comprehensive.md:23-28, specs/main/plan.md:42-45
The architecture supports a complex technology stack including Next.js 15, React 19, Electron, Node.js, and tRPC. By centralizing these components, the project enables shared configurations and streamlined CI/CD workflows for multi-package build validation and multi-platform releases.
Sources: Comprehensive.md:46-51, specs/main/plan.md:103-110
Core Components and Structure
Package Organization
The repository is divided into logical workspaces to separate the presentation layer, business logic, and reusable utilities.
| Directory | Role | Key Technologies |
|---|---|---|
apps/client | Desktop application frontend | Electron, Next.js, React 19, Monaco Editor |
apps/server | Type-safe backend services | Node.js, tRPC, Express, Prisma, SQLite |
packages/shared | Reusable types and logic | TypeScript |
plugins/ | Specialized skill integrations | Markdown, TypeScript |
scripts/ | Tooling and automation | Node.js |
Sources: Comprehensive.md:46-51, specs/main/plan.md:124-170, scripts/generate-docs.js:15-20
System Interaction Flow
The application follows an event-driven architecture with type-safe APIs connecting the Electron/Next.js client to the Express/tRPC server.
The diagram shows the high-level relationship between the client presentation layer and the server-side business logic.
Sources: scripts/generate-docs.js:15-28, Comprehensive.md:46-51
API and Data Flow
tRPC Architecture
The project leverages tRPC for end-to-end type safety, ensuring that the client and server share the same data definitions without manual schema generation. The primary routers handle skill management and provider credentials.
Sources: Comprehensive.md:57-60, specs/main/plan.md:42-45
Primary API Routers:
skill.router.ts: Handles CRUD operations, versioning, and restoration of AI skills.credential.router.ts: Manages provider encryption, testing, and management.
Sources: Comprehensive.md:61-63, scripts/generate-docs.js:33-38
Data Models and Relationship
The backend utilizes Prisma ORM with SQLite to manage skill metadata and application settings.
The ER diagram illustrates the relationship between core entities where a Skill can have multiple versions and associated credentials.
Sources: Comprehensive.md:53-56, scripts/generate-docs.js:50-60
Plugin and Skill Architecture
The monorepo architecture includes a dedicated plugins/ or skill/ directory for extending AI capabilities. These plugins follow a structured development workflow (such as Kiro or Spec-Kit) and use localized configurations.
Sources: plugins/kiro-skill/skills/kiro-skill/SKILL.md:13-17, plugins/spec-kit-skill/skills/spec-kit-skill/SKILL.md:15-20
Integrated Development Workflows
The project supports structured feature development through specialized plugins co-located in the monorepo:
- Spec-Kit Workflow: A 7-phase constitution-driven process (Constitution, Specify, Clarify, Plan, Tasks, Analyze, Implement).
- Kiro Workflow: An interactive 4-phase transformation from idea to implementation (Requirements, Design, Tasks, Execute).
Sources: plugins/spec-kit-skill/skills/spec-kit-skill/SKILL.md:6-14, plugins/kiro-skill/skills/kiro-skill/SKILL.md:13-20
Infrastructure and Automation
CI/CD Pipeline
The monorepo structure allows for unified GitHub Actions workflows that validate the entire codebase.
| Workflow | Scope | Triggers |
|---|---|---|
| CI Pipeline | Lint, type-check, unit & E2E tests | Push, PR |
| Multi-platform Build | Electron release (Win/Mac/Linux) | Tags (v*..) |
| Database Validation | Prisma schema checks | Schema changes |
| Docker Build | Multi-platform container images | Tag push |
Sources: Comprehensive.md:33-43, specs/main/plan.md:172-185
Workspace Configuration
Shared settings are maintained at the root of the monorepo to ensure consistency across all packages.
- ESLint: Standardized rules for TypeScript and React.
- VS Code Settings: Workspace-level formatting and recommended extensions.
- pnpm workspaces: Defined in
pnpm-workspace.yamlto link internal packages.
Sources: Comprehensive.md:113-144, specs/main/plan.md:124-170
Summary
The Monorepo Architecture of the Claude Skill Builder project provides a robust foundation for building high-quality AI tools. By centralizing the Electron client, Express server, and specialized skills, the project ensures tight integration, end-to-end type safety via tRPC, and a unified automation pipeline. This structure supports the project's goal of scaling to hundreds of ready-to-use AI agents while maintaining strict code quality and architectural standards.
Sources: Comprehensive.md:7-12, specs/main/plan.md:12-16, scripts/generate-docs.js:7-13