agent-progress-visualizer について
agent-progress-visualizerは、UI/UX Agent Skill Systemのプロジェクト向けに、タスク計画を平易なHTML進捗画面へ変換するスキルです。計画作成前の初期画面にも対応し、画面を正規のプロジェクト状態に沿って管理します。
主な機能
- 01タスク計画前の初期進捗画面の作成
- 02正規のタスク計画から状態を生成
- 03ユーザー向けHTML進捗画面の描画
- 04状態のずれとプライバシーリスクの確認
- 05判断事項の提示とフィードバック収集
- 06開発者ビューでの技術情報表示
活用シーン
- 01計画の準備中にプロジェクト進捗を表示
- 02タスクや成果物の変更後に画面を更新
- 03誤解を招く状態表示や情報漏えいを確認
- 04ユーザーの判断やコメントを引き継ぎ用に提示
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ sergekostenchuk/ ui-ux-agent-skill-system --skill agent-progress-visualizerインストール後、Claude Code で/agent-progress-visualizerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/progress-state.template.jsonreferences/data-source-contract.mddecision-framework.mdsafety-boundaries.md詳細
エージェント進捗ビジュアライザー
このスキルは、UI/UX Agent Skill System プロジェクト向けに、ユーザーに提示する進捗ダッシュボードを作成し、維持します。正規のタスク計画の状態を、技術に詳しくないユーザー向けの平易な HTML に変換します。
プロジェクトのタスクを実行することも、正規のステータスを管理することもありません。計画前は、project-request.json と workflow-log.jsonl は初期化用の情報源にすぎません。計画後は、TASK-PLAN.md が信頼できる唯一の情報源になります。
動作モード
bootstrap:システムが重要なユーザーリクエストを受け付けた直後、TASK-PLAN.mdがまだ存在しない段階で、最初に表示する進捗画面をすぐに作成します。init:TASK-PLAN.mdの作成後、タスク計画に基づく最初の進捗状態と進捗画面を作成または置き換えます。update:タスク計画、レポート、成果物、フィードバック、または wiki に変更があった後、状態と HTML を再生成します。review:既存の進捗画面に、情報源とのずれ、実態のないステータス、プライバシーの漏えい、または分かりにくい文言がないか確認します。feedback-gate:ユーザーの判断やコメントを提示し、それらをdesign-feedback-collectorに引き渡します。developer-view:顧客向けの文言を変更せずに、技術的なタスク ID、スキルのルート、依存関係、成果物のパスを表示します。
必須ワークフロー
- references/data-source-contract.md を読みます。
- references/decision-framework.md を読みます。
- references/safety-boundaries.md を読みます。
bootstrapモードでは、TASK-PLAN.mdを待たないでください。すぐにproject-request.jsonを作成し、workflow-log.jsonlに追記し、最小限のprogress-state.jsonを作成して、agent-progress-screen.htmlをレンダリングし、ブラウザーで開きます。ローカルプロジェクトの実装では、bootstrap_progress_screen.py --open-browserを使用します。- ブートストラップ画面が存在したら、
task-plan-v2-orchestratorにルーティングし、正規のTASK-PLAN.mdを作成します。 initまたはupdateモードでは、正規のTASK-PLAN.mdを探します。正規のタスク計画が存在せず、ブートストラップも実行されていない場合は、まずブートストラップを実行してから、task-plan-v2-orchestratorにルーティングします。- 正規のタスク計画のフィールド、レポート、成果物、フィードバックの状態、サニタイズ済みの wiki の決定事項に基づいて、
progress-state.jsonを作成または更新します。 - 宣言済みのジャーニーがある場合は、ジャーニーレジストリから
journey_alignmentを含め、スキップ、やり直し、ブロックの判断をworkflow-compliance-supervisorにルーティングします。 - 派生ビューとして
agent-progress-screen.htmlをレンダリングします。HTML だけを編集して状態変更とすることはできません。 - タスク計画に基づく
initモードでは、レンダリングした HTML を作成直後にブラウザーで開きます。ローカルプロジェクトの実装では、render_progress_screen.pyに--open-browserを渡します。updateモードでは、ユーザーから求められた場合、またはユーザーが確認中の場合にのみ開きます。 - ユーザーの選択、コメント、承認、却下について、永続的な記録の取得を
design-feedback-collectorにルーティングします。 - 複数セッションにわたる大規模プロジェクトでは、サニタイズ後に、承認済みの決定事項を
project-wiki-managerにルーティングします。 - 進捗画面の準備が整ったと伝える前に、整合性を検証します。
情報源の規則
bootstrapモードでは、project-request.jsonとworkflow-log.jsonlは一時的な起動時の情報源です。- 計画後は、
TASK-PLAN.mdが正規の情報源になります。 progress-state.jsonは、機械可読な派生状態です。agent-progress-screen.htmlは、派生したビジュアルレイヤーです。- Markdown、JSON、HTML の内容が一致しない場合は、まず Markdown またはジェネレーターを修正してから、再生成します。
- ブラウザーのみの
localStorageまたはクリップボードの状態を、判断の唯一の記録として認めることはできません。
生成するもの
ローカルのデフォルト成果物:
project-request.json
TASK-PLAN.md
progress-state.json
agent-progress-screen.html
workflow-log.jsonl
feedback/progress-feedback-register.schema.json
reports/progress-validation-summary.txt
ジェネレーターが存在する前にプロジェクトで初期状態が必要な場合は、assets/progress-state.template.json を使用します。
人間向け表示のルール
- カスタマーモードでは「Собираем поисковые запросы」と表示し、
serp-keyword-harvesterとは表示しません。 - カスタマーモードでは「Ждет ваш выбор」と表示し、
required_approvalsとは表示しません。 - 開発者モードでは、タスク ID、スキルのルート、依存関係、成果物のパスを表示してもかまいません。
- シークレット、トークン、リカバリーコード、Cookie、
.envの値、非公開のスクリーンショット、非公開の URL は絶対に表示しないでください。
検証
ローカルプロジェクトの実装を使用する場合は、次のチェックを優先してください。
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/bootstrap_progress_screen.py" --project-root "$PROJECT_ROOT" --project-title "$PROJECT_TITLE" --user-request "$USER_REQUEST" --journey-registry "$UIUX_SKILL_SYSTEM_ROOT/data/journey-registry.json" --declared-journey new-premium-site --open-browser
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/check_bootstrap_progress.py" --project-root "$PROJECT_ROOT"
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/generate_progress_state.py" --task-plan "$UIUX_SKILL_SYSTEM_ROOT/TASK-PLAN.md" --out "$UIUX_SKILL_SYSTEM_ROOT/progress-state.json"
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/render_progress_screen.py" --state "$UIUX_SKILL_SYSTEM_ROOT/progress-state.json" --out "$UIUX_SKILL_SYSTEM_ROOT/agent-progress-screen.html"
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/check_progress_consistency.py" --task-plan "$UIUX_SKILL_SYSTEM_ROOT/TASK-PLAN.md" --state "$UIUX_SKILL_SYSTEM_ROOT/progress-state.json" --html "$UIUX_SKILL_SYSTEM_ROOT/agent-progress-screen.html"
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/validate_workflow_compliance.py" --fixtures
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/no_secret_scan.py" "$UIUX_SKILL_SYSTEM_ROOT"
TASK-PLAN.mdの作成前に、ユーザー向けのプロジェクト進捗画面を初めて作成する場合は、ブラウザーを開いてブートストラップしてください。
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/bootstrap_progress_screen.py" --project-root "$PROJECT_ROOT" --project-title "$PROJECT_TITLE" --user-request "$USER_REQUEST" --open-browser
TASK-PLAN.mdが作成された後は、ブートストラップ状態をタスク計画から生成した状態に置き換えてください。
python3 "$UIUX_SKILL_SYSTEM_ROOT/scripts/render_progress_screen.py" --state "$PROJECT_ROOT/progress-state.json" --out "$PROJECT_ROOT/agent-progress-screen.html" --open-browser
スキルパッケージのチェック:
python3 $CODEX_HOME/skills/.system/skill-creator/scripts/quick_validate.py $CODEX_HOME/skills/agent-progress-visualizer
python3 $CODEX_HOME/skills/senior-skill-architect/scripts/lint_production_skill.py $CODEX_HOME/skills/agent-progress-visualizer
引き継ぎの形式
Progress mode:
Bootstrap request:
Canonical task plan:
Generated state:
Generated HTML:
User gates:
Feedback artifact:
Wiki sync:
Checks run:
Skipped checks:
Next owner: