alaeddineyettou-design/dynamic-workflows-claude-code

dynamic-workflows-claude-code は何をしますか？

⚡ 15スライドのインタラクティブなHTMLプレゼンテーション：Claude Code（Opus 4.8）における動的ワークフロー — スキル、サブエージェント、エージェントチーム、ワークフローの比較、コスト段階、/goal と Workflow の違い、UltraCode。依存関係ゼロ。

概要

このプレゼンテーションは、Claude Code（Opus 4.8）の動的ワークフロー機能を視覚的に理解するためのインタラクティブHTMLドキュメントです。以下のトピックをカバーします：

• スキル vs サブエージェント vs エージェントチーム vs ワークフロー：それぞれの定義、ユースケース、長所と短所をスライド形式で比較
• コストラダー：各アプローチのコスト効率を段階的に表示
• /goal と Workflow の違い：目的指向の /goal コマンドと、手続き型のワークフローを明確に区別
• UltraCode：高度なワークフロー自動化機能の活用方法

特徴

• ゼロ依存：外部ライブラリやフレームワーク不要。ブラウザで直接開くだけ
• インタラクティブ：各スライドをクリックで切り替え可能、視覚的なデモンストレーション
• 実践的：実際のClaude Code環境でそのまま使えるワークフローパターンを紹介

使い方

1. プレゼンテーションファイル（例：presentation.html）を任意のブラウザで開きます。
2. スライド下部のナビゲーションボタン（「次へ」「前へ」）またはキーボードの矢印キーでスライドを移動します。
3. 各スライドに表示されたコードスニペットやCLIコマンドを、必要に応じてClaude Codeのワークフロー定義にコピー＆ペーストしてください。

サポートプラットフォーム

• Claude Code（Opus 4.8）：プレゼンテーション内で説明するすべての機能は、Claude CodeのOpusモデルを前提としています。
• 任意のブラウザ：HTMLファイルはモダンブラウザ（Chrome, Firefox, Edge, Safari）で動作確認済み。

例：ワークフロー定義の一部

{
  "name": "example-workflow",
  "steps": [
    {
      "name": "step1",
      "command": "run_tool",
      "params": { "tool": "codebase_search", "query": "example" }
    }
  ]
}

制限事項と注意点

• このプレゼンテーションは教育目的であり、実際のClaude Code設定を自動的に変更するものではありません。
• プレゼンテーション内のコマンド例は、ご自身の環境に合わせて調整してください。
• 依存関係ゼロですが、最新のHTML5対応ブラウザが必要です。

関連リソース

• Claude Codeの公式ドキュメント
• Claude Codeワークフローガイド