私が個人開発で使っているOSS 30選 2026/04/14

私が個人開発で使っているOSS 30選
2026/04/14

Transcript

1. 私が個人開発で使っているOSS 30選 私が個人開発で使っているOSS 30選 RyokaNAKAI RyokaNAKAI 2026 / 04 / 14 2026 / 04 / 14 1 1
2. 今日の内容 今日の内容 2 2
3. スライド構成 スライド構成 前半 : 基盤と効率化 1. AIエージェント基盤 2. Claude Code スキル 3. トークン管理 4. メモリ・ナレッジ 後半 : 体験と開発 5. ブラウザ自動化 6. デザインシステム 7. その他のツール 最後におすすめの組み合わせと TOP10 を紹介します 3
4. 1. AIエージェント基盤 1. AIエージェント基盤 4 4
5. hermes-agent hermes-agent 76k 76k The agent that grows with you なぜ選んだか 会話のたびに忘れるエージェントが多い中、 記憶を保持 成功ワークフローをスキルとして再利用 CLI / Telegram / Discord の複数チャネ ル対応 主な機能 永続メモリ : セッション間で保持 スキルシステム : Markdown + YAML メモリフィルタ : 文脈を最適化 使い方 # インストール curl -fsSL https://hermes.dev/install | bash # 起動 hermes start # スキル追加 hermes skills add browser-use 実例 Telegramから「今日のタスクを確認」→ 過 去の会話から文脈を復元 「PRを作成」→ 成功パターンを自動適用 5
6. hermes-agent : アーキテクチャ hermes-agent : アーキテクチャ hermes-agent アーキテクチャ ユーザー prefetch 関連⽂脈を取得 メモリフィルタ 安全性判定 ⽂脈構築 安全な情報のみ 除外 リスクを遮断 モデル実⾏ Claude / GPT 安全 リスク 6
7. hermes-agent : メモリ階層 hermes-agent : メモリ階層 hermes-agent メモリ階層 トラジェクトリ スキル 永続メモリ プロジェクト⽂脈 直近の会話・動作履歴 再利⽤可能な⼿順 (YAML) ⻑期に残す知識 プロジェクト固有の⽂脈 揮発性 ⾼ 揮発性 低 更新: 常時 更新: 会話毎 更新: 低頻度 更新: ほぼ無 ポイント 下層ほど永く保持され、上層ほど頻繁に更新される。 7
8. marp marp 11k 11k Markdown presentation ecosystem なぜ選んだか Git管理しやすいMarkdown記法 HTML / PDF / PPTX出力 VS Code拡張でリアルタイムプレビュー CSSテーマでデザイン統一 (今これ！) 主な機能 YAMLフロントマターで設定 Mermaid / コード / 表に対応 自動ページ番号 クラス指定でレイアウト切替 使い方 # インストール brew install marp-cli # HTML出力 marp slide.md -o slide.html # PDF出力 marp slide.md --pdf -o slide.pdf Tips <!-- _class: title --> でタイトル <!-- _class: section --> で章区切り paginate: true でページ番号 8
9. browser-use browser-use 87k 87k Make websites accessible for AI agents なぜ選んだか WebサイトをAIに最適化して操作 Python製で導入が容易 Playwrightベースで安定動作 E2E / スクレイピングに万能 ユースケース E2Eテスト自動化 Webスクレイピング UI検証 使い方 from browser_use import Browser async def main(): browser = Browser() await browser.start() await browser.goto("https://example.com") await browser.click("button#submit") data = await browser.get_text("h1") await browser.close() 9
10. 2. Claude Code スキル 2. Claude Code スキル 10 10
11. スキル集 スキル集 ツール 説明 claude-code-best-practice Claude Codeのベストプラクティス 41k everything-claude-code Claude Code完全ガイド 154k autoskills 自動スキル生成ツール 2.7k agent-skills Addy Osmani推奨のエージェントスキル 14k playwright-best-practices Playwrightベストプラクティス 225 11
12. claude-code-best-practice claude-code-best-practice 41k 41k practice made claude perfect なぜ選んだか Claude Codeの使い方を体系化 プロジェクトごとのルール設定 スキルとして再利用可能 コミュニティで継続的改善 主な機能 CLAUDE.mdでプロジェクトルール定義 スキルの自動読み込み ベストプラクティスの適用 継続的改善ループ 効果 : 出力品質の向上 claude-code-best-practice の効果 出⼒品質スコア (社内評価、架空データ) 100 75 50 25 0 40% Before ルールなし 95% After ベストプラクティス適⽤ +55pt 約2.4× の品質向上 ― CLAUDE.md にルールを書くだけで効果が出る 12
13. スキル活用のポイント スキル活用のポイント 3つの重要ポイント 1. CLAUDE.mdを活用 — プロジェクトのルールを記載 2. 自動化を推進 — 定型作業はスキル化 3. 継続的改善 — スキルの定期アップデート 13
14. 3. トークン管理・最適化 3. トークン管理・最適化 14 14
15. トークン管理ツール トークン管理ツール ツール 説明 ccusage Claude Code使用量分析CLI 12k rtk Rust Token Killer — CLIプロキシで60-90%削減 25k ai-token-monitor macOSメニューバーで使用量監視 138 token-savior MCP : 97%削減、69ツール 292 claude-token-efficient 効率的なトークン使用法 4k 15
16. ccusage ccusage 12k 12k Claude Code / Codex CLI の使用量分析ツール なぜ選んだか 使用量を可視化 コスト管理が容易 CLIで軽快に利用 定期レポートで最適化提案 主な機能 トークン使用量の集計 コスト計算 ファイル別の使用量分析 期間指定レポート 使い方 # インストール npm install -g ccusage # 使用量確認 ccusage --summary --last-7-days # 出力例: # Total tokens: 1,234,567 # Cost: $45.67 # Top files: src/api.ts, lib/utils.py 16
17. トークン削減の実例 トークン削減の実例 49× 6.8× 49× code-review-graph による日常タスクのトークン削減 6.8× レビュー時のトークン削減 削減のポイント 関連コードのみをピンポイント読取 知識グラフでコードベースを圧縮 不要なファイルを自動除外 無駄な全文読込をやめ、**グラフ探索** で必要箇所のみ取得するのが鍵 17
18. トークン最適化 : アーキテクチャ トークン最適化 : アーキテクチャ トークン最適化アーキテクチャ コードベース全体 数千ファイル src/api.ts src/lib/auth.ts src/components/… test/e2e/… docs/adr/… scripts/deploy.sh migrations/… … 5,000+ files 合計 ~20M tokens code-review-graph Tree-sitter で AST 解析 依存関係を知識グラフ化 関連ノードのみ抽出 関連コードのみ src/api.ts src/lib/auth.ts test/auth.test.ts < 5% ~400K tokens のみ Claude 推論 ¥ ccusage : 使⽤量の可視化 どのファイル / 時間帯にトークンを使ったかを計測 → 次回以降の最適化に反映 49× トークン削減 解析 抽出 処理フロー 計測 / テレメトリ 18
19. 4. メモリ・ナレッジ管理 4. メモリ・ナレッジ管理 19 19
20. メモリツール メモリツール ツール 説明 claude-mem Claude Code用メモリエンジン 52k agentmemory AIエージェント向けメモリ 1.2k code-review-graph ローカル知識グラフ 9.4k deep-project ディーププロジェクト分析 98 メモリ管理 ＝ トークン削減 でもある 再説明不要 ・ 関連コードだけ渡す → コンテキストが軽くなる 20
21. claude-mem claude-mem 52k 52k Claude Code用の永続メモリエンジン なぜ選んだか セッション間でコンテキスト保持 重要な決定事項を記録 プロジェクトの歴史を追跡 再説明の手間を削減 → トークン削減にも貢 献 主な機能 永続メモリの保存 コンテキストの復元 重要情報の優先表示 メモリの検索 使い方 # インストール hermes skills add claude-mem # メモリ保存 hermes memory save \ "このプロジェクトではTypeScriptを使用" # メモリ検索 hermes memory search "TypeScript" 実例 前回の続きから作業再開 / 決定事項を自動記 憶 / プロジェクト文脈の保持 21
22. code-review-graph code-review-graph 9.4k 9.4k ローカル知識グラフでコードレビューを最適化 なぜ選んだか コードベースの永続マップ 関連コードのみを読み取り レビュー時に大幅トークン節約 知識グラフで依存関係を可視化 効果 レビュー時 : 6.8× 削減 日常タスク : 49× 削減 使い方 # インストール hermes skills add code-review-graph # グラフ構築 hermes graph build # レビュー実行 hermes review --use-graph 22
23. メモリ管理 : 2つのトラック メモリ管理 : 2つのトラック メモリ管理の 2 つのトラック Track 1 : claude-mem ̶ 会話コンテキスト ユーザー会話 claude-mem 重要情報を抽出・構造化 不要情報は破棄 ⽂脈復元 次セッション開始時 保存要求 store() retrieve() Track 2 : code-review-graph ̶ コード知識 コードベース src/**/* code-review-graph Tree-sitter で AST 解析 ノード ⇄ エッジ化 知識グラフ 関連コード のみ抽出 < 5% build() query() 23
24. 5. ブラウザ自動化 5. ブラウザ自動化 24 24
25. ブラウザ関連ツール ブラウザ関連ツール ツール 説明 browser-use Python製ブラウザ自動化 87k playwright-best-practices Playwrightベストプラクティス 225 25
26. ブラウザ自動化 : 仕組み ブラウザ自動化 : 仕組み ブラウザ⾃動化の仕組み click scrape assert 結果 / スクリーンショット 26
27. 6. デザインシステム 6. デザインシステム 27 27
28. デザイン関連ツール デザイン関連ツール ツール 説明 awesome-design-systems デザインシステムのコレクション 23k impeccable AI向けデザイン言語 18k melta-ui AI-Ready デザインシステム 133 design-extraction-skill デザイントークン抽出 5 OpenBrand ブランド情報抽出 — avoid-ai-writing AI文章検出・回避 — 28
29. impeccable impeccable 18k 18k The design language that makes your AI harness better at design なぜ選んだか AIエージェント向けのデザインガイド 一貫性あるUI生成 プロンプトとして活用可能 デザインシステムの標準化 効果 AIが一貫したUIを生成 デザインレビューの自動化 デザイントークンの統一 使い方 (CLAUDE.md に追記) ## デザインルール - カラーパレット: #4A90E2, #2E5CB8 - フォント: Hiragino Sans - 余白: 8px単位 - 角丸: 8px 29
30. デザインシステム活用の流れ デザインシステム活用の流れ デザインシステム活⽤の流れ デザイントークン Color Type AaHiragino Sans Space 8pt grid Radius 2 / 6 / 12 Shadow Motion ease-out ⼀貫した UI 出⼒ Primary CTA → Secondary Card Title Action Success Warning Error Info 読込 ⽣成指⽰ トークンをimpeccable経由でAIに渡し、⼀貫した UI を⾃動⽣成 30
31. 7. その他のツール 7. その他のツール 31 31
32. 開発効率化ツール 開発効率化ツール ツール 説明 fireworks-tech-graph 技術グラフ作成ツール 1.9k idea-reality-mcp MCP : アイデアを現実化 599 OpenBrand ブランド情報抽出 — awesome-design-md デザインリソース集 — avoid-ai-writing AI文章検出・回避 — ui-ux-pro-max-skill UI/UX Pro Max スキル — ui-skills UI開発スキル集 — 32
33. 実際の開発フロー 実際の開発フロー 実際の開発フロー • hermes-agent • claude-mem ⽂脈を引き継ぐ • claude-code • impeccable ⼀貫した UI を出⼒ • code-review-graph • autoresearch:reason 関連コードのみ参照 • browser-use • playwright E2E ⾃動化 • ccusage • token-savior コストを確認 継続的改善ループ フェーズ遷移 フィードバックループ 各フェーズで使う OSS を下段に記載 33
34. おすすめの組み合わせ おすすめの組み合わせ 目的 ツール 初心者向け claude-code-best-practice + hermes-agent コスト重視 ccusage + ai-token-monitor + token-savior 品質重視 code-review-graph + claude-mem + impeccable 自動化重視 browser-use + autoskills + agent-skills 34
35. スター数ランキング TOP 10 スター数ランキング TOP 10 順位 ツール 1 everything-claude-code 154k 2 browser-use 87k 3 hermes-agent 76k 4 claude-mem 52k 5 claude-code-best-practice 41k 順位 ツール 6 rtk 25k 7 awesome-design-systems 23k 8 impeccable 18k 9 agent-skills 14k 10 ccusage 12k 35
36. まとめ まとめ 36 36
37. まとめ まとめ 1. AIエージェント は hermes-agent が最強 2. トークン管理 でコストを最適化 3. メモリ機能 でコンテキストを維持 4. ブラウザ自動化 でテストを自動化 5. デザインシステム で一貫性を確保 キーワード : 記憶 × 自動化 × 一貫性 37
38. ご清聴ありがとうございました ご清聴ありがとうございました 質問・フィードバック歓迎 質問・フィードバック歓迎 38 38