• Projects
  • Service
  • About
  • branding.bz
  • Podcast
  • Tips
  • FAQ
  • Recruit
  • Download
  • Contact
  • branding.bz(ブランド構築SaaS)
  • DESIGN NOW(デザインメディア)
  • X
  • LinkedIn
  • Spotify
  • Facebook

213-0011 神奈川県川崎市高津区久本3-6-7-303

© 2026 ID INC. All rights reserved

claude-skills/スキル
SKILLOfficialdevelopment

output-dev-create-skeleton

プラグイン
outputai
ソース
GitHub で見る ↗
説明

Output SDK CLI を用いてワークフロー(自動処理の流れ)の骨組みファイルを生成します。 次のような場合に使用: - 新しいワークフローを始めるとき - プロジェクトの構造を作成するとき - 生成されたファイルのレイアウトを理解したいとき

原文を表示

Generate workflow skeleton files using the Output SDK CLI. Use when starting a new workflow, scaffolding project structure, or understanding the generated file layout.

ユースケース
  • 新しいワークフローを始めるとき
  • プロジェクトの構造を作成するとき
  • 生成されたファイルのレイアウトを理解したいとき
本文(日本語訳)

Output SDK CLI でワークフロー基本テンプレートを生成する

概要

このスキルでは、Output SDK CLI を使ってワークフローの基本テンプレートを生成する方法を説明します。テンプレートは必要なファイルと適切な構成をすべて備えたスタート地点を提供します。

次のような場合に使用

  • 新しいワークフローを一から構築する場合
  • ワークフローに必要なファイルを確認したい場合
  • 実装前に基本構成を準備したい場合
  • Output SDK ワークフローのパターンを学ぶ場合

CLI コマンド

npx output workflow generate --skeleton

このコマンドは新しいワークフローの基本的なファイル構成を作成します。

生成されるファイル構成

テンプレート生成実行後、以下の構造が作成されます。

src/workflows/{workflow-name}/
├── workflow.ts      # ワークフロー定義ファイル
├── steps.ts         # ステップ関数定義
├── types.ts         # 型スキーマ定義
├── prompts/         # プロンプトファイル用フォルダ
└── scenarios/       # テストシナリオ用フォルダ

プロジェクト構成全体

テンプレートは Output SDK の標準プロジェクト構成内に作成されます。

src/
├── shared/                      # 共有コード(必要に応じて作成)
│   ├── clients/                 # API クライアント
│   ├── utils/                   # ユーティリティ関数
│   ├── services/                # ビジネスロジック
│   ├── steps/                   # 共有ステップ(任意)
│   └── evaluators/              # 評価器(任意)
└── workflows/
    └── {workflow-name}/         # あなたの新規ワークフロー
        ├── workflow.ts
        ├── steps.ts
        ├── types.ts
        ├── prompts/
        └── scenarios/

生成後の手順

ステップ 1: 生成されたファイルを確認する

生成後、各ファイルを確認してテンプレート構造を理解します。

workflow.ts — 基本的なワークフロー定義テンプレートを含みます。

import { workflow, z } from '@outputai/core';
import { exampleStep } from './steps.js';
import { WorkflowInputSchema } from './types.js';

export default workflow( {
  name: 'workflowName',
  description: 'Workflow description',
  inputSchema: WorkflowInputSchema,
  outputSchema: z.object( { result: z.string() } ),
  fn: async input => {
    const result = await exampleStep( input );
    return { result };
  }
} );

steps.ts — ステップのサンプルテンプレートを含みます。

import { step, z } from '@outputai/core';
import { ExampleStepInputSchema } from './types.js';

export const exampleStep = step( {
  name: 'exampleStep',
  description: 'Example step description',
  inputSchema: ExampleStepInputSchema,
  outputSchema: z.object( { result: z.string() } ),
  fn: async input => {
    // ステップの処理をここに実装
    return { result: 'example' };
  }
} );

types.ts — スキーマ定義を含みます。

import { z } from '@outputai/core';

export const WorkflowInputSchema = z.object( {
  // 入力フィールドを定義
} );

export type WorkflowInput = z.infer<typeof WorkflowInputSchema>;

