by piguo45
単一HTMLで動く WBS/ガント+イナズマ線ビューア。データはJSON1枚・Claude Codeで保守 / Single-file WBS & Gantt viewer with inazuma (progress) line. Zero dependencies, AI-maintainable.
# Add to your Claude Code skills
git clone https://github.com/piguo45/single-file-wbsGuides for using api integration skills like single-file-wbs.
single-file-wbs is an open-source api integration skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by piguo45. 単一HTMLで動く WBS/ガント+イナズマ線ビューア。データはJSON1枚・Claude Codeで保守 / Single-file WBS & Gantt viewer with inazuma (progress) line. Zero dependencies, AI-maintainable. It has 54 GitHub stars.
single-file-wbs's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/piguo45/single-file-wbs" and add it to your Claude Code skills directory (see the Installation section above).
single-file-wbs is primarily written in HTML. It is open-source under piguo45 on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other API Integration skills you can browse and compare side by side. Open the API Integration category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh single-file-wbs against similar tools.
No comments yet. Be the first to share your thoughts!
Top skills in this category by stars
Unlocks once the catalog security scan passes (runs nightly).
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
単一HTMLで動く、ガントチャート(時間軸)+進捗軸ビュー(EVMに倣った完了率表示)+**イナズマ線(進捗線)**の WBS ビューア。サーバー・依存ライブラリ・ビルド不要。 画面上のアプリ名は WBS Viewer(
single-file-wbsは配布名=このリポジトリ)。

右上の 「時間/進捗」タブで切替。進捗ビュー(EVMに倣った完了率表示・実績/予定/遅れ):

AI時代の管理者(PL/テックリード)が、AIを含む少数精鋭チームを率いるためのローカルWBS。
人間は GUI で、AI は素の JSON と CLAUDE.md で、同じ計画を編集する。
CLAUDE.md で計画を保守できるwbs_viewer.html をダウンロードfile:// のままでOK)wbs_sample.json — 架空のサンプル・フォーマットのお手本wbs_roadmap.json — 本ツール自身の開発計画(実データ。Issue と連動し Claude Code が保守)自分の WBS は wbs_sample.json を雛形にコピーして作成(ファイル名は自由)。編集して保存 → 「更新」 で反映。
アップデートは新しい wbs_viewer.html を上書きするだけ(wbs.json のデータには触れません)。
CLAUDE.md 同梱で Claude Code がデータ形式を理解済み)▼/▶ をクリック。作業項目ヘッダの ▼/▶ で全展開・全たたみ(誤操作は Ctrl+Z で直前の表示に復元)「編集」ボタンを ON にすると画面上から直接編集できます。変更は約0.4秒後に wbs.json へ自動保存(保存状態は右上に常時表示)。
611・6/11 等の短縮入力/YYYY-MM-DD/📅 カレンダー(今年は MM-DD 表示)/追加 +/削除 ✕(確認あり)/上下移動 ⬆⬇「編集」ボタンを押すと、いきなりファイルの保存ダイアログが開きます。これは故障ではなく、Chrome のセキュリティ上、ブラウザがファイルに書き込む許可を得るには、保存ダイアログでユーザー自身がファイルを選ぶ必要があるためです(file:// で開くツールの宿命です)。
wbs.json と同じファイルをそのまま選んで「保存」「編集」を押した直後の画面(黄色い案内バーが出ます。この後ろに保存ダイアログが開いています):

この選び直しは毎回ではなく、Chrome を起動してから最初の編集 ON の1回だけです(Chrome を再起動するとまた必要)。

WBS が続かない最大の理由は**「更新の手間」**。このツールは表示ロジック(HTML)を固定しデータ(wbs.json)だけを編集する設計なので、Claude Code 等のAIにチャットで更新を任せられます。データが素の JSON 1枚だからプラグインも連携設定も不要で、一括変更・負荷集計・ファイル横断の分析まで一言で頼めます。
actual.end に本日が入る同梱の CLAUDE.md で AI はデータ形式・編集ルール・運用方針を理解済みです。
{
"projects": [
{
"name": "プロジェクト名",
"milestones": [ { "date": "2026-09-30", "label": "リリース", "color": "#ef4444" } ],
"tasks": [
{ "id": "1", "name": "フェーズ1", "children": [
{ "id": "1.1", "name": "作業", "qty": 1, "hours": 16, "assignee": "担当",
"plan": { "start": "2026-07-01", "end": "2026-07-05" },
"actual": { "start": null, "end": null }, "note": "",
"_ai": { "tokens": 70000, "minutes": 25, "model": "fable-5" },
"_money": { "outsource": 50000, "currency": "JPY" },
"_links": ["https://example.com/spec.md"] }
] }
]
}
]
}
children あり=集計ノード、なし=リーフ(工数を持つ)_ 始まりのキーはカスタムキーとして自由に追加できる(上例の _ai=AI実績・_money=外注費・_links=参考リンク。構造も自由)。ビューアは無視し、ブラウザ編集でも保持される。クリックして開きたい URL は note へ(自動リンク化){ "project", "milestones", "tasks" }(単一プロジェクト)も後方互換で読めるCLAUDE.md(仕様の単一ソース)Google Chrome(最新版)推奨。File System Access API を使用するため Chromium 系ブラウザ専用・file:// 直開きで動作。
edge://policy で確認)tests/ に正常系・異常系のサンプル JSON と e2e テストを同梱(一覧は tests/INDEX.md)。壊れた入力でもクラッシュしない方針(graceful degradation)。
既知の制限:大量行(数千〜)で初期描画が重い(折りたたみで緩和)/同名プロジェクトは折りたたみ状態を共有/キーボード操作・スクリーンリーダー非対応(マウス前提)。