Module Scaffolding Skill

Module Scaffolding Skill

This skill automates creation of new feature modules in the libs/ directory, following the project's conventions and patterns.

When to Use

• User asks to create a new feature/​module
• User wants to add a new library to the monorepo
• User needs a new domain area (e.g., "authentication", "payments", "notifications")

Module Types

Step-by-Step Instructions

Step 1: Gather Requirements

Ask the user for:

1. Module name (kebab-case, e.g., user-management)
2. Module type (full/​pages/​api/​shared)
3. Whether it needs database models (yes/​no)

Step 2: Create Directory Structure

# For full module:
mkdir -p libs/​{name}/​src/​pages
mkdir -p libs/​{name}/​src/​routes
mkdir -p libs/​{name}/​src/​locales
mkdir -p libs/​{name}/​src/​assets/​css
mkdir -p libs/​{name}/​src/​assets/​js
mkdir -p libs/​{name}/​prisma

# For pages-only:
mkdir -p libs/​{name}/​src/​pages
mkdir -p libs/​{name}/​src/​locales
mkdir -p libs/​{name}/​src/​assets/​css

# For API-only:
mkdir -p libs/​{name}/​src/​routes

# For shared library:
mkdir -p libs/​{name}/​src

Step 3: Generate Files

Use the templates in assets/ to create:

1. libs/​{name}/​package.json - from package.json.template

   • Replace {{MODULE_NAME}} with the kebab-case module name
   • Remove build:nunjucks script if no pages directory

2. libs/​{name}/​tsconfig.json - from tsconfig.json.template

   • No modifications needed

3. libs/​{name}/​src/​config.ts - from config.ts.template

   • Remove unused exports based on module type:
     • No pages? Remove pageRoutes
     • No routes? Remove apiRoutes
     • No database? Remove prismaSchemas
     • No assets? Remove assets

4. libs/​{name}/​src/​index.ts - from index.ts.template

   • Add business logic exports as they're created

Step 4: Register Module

4a. Root tsconfig.json

Add to compilerOptions.paths:

"@hmcts/​{name}": ["libs/​{name}/​src"]

4b. Web App (if module has pages)

In apps/​web/​src/​app.ts, add import:

import { pageRoutes as {camelName}Pages } from "@hmcts/​{name}/​config";

Add to createSimpleRouter call or router setup.

4c. API App (if module has routes)

In apps/​api/​src/​app.ts, add import:

import { apiRoutes as {camelName}Routes } from "@hmcts/​{name}/​config";

Add to createSimpleRouter call.

4d. Vite Config (if module has assets)

In apps/​web/​vite.config.ts, add import:

import { assets as {camelName}Assets } from "@hmcts/​{name}/​config";

Add to createBaseViteConfig array.

4e. Prisma Schema Discovery (if module has database)

In libs/​postgres-prisma/​src/​schema-discovery.ts, add import:

import { prismaSchemas as {camelName}Schemas } from "@hmcts/​{name}/​config";

Add to schemaPaths array.

Step 5: Verify Setup

Run these commands to verify the module is set up correctly:

yarn                    # Install dependencies
yarn build              # Verify TypeScript compiles
yarn lint               # Check for lint errors

Naming Conventions

Conversion Helper

kebab-case to camelCase for imports:

• user-management → userManagement
• council-tax → councilTax
• footer-pages → footerPages

Template Files

Templates are located in .claude/​skills/​module-scaffold/​assets/:

• package.json.template - Package configuration
• tsconfig.json.template - TypeScript configuration
• config.ts.template - Module config exports
• index.ts.template - Business logic exports

Example: Full Module Creation

Creating a payment-gateway module:

1. Create directories:

   mkdir -p libs/​payment-gateway/​src/​{pages,routes,locales,assets/​css}
   mkdir -p libs/​payment-gateway/​prisma
   

2. Create package.json with name @hmcts/​payment-gateway

3. Create tsconfig.json extending root

4. Create src/​config.ts with all exports

5. Create src/​index.ts placeholder

6. Register in tsconfig.json:

   "@hmcts/​payment-gateway": ["libs/​payment-gateway/​src"]
   

7. Register in apps/​web/​src/​app.ts:

   import { pageRoutes as paymentGatewayPages } from "@hmcts/​payment-gateway/​config";
   

8. Run verification:

   yarn && yarn build && yarn lint