ステップ 2: ワークフロー名をカスタマイズする

  1. フォルダ名を自分のワークフロー名に変更
  2. workflow.ts の name プロパティを更新
  3. ネーミング規則に従う:
    • フォルダ: snake_case(例:image_processor)
    • ワークフロー名: camelCase(例:imageProcessor)

ステップ 3: スキーマを定義する

types.ts に実際の入力・出力スキーマを定義します。

import { z } from '@outputai/core';

export const WorkflowInputSchema = z.object( {
  content: z.string().describe( 'Content to process' ),
  options: z.object( {
    format: z.enum( [ 'json', 'text' ] ).default( 'json' )
  } ).optional()
} );

export type WorkflowInput = z.infer<typeof WorkflowInputSchema>;
export type WorkflowOutput = { processed: string };

関連スキル: output-dev-types-file

ステップ 4: ステップを実装する

サンプルステップを実際のステップ処理に置き換えます。

import { step, z, FatalError, ValidationError } from '@outputai/core';
import { ProcessContentInputSchema } from './types.js';

export const processContent = step( {
  name: 'processContent',
  description: 'Process the input content',
  inputSchema: ProcessContentInputSchema,
  outputSchema: z.object( { processed: z.string() } ),
  fn: async ( { content } ) => {
    // あなたのロジックを実装
    return { processed: content.toUpperCase() };
  }
} );

関連スキル: output-dev-step-function

ステップ 5: ワークフローを更新する

ステップをワークフロー内で組み合わせます。

import { workflow, z } from '@outputai/core';
import { processContent } from './steps.js';
import { WorkflowInputSchema } from './types.js';

export default workflow( {
  name: 'contentProcessor',
  description: 'Process content with custom logic',
  inputSchema: WorkflowInputSchema,
  outputSchema: z.object( { processed: z.string() } ),
  fn: async input => {
    const result = await processContent( { content: input.content } );
    return result;
  }
} );

関連スキル: output-dev-workflow-function

ステップ 6: プロンプトを追加する(必要な場合)

ワークフローが LLM 操作を使う場合、プロンプトファイルを作成します。

prompts/
└── analyzeContent@v1.prompt

関連スキル: output-dev-prompt-file

ステップ 7: テストシナリオを作成する

scenarios フォルダにテスト入力ファイルを追加します。

scenarios/
├── basic_input.json
└── complex_input.json

関連スキル: output-dev-scenario-file

ステップ 8: 共有リソースをセットアップする(必要な場合)

ワークフローが共有クライアント、ユーティリティ、またはサービスを必要とする場合:

# 共有ディレクトリを作成
mkdir -p src/shared/clients
mkdir -p src/shared/utils
mkdir -p src/shared/services

ステップで共有リソースをインポートします。

import { GeminiService } from '../../shared/clients/gemini_client.js';
import { formatDate } from '../../shared/utils/date_helpers.js';

関連スキル: output-dev-http-client-create

検証

カスタマイズ後、ワークフローを検証します。

1. 利用可能なワークフローを一覧表示

npx output workflow list

自分のワークフローが表示されるはずです。

2. テスト入力で実行

npx output workflow run {workflowName} --input path/to/scenarios/basic_input.json

3. エラーを確認

テンプレート生成後の一般的な問題:

  • インポートパスが .js 拡張子を含まない
  • スキーマが zod から @outputai/core からインポートされていない
  • ステップのエクスポートが忘れられている

カスタマイズのコツ

複数のステップを追加する

// steps.ts
export const stepOne = step( { ... } );
export const stepTwo = step( { ... } );
export const stepThree = step( { ... } );

// workflow.ts
const resultOne = await stepOne( input );
const resultTwo = await stepTwo( resultOne );
const resultThree = await stepThree( resultTwo );

ステップを並列実行する

// workflow.ts
const [ resultA, resultB ] = await Promise.all( [
  stepA( input ),
  stepB( input )
] );

条件付きステップ

// workflow.ts
if ( input.processImages ) {
  await processImages( input );
}

大規模なワークフロー — フォルダベースの整理

ステップが多い場合はフォルダベースの構成を使用します。

src/workflows/{workflow-name}/
├── workflow.ts
├── steps/               # 単一ファイルではなくフォルダ
│   ├── fetch_data.ts
│   ├── process.ts
│   └── validate.ts
├── types.ts
└── ...

確認チェックリスト

テンプレートの生成とカスタマイズ後:

  • [ ] ワークフローフォルダが snake_case に従っている
  • [ ] workflow.ts の名前が camelCase である
  • [ ] すべてのインポートが .js 拡張子を含む
  • [ ] z が @outputai/core からインポートされている
  • [ ] 型が types.ts に定義されている
  • [ ] ステップが steps.ts または steps/ フォルダに定義されている
  • [ ] 少なくとも 1 つのテストシナリオが存在する
  • [ ] npx output workflow list でワークフローが表示される
  • [ ] 共有リソース(使用する場合)が src/shared/ にある

関連スキル

  • output-dev-folder-structure — フォルダ構成全体を理解する
  • output-dev-workflow-function — workflow.ts の詳細ドキュメント
  • output-dev-step-function — steps.ts の詳細ドキュメント
  • output-dev-types-file — Zod スキーマの作成
  • output-dev-prompt-file — LLM プロンプトの追加
  • output-dev-scenario-file — テストシナリオの作成
  • output-workflow-run — ワークフロー実行
  • output-dev-code-style — コード規約
  • output-workflow-list — 利用可能なワークフロー一覧表示
原文(English)を表示

Generate Workflow Skeleton with Output SDK CLI

Overview

This skill documents how to use the Output SDK CLI to generate a workflow skeleton. The skeleton provides a starting point with all required files and proper structure.

When to Use This Skill

  • Starting a new workflow from scratch
  • Understanding what files are needed for a workflow
  • Scaffolding the basic structure before implementation
  • Learning the Output SDK workflow patterns

CLI Command

npx output workflow generate --skeleton

This command creates the basic file structure for a new workflow.

Generated File Structure

After running the skeleton generator, you will have:

src/workflows/{workflow-name}/
├── workflow.ts      # Main workflow definition
├── steps.ts         # Step function definitions
├── types.ts         # Zod schemas and types
├── prompts/         # Empty folder for prompt files
└── scenarios/       # Empty folder for test scenarios

Project Structure Overview

The skeleton is created within the standard Output SDK project structure:

src/
├── shared/                      # Shared code (create if needed)
│   ├── clients/                 # API clients
│   ├── utils/                   # Utility functions
│   ├── services/                # Business logic services
│   ├── steps/                   # Shared steps (optional)
│   └── evaluators/              # Shared evaluators (optional)
└── workflows/
    └── {workflow-name}/         # Your new workflow
        ├── workflow.ts
        ├── steps.ts
        ├── types.ts
        ├── prompts/
        └── scenarios/

Post-Generation Steps

Step 1: Review Generated Files

After generation, review each file to understand the template structure:

workflow.ts - Contains a basic workflow template:

import { workflow, z } from '@outputai/core';
import { exampleStep } from './steps.js';
import { WorkflowInputSchema } from './types.js';

export default workflow( {
  name: 'workflowName',
  description: 'Workflow description',
  inputSchema: WorkflowInputSchema,
  outputSchema: z.object( { result: z.string() } ),
  fn: async input => {
    const result = await exampleStep( input );
    return { result };
  }
} );

steps.ts - Contains example step template:

import { step, z } from '@outputai/core';
import { ExampleStepInputSchema } from './types.js';

export const exampleStep = step( {
  name: 'exampleStep',
  description: 'Example step description',
  inputSchema: ExampleStepInputSchema,
  outputSchema: z.object( { result: z.string() } ),
  fn: async input => {
    // Implement step logic here
    return { result: 'example' };
  }
} );

types.ts - Contains schema definitions:

import { z } from '@outputai/core';

export const WorkflowInputSchema = z.object( {
  // Define input fields
} );

export type WorkflowInput = z.infer<typeof WorkflowInputSchema>;

Step 2: Customize the Workflow Name

  1. Update the folder name to match your workflow
  2. Update the name property in workflow.ts
  3. Follow naming conventions:
    • Folder: snake_case (e.g., image_processor)
    • Workflow name: camelCase (e.g., imageProcessor)

Step 3: Define Your Schemas

In types.ts, define your actual input/output schemas:

import { z } from '@outputai/core';

export const WorkflowInputSchema = z.object( {
  content: z.string().describe( 'Content to process' ),
  options: z.object( {
    format: z.enum( [ 'json', 'text' ] ).default( 'json' )
  } ).optional()
} );

