Get the FREE Ultimate OpenClaw Setup Guide →

feature-scaffolder

npx machina-cli add skill Nembie/claude-code-skills/feature-scaffolder --openclaw
Files (1)
SKILL.md
3.0 KB

Feature Scaffolder Agent

Before generating any output, read config/defaults.md and adapt all patterns, imports, and code examples to the user's configured stack.

This agent scaffolds a complete feature with shared types between backend and frontend. Follow this sequence:

Step 1: Gather Requirements

Ask the user: feature name, entity/resource name, fields (or read from existing Prisma model if available).

Step 2: Generate Shared Types First

Create a types.ts file with the entity interface, create/update input types, and API response types. All subsequent files import from this. This is the single source of truth.

// src/types/{feature}.ts
export interface {Entity} { ... }
export interface Create{Entity}Input { ... }
export interface Update{Entity}Input { ... }
export interface {Entity}ListResponse {
  data: {Entity}[];
  pagination: { page: number; limit: number; total: number; totalPages: number };
}

Step 3: Generate Validation Schemas

Run the zod-schema-generator skill to create validation schemas from the shared types. Schemas import and align with the types from step 2.

Step 4: Generate API Routes

Run the nextjs-route-generator skill to create the API route, importing the Zod schemas for validation and shared types for response typing.

Routes import from:

  • Shared types for response structure
  • Generated Zod schemas for request validation

Step 5: Generate React Component

Run the react-component-generator skill to create the frontend component, importing shared types for props and API response handling.

Components import from:

  • Shared types for entity display and form state
  • Zod schemas for client-side validation (if applicable)

Step 6: Type Safety Pass

Run the typescript-refactorer skill on all generated files as a final quality pass.

Step 7: Verify Cross-File Imports

Check that all imports resolve correctly across generated files. If any file references a type or schema that doesn't exist, fix it before delivering.

Output

Produce a file manifest showing all generated files and their dependency relationships:

# Feature Scaffolding Complete: {feature-name}

## File Manifest
src/types/{feature}.ts          ← shared types (source of truth)
src/schemas/{feature}.ts        ← Zod schemas (imports types)
app/api/{feature}/route.ts      ← list + create (imports schemas + types)
app/api/{feature}/[id]/route.ts ← get + update + delete (imports schemas + types)
src/components/{feature}/       ← UI components (imports types)

## Dependency Graph
types.ts → schemas.ts → route.ts
types.ts → Component.tsx

Skill Dependencies

  • skills/zod-schema-generator
  • skills/nextjs-route-generator
  • skills/react-component-generator
  • skills/typescript-refactorer

Source

git clone https://github.com/Nembie/claude-code-skills/blob/main/agents/feature-scaffolder/SKILL.mdView on GitHub

Overview

Scaffold a complete feature end-to-end by creating a single source of truth for types. The tool generates shared types, validation schemas, API routes, and frontend components that all import from the same definitions, ensuring consistency across backend and frontend.

How This Skill Works

It adapts to your configured stack by reading config/defaults.md, gathers feature details, and produces a central types.ts with interfaces like Entity, CreateEntityInput, UpdateEntityInput, and EntityListResponse. It then generates Zod schemas, Next.js API routes, and a React component, all wired to the shared types and validated at build time, followed by a TypeScript refactor pass.

When to Use It

  • You need a new module with shared types for backend and frontend.
  • You want end-to-end scaffolding for a full feature (backend + frontend).
  • You are creating both API routes and UI for a feature with consistent validation.
  • You want to maintain a single source of truth for types and responses across layers.
  • You need a final manifest and dependency graph to verify imports and file relationships.

Quick Start

  1. Step 1: Gather requirements (feature name, entity, fields) or read from an existing Prisma model.
  2. Step 2: Generate shared types at src/types/{feature}.ts and wire all layers to import from it.
  3. Step 3: Run zod-schema-generator, nextjs-route-generator, react-component-generator, then a TypeScript refactor pass and review the manifest.

Best Practices

  • Start with a single shared types file (src/types/{feature}.ts) and import everywhere.
  • Keep API response shapes in sync with frontend types to avoid drift.
  • Run the TypeScript refactorer pass after all files are generated.
  • Verify cross-file imports and fix any unresolved references during the manifest step.
  • Test end-to-end (API calls and UI rendering) after scaffolding.

Example Use Cases

  • Task management feature with Task and TaskListResponse types.
  • User profile feature using a shared User entity and UpdateUserInput.
  • Product catalog feature with CreateProductInput and ProductListResponse.
  • Blog post feature with Post, CreatePostInput, and PostListResponse.
  • Invoice feature with BillingInfo and InvoiceInput across backend and frontend.

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers