app:
  description: 'フロントエンドコンポーネント設計書生成ワークフロー: 画面要件と使用フレームワークからAtomic Design準拠のコンポーネント設計、TypeScript定義、データフロー、Storybookサンプル、実装上の注意点を生成します。'
  icon: 🧩
  icon_background: '#FFEAD5'
  mode: workflow
  name: FE Component Spec Generator
  use_icon_as_answer_icon: false
kind: app
version: 0.1.5
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      image:
        enabled: false
    opening_statement: ''
    suggested_questions: []
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
  graph:
    edges:
    - data:
        sourceType: start
        targetType: llm
      id: start-to-llm1
      source: start
      target: llm1
    - data:
        sourceType: llm
        targetType: llm
      id: llm1-to-llm2
      source: llm1
      target: llm2
    - data:
        sourceType: llm
        targetType: llm
      id: llm2-to-llm3
      source: llm2
      target: llm3
    - data:
        sourceType: llm
        targetType: llm
      id: llm3-to-llm4
      source: llm3
      target: llm4
    - data:
        sourceType: llm
        targetType: llm
      id: llm4-to-llm5
      source: llm4
      target: llm5
    - data:
        sourceType: llm
        targetType: end
      id: llm5-to-end
      source: llm5
      target: end
    nodes:
    - data:
        title: 開始
        type: start
        variables:
        - label: query
          max_length: 2048
          options: []
          required: true
          type: paragraph
          variable: query
      height: 90
      id: start
      position:
        x: 80
        y: 282
      type: custom
      width: 244
    - data:
        title: コンポーネントツリー生成
        type: llm
        model:
          provider: openai
          name: gpt-5-mini
          mode: chat
          completion_params:
            temperature: 0.2
            max_output_tokens: 800
        prompt_template:
        - role: system
          text: あなたはフロントエンドアーキテクトの専門家です。Atomic Design (Atoms/Molecules/Organisms/Templates/Pages)
            に準拠したコンポーネント設計が得意です。
        - role: user
          text: "画面要件と使用フレームワークをもとに、まずコンポーネントツリーを生成してください。入力: {{#start.query#}}\n\n\
            出力フォーマット: JSONで以下のキーを持つオブジェクトにしてください。\n{\n  \"atoms\": [{\"name\":\"\"\
            ,\"description\":\"\",\"responsibility\":\"\"}],\n  \"molecules\": [...],\n\
            \  \"organisms\": [...],\n  \"templates\": [...],\n  \"pages\": [...]\n\
            }\n\n各コンポーネントには1) 簡潔な説明 2) 責務（responsibility）を含めてください。回答は日本語で。簡潔に、必要なら箇条書きで。"
        vision:
          enabled: false
        memory: null
        context:
          enabled: false
      height: 90
      id: llm1
      position:
        x: 380
        y: 282
      type: custom
      width: 244
    - data:
        title: Props/State/Event (TypeScript)
        type: llm
        model:
          provider: openai
          name: gpt-5-mini
          mode: chat
          completion_params:
            temperature: 0.2
            max_output_tokens: 900
        prompt_template:
        - role: system
          text: あなたはTypeScriptでのコンポーネント設計に精通したフロントエンドエンジニアです。Props/State/Eventの型設計に厳密性を持って取り組みます。
        - role: user
          text: '以下を参照して、各コンポーネントに対してTypeScriptの型定義を生成してください。

            - 画面要件: {{#start.query#}}

            - コンポーネントツリー: {{#llm1.text#}}


            出力要件:

            - 各コンポーネントごとに <ComponentName>Props / <ComponentName>State / イベントコールバックの型
            (例: onChange: (value: string) => void) を示す。

            - Propsは必須/任意を明示する（?: を使う）。

            - Stateは内部状態を表すinterfaceとして示す。

            - できるだけ現実的なフィールド名と型を使う。


            出力はTypeScript構文ブロック形式で、コンポーネントごとに分けてください。日本語で簡潔な説明を各ブロックの上に付けてください。'
        vision:
          enabled: false
        memory: null
        context:
          enabled: false
      height: 90
      id: llm2
      position:
        x: 680
        y: 282
      type: custom
      width: 244
    - data:
        title: データフロー図(状態管理方針)
        type: llm
        model:
          provider: openai
          name: gpt-5-mini
          mode: chat
          completion_params:
            temperature: 0.2
            max_output_tokens: 700
        prompt_template:
        - role: system
          text: 'あなたはアプリケーションの状態管理設計の専門家です。


            ---


            【最終出力フォーマット (この指示が最優先)】

            最終出力は **読みやすい日本語の Markdown** で返してください。JSON

            配列・オブジェクトをそのまま出力してはいけません。

            - 見出し (## / ###) でセクションを区切る

            - リスト (- / 1.) や表 (| ... |) で構造化

            - 各項目の意図や根拠が分かるよう短い説明文を添える

            - 営業デモで顧客に直接見せられる体裁にする


            (構造化されたデータ項目を内部で扱うのは構いませんが、出力時に Markdown

            に変換してください。)'
        - role: user
          text: '画面要件とコンポーネント構成を参照して、状態管理の方針（データフロー図に相当するテキスト説明）を作成してください。

            - 画面要件: {{#start.query#}}

            - コンポーネントツリー: {{#llm1.text#}}

            - Props/State: {{#llm2.text#}}


            含める内容:

            1) グローバル/ローカル状態の分離基準（どのデータをContext/Redux/Zustand/Pinia等で管理するか）

            2) データの読み書きフロー（API -> ストア -> コンポーネント、あるいは親props経由など）

            3) 更新タイミングとデータ正規化の方針

            4) 必要なら簡易なASCIIダイアグラムでフローを示す


            フレームワーク依存の推奨ライブラリがあれば明示してください（例: ReactならZustand/Redux、VueならPinia）。日本語で。'
        vision:
          enabled: false
        memory: null
        context:
          enabled: false
      height: 90
      id: llm3
      position:
        x: 980
        y: 282
      type: custom
      width: 244
    - data:
        title: Storybookサンプル概要
        type: llm
        model:
          provider: openai
          name: gpt-5-mini
          mode: chat
          completion_params:
            temperature: 0.2
            max_output_tokens: 700
        prompt_template:
        - role: system
          text: 'あなたはStorybookのベストプラクティスに詳しいフロントエンド開発者です。


            ---


            【最終出力フォーマット (この指示が最優先)】

            最終出力は **読みやすい日本語の Markdown** で返してください。JSON

            配列・オブジェクトをそのまま出力してはいけません。

            - 見出し (## / ###) でセクションを区切る

            - リスト (- / 1.) や表 (| ... |) で構造化

            - 各項目の意図や根拠が分かるよう短い説明文を添える

            - 営業デモで顧客に直接見せられる体裁にする


            (構造化されたデータ項目を内部で扱うのは構いませんが、出力時に Markdown

            に変換してください。)'
        - role: user
          text: '画面要件、コンポーネントツリー、Props/Stateを参照して、主要コンポーネントのStorybookサンプルコード概要を作成してください。

            - 画面要件: {{#start.query#}}

            - コンポーネントツリー: {{#llm1.text#}}

            - Props/State: {{#llm2.text#}}


            出力要件:

            - 各主要コンポーネントについて代表的なstoryのタイトルとstoriesのargs例を示す。

            - Storybookでのテスト観点（アクセシビリティ、インタラクション、表示バリエーション）を列挙。

            - 可能ならサンプルコードスニペット（構成の概要、argsの型例）を示す。


            日本語で、読みやすく段落分けしてください。'
        vision:
          enabled: false
        memory: null
        context:
          enabled: false
      height: 90
      id: llm4
      position:
        x: 1280
        y: 282
      type: custom
      width: 244
    - data:
        title: 実装上の注意点（Perf・A11y等）と最終統合
        type: llm
        model:
          provider: openai
          name: gpt-5-mini
          mode: chat
          completion_params:
            temperature: 0.2
            max_output_tokens: 900
        prompt_template:
        - role: system
          text: 'あなたはパフォーマンス最適化とアクセシビリティ設計に精通したシニアフロントエンドエンジニアです。最終出力はドキュメントとしてまとまった形式にしてください。


            ---


            【最終出力フォーマット (この指示が最優先)】

            最終出力は **読みやすい日本語の Markdown** で返してください。JSON

            配列・オブジェクトをそのまま出力してはいけません。

            - 見出し (## / ###) でセクションを区切る

            - リスト (- / 1.) や表 (| ... |) で構造化

            - 各項目の意図や根拠が分かるよう短い説明文を添える

            - 営業デモで顧客に直接見せられる体裁にする


            (構造化されたデータ項目を内部で扱うのは構いませんが、出力時に Markdown

            に変換してください。)'
        - role: user
          text: '以下の情報を統合して、最終的な設計書を生成してください。各セクションを明確な見出しで分け、出力は日本語で行ってください。


            参照情報:

            - 画面要件: {{#start.query#}}

            - コンポーネントツリー: {{#llm1.text#}}

            - Props/State/Event: {{#llm2.text#}}

            - 状態管理/データフロー: {{#llm3.text#}}

            - Storybook概要: {{#llm4.text#}}


            最終ドキュメントに含める項目:

            1) コンポーネントツリーの要約（見出し）

            2) 各コンポーネントのProps/State/Event(TypeScript定義の抜粋)

            3) データフロー図の要点（図のテキスト表現）

            4) Storybookの使い方とサンプル（例の抜粋）

            5) 実装上の詳細な注意点（パフォーマンス改善案、アクセシビリティ要件、テストの観点、SSR/クライアント考慮など）


            およそのボリュームが大きくならないよう、各セクションは要点を押さえた形で記載してください。出力末尾に「追加で詳細が必要な場合の指示テンプレート」を一文で付けてください。


            この出力がワークフローの最終結果になります。'
        vision:
          enabled: false
        memory: null
        context:
          enabled: false
      height: 90
      id: llm5
      position:
        x: 1580
        y: 282
      type: custom
      width: 244
    - data:
        title: 終了
        type: end
        outputs:
        - value_selector:
          - llm5
          - text
          variable: result
      height: 90
      id: end
      position:
        x: 1880
        y: 282
      type: custom
      width: 244
  hash: null