export type WorkflowInput = z.infer<typeof WorkflowInputSchema>;
export type WorkflowOutput = { processed: string };

Related Skill: output-dev-types-file

Step 4: Implement Your Steps

Replace the example step with your actual step implementations:

import { step, z, FatalError, ValidationError } from '@outputai/core';
import { ProcessContentInputSchema } from './types.js';

export const processContent = step( {
  name: 'processContent',
  description: 'Process the input content',
  inputSchema: ProcessContentInputSchema,
  outputSchema: z.object( { processed: z.string() } ),
  fn: async ( { content } ) => {
    // Implement your logic
    return { processed: content.toUpperCase() };
  }
} );

Related Skill: output-dev-step-function

Step 5: Update the Workflow

Wire up your steps in the workflow:

import { workflow, z } from '@outputai/core';
import { processContent } from './steps.js';
import { WorkflowInputSchema } from './types.js';

export default workflow( {
  name: 'contentProcessor',
  description: 'Process content with custom logic',
  inputSchema: WorkflowInputSchema,
  outputSchema: z.object( { processed: z.string() } ),
  fn: async input => {
    const result = await processContent( { content: input.content } );
    return result;
  }
} );

Related Skill: output-dev-workflow-function

Step 6: Add Prompts (If Needed)

If your workflow uses LLM operations, create prompt files:

prompts/
└── analyzeContent@v1.prompt

Related Skill: output-dev-prompt-file

Step 7: Create Test Scenarios

Add test input files to the scenarios folder:

scenarios/
├── basic_input.json
└── complex_input.json

Related Skill: output-dev-scenario-file

Step 8: Set Up Shared Resources (If Needed)

If your workflow needs shared clients, utilities, or services:

# Create shared directories if they don't exist
mkdir -p src/shared/clients
mkdir -p src/shared/utils
mkdir -p src/shared/services

Import shared resources in your steps:

import { GeminiService } from '../../shared/clients/gemini_client.js';
import { formatDate } from '../../shared/utils/date_helpers.js';

Related Skill: output-dev-http-client-create

Verification

After customization, verify your workflow:

1. List Available Workflows

npx output workflow list

Your workflow should appear in the list.

2. Run with Test Input

npx output workflow run {workflowName} --input path/to/scenarios/basic_input.json

3. Check for Errors

Common issues after skeleton generation:

  • Import paths missing .js extension
  • Schema imported from zod instead of @outputai/core
  • Missing step exports

Customization Tips

Adding Multiple Steps

// steps.ts
export const stepOne = step( { ... } );
export const stepTwo = step( { ... } );
export const stepThree = step( { ... } );

// workflow.ts
const resultOne = await stepOne( input );
const resultTwo = await stepTwo( resultOne );
const resultThree = await stepThree( resultTwo );

Parallel Step Execution

// workflow.ts
const [ resultA, resultB ] = await Promise.all( [
  stepA( input ),
  stepB( input )
] );

Conditional Steps

// workflow.ts
if ( input.processImages ) {
  await processImages( input );
}

Large Workflows - Folder-Based Organization

For workflows with many steps, use folder-based organization:

src/workflows/{workflow-name}/
├── workflow.ts
├── steps/               # Folder instead of single file
│   ├── fetch_data.ts
│   ├── process.ts
│   └── validate.ts
├── types.ts
└── ...

Verification Checklist

After generating and customizing the skeleton:

  • [ ] Workflow folder follows snake_case naming
  • [ ] workflow.ts has correct name in camelCase
  • [ ] All imports use .js extension
  • [ ] z is imported from @outputai/core
  • [ ] Types are defined in types.ts
  • [ ] Steps are defined in steps.ts or steps/ folder
  • [ ] At least one test scenario exists
  • [ ] Workflow appears in npx output workflow list
  • [ ] Shared resources (if any) are in src/shared/

Related Skills

  • output-dev-folder-structure - Understanding the complete folder layout
  • output-dev-workflow-function - Detailed workflow.ts documentation
  • output-dev-step-function - Detailed steps.ts documentation
  • output-dev-types-file - Creating Zod schemas
  • output-dev-prompt-file - Adding LLM prompts
  • output-dev-scenario-file - Creating test scenarios
  • output-workflow-run - Running workflows
  • output-dev-code-style - Code style conventions
  • output-workflow-list - Listing available workflows

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。