pre-claude

日本語版

"pre"-claude is a TUI tool for efficiently creating complex prompts with structured forms for Claude Code.

Define templates in TypeScript config files to share with your team and enable reproducible prompt workflows.

Works seamlessly with your existing Claude Code setup including MCP and Skills.

Concepts

Scenario

Defines a document type (e.g., design doc, meeting notes). Configure prompt templates and output destinations.

Step

Each page of the form wizard. Group related fields together for easier input.

| Scenario Selection | Form Input | Preview | |:---:|:---:|:---:| | | | |

Requirements

• Node.js 18+
• Claude Code

Installation

npm install pre-claude

Usage

# Try the example
npx pre-claude example
npx pre-claude example --lang ja

# Create a config file
npx pre-claude init

# Run the TUI
npx pre-claude run --config ./pre-claude.config.ts

See examples/ for configuration examples.

Screens

The TUI consists of 3 screens.

Scenario Selection Screen

A 2-pane screen displayed at startup. Select a scenario in the left pane, then choose to create new or edit an existing document in the right pane.

| Key | Action | |-----|--------| | ↑↓ / j/k | Navigate items | | → / l / Enter | Select / Move to right pane | | ← / h / Esc | Move to left pane | | q | Quit |

Form Input Screen

A 3-panel layout with step tabs at the top, field list on the left, and editing area on the right.

| Key | Action | |-----|--------| | ←→ / h/l | Navigate steps | | ↑↓ / j/k | Navigate fields | | Enter | Start editing / Confirm | | Esc | Cancel | | n / p | Next / Previous step | | d | Delete repeatable item | | g | Generate preview | | q | Go back |

Preview Screen

AI generates the document and displays the result with streaming.

| Key | Action | |-----|--------| | ↑↓ / j/k | Scroll | | r | Regenerate | | s | Save | | c | Continue in Claude Code | | i | Show formData / aiContext | | Esc / q | Go back |

Press c to continue the conversation in Claude Code, inheriting the current session.

Configuration

Basic Structure

import { defineConfig, defineScenario, type Step } from 'pre-claude';

const steps = [
  {
    slug: 'overview',
    title: 'Overview',
    description: 'Basic project information',
    name: 'overview',
    fields: [
      {
        id: 'title',
        type: 'input',
        label: 'Title',
        description: 'Project name',
        required: true,
      },
    ],
  },
] as const satisfies Step[];

export default defineConfig({
  scenarios: [
    defineScenario({
      id: 'design-doc',
      name: 'Design Document',
      steps,
      prompt: ({ formData, aiContext }) =>
        `Create a design document based on:\n${JSON.stringify({ formData, aiContext }, null, 2)}`,
      outputDir: './docs',
    }),
  ],
});

Scenario

| Property | Type | Required | Description | |----------|------|:--------:|-------------| | id | string | ○ | Unique identifier | | name | string | ○ | Display name | | steps | Step[] | ○ | Form wizard steps | | prompt | (params) => string | ○ | Prompt generator function | | outputDir | string | | Output directory | | filename | string \| function | | Filename |

The prompt function receives the following arguments. You can view the actual values by pressing i on the preview screen.

formData

An object containing the values entered in the form.

{
  [stepName: string]: {
    [fieldId: string]: string | boolean | Array<{ [fieldId: string]: string | boolean }>
  }
}

Example:

{
  "overview": {
    "title": "My Project",
    "priority": "high"
  },
  "features": {
    "items": [
      { "name": "Feature 1", "desc": "Description 1" },
      { "name": "Feature 2", "desc": "Description 2" }
    ]
  }
}

aiContext

Metadata such as field labels and descriptions. Helps the AI understand the meaning of each field.

{
  [stepName: string]: {
    _step: { title: string; description: string };
    [fieldId: string]: { label: string; description: string }
  }
}

Example:

{
  "overview": {
    "_step": { "title": "Overview", "description": "Basic project information" },
    "title": { "label": "Title", "description": "Project name" },
    "priority": { "label": "Priority", "description": "Select priority" }
  }
}

Step

| Property | Type | Description | |----------|------|-------------| | slug | string | URL-friendly identifier | | title | string | Title | | description | string | Description | | name | string | Key name in formData | | fields | Field[] | Field array |

Field Types

input

{
  id: 'title',
  type: 'input',
  label: 'Title',
  description: 'Description',
  placeholder: 'Placeholder',
  required: true,
  inputType: 'text', // 'text' | 'date' | 'url'
  suggestions: ['Option 1', 'Option 2'], // Autocomplete
  default: 'Default value',
}

textarea

{
  id: 'description',
  type: 'textarea',
  label: 'Description',
  description: 'Detailed description',
  rows: 5,
}

select

{
  id: 'priority',
  type: 'select',
  label: 'Priority',
  description: 'Select priority',
  options: [
    { value: 'low', label: 'Low' },
    { value: 'medium', label: 'Medium' },
    { value: 'high', label: 'High' },
  ],
  default: 'medium',
}

checkbox

{
  id: 'agree',
  type: 'checkbox',
  label: 'I agree',
  description: 'Agreement to terms',
  required: true,
}

Layouts

repeatable

A repeatable field that can be dynamically added or removed.

{
  type: 'repeatable',
  id: 'features',
  label: 'Features',
  minCount: 1,
  defaultCount: 2,
  field: {
    type: 'group',
    fields: [
      { id: 'name', type: 'input', label: 'Name', description: '' },
      { id: 'desc', type: 'textarea', label: 'Description', description: '', rows: 2 },
    ],
  },
}

formData becomes an array:

{
  features: [
    { name: 'Feature 1', desc: 'Description 1' },
    { name: 'Feature 2', desc: 'Description 2' },
  ]
}

group

Groups multiple fields together. Used within repeatable.

Conditional Display

Use the when property to specify display conditions for fields.

// Simple conditions
{ ..., when: { field: 'priority', is: 'high' } }
{ ..., when: { field: 'priority', is: ['high', 'medium'] } }
{ ..., when: { field: 'priority', isNot: 'low' } }
{ ..., when: { field: 'title', isNotEmpty: true } }
{ ..., when: { field: 'notes', isEmpty: true } }

// AND condition
{
  ...,
  when: {
    and: [
      { field: 'priority', is: 'high' },
      { field: 'type', is: 'feature' }
    ]
  }
}

// OR condition
{
  ...,
  when: {
    or: [
      { field: 'priority', is: 'high' },
      { field: 'type', is: 'urgent' }
    ]
  }
}

// Reference fields from other steps
{ ..., when: { field: 'overview.priority', is: 'high' } }

Type Safety

Using defineScenario with as const satisfies Step[] enables type inference for formData.

const scenario = defineScenario({
  id: 'my-scenario',
  name: 'My Scenario',
  steps,
  prompt: ({ formData }) => {
    // formData.overview?.title is string | undefined
    return `Title: ${formData.overview?.title ?? 'Untitled'}`;
  },
  filename: ({ formData, timestamp }) =>
    `${formData.overview?.title ?? 'untitled'}-${timestamp}.md`,
});

License

MIT