From 6cba1f13519af6c407ddd26e415268a32376493d Mon Sep 17 00:00:00 2001
From: snc
Date: Thu, 30 Jul 2026 21:22:21 +0900
Subject: [PATCH] initial commit
Co-authored-by: Cursor
---
.../creating-visual-explainers/SKILL.md | 245 +
.../references/base.html | 83 +
.../references/model-answer.html | 968 ++
.../references/node-install-guide.md | 68 +
.../scripts/deploy-diagram.sh | 125 +
.../skills/setting-up-comment-tool/SKILL.md | 294 +
.env.example | 19 +
.gitignore | 42 +
README.md | 259 +
eslint.config.mjs | 20 +
next.config.ts | 7 +
package-lock.json | 8225 +++++++++++++++++
package.json | 36 +
public/feedback-demo.html | 111 +
public/widget.js | 2 +
scripts/migrate.ts | 53 +
src/app/api/comments/route.ts | 157 +
src/app/api/voice-analyze/route.ts | 163 +
src/app/layout.tsx | 11 +
src/lib/db.ts | 7 +
src/shared/api-client.ts | 5 +
src/shared/constants.ts | 61 +
src/shared/slug.ts | 10 +
src/shared/time.ts | 12 +
src/shared/types.ts | 27 +
src/widget/api.ts | 53 +
src/widget/dom.ts | 24 +
src/widget/highlight.ts | 110 +
src/widget/icons.ts | 16 +
src/widget/index.ts | 286 +
src/widget/pin.ts | 513 +
src/widget/render/card.ts | 83 +
src/widget/render/index.ts | 22 +
src/widget/render/name-dialog.ts | 26 +
src/widget/render/popup.ts | 54 +
src/widget/render/sidebar.ts | 201 +
src/widget/render/toggle.ts | 53 +
src/widget/scroll.ts | 40 +
src/widget/selection.ts | 36 +
src/widget/state.ts | 85 +
src/widget/styles.ts | 202 +
src/widget/voice.ts | 326 +
tests/shared.unit.test.ts | 129 +
tests/widget.integration.test.ts | 168 +
tsconfig.json | 34 +
vercel.json | 3 +
vitest.config.ts | 8 +
47 files changed, 13482 insertions(+)
create mode 100644 .claude/skills/creating-visual-explainers/SKILL.md
create mode 100644 .claude/skills/creating-visual-explainers/references/base.html
create mode 100644 .claude/skills/creating-visual-explainers/references/model-answer.html
create mode 100644 .claude/skills/creating-visual-explainers/references/node-install-guide.md
create mode 100755 .claude/skills/creating-visual-explainers/scripts/deploy-diagram.sh
create mode 100644 .claude/skills/setting-up-comment-tool/SKILL.md
create mode 100644 .env.example
create mode 100644 .gitignore
create mode 100644 README.md
create mode 100644 eslint.config.mjs
create mode 100644 next.config.ts
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 public/feedback-demo.html
create mode 100644 public/widget.js
create mode 100644 scripts/migrate.ts
create mode 100644 src/app/api/comments/route.ts
create mode 100644 src/app/api/voice-analyze/route.ts
create mode 100644 src/app/layout.tsx
create mode 100644 src/lib/db.ts
create mode 100644 src/shared/api-client.ts
create mode 100644 src/shared/constants.ts
create mode 100644 src/shared/slug.ts
create mode 100644 src/shared/time.ts
create mode 100644 src/shared/types.ts
create mode 100644 src/widget/api.ts
create mode 100644 src/widget/dom.ts
create mode 100644 src/widget/highlight.ts
create mode 100644 src/widget/icons.ts
create mode 100644 src/widget/index.ts
create mode 100644 src/widget/pin.ts
create mode 100644 src/widget/render/card.ts
create mode 100644 src/widget/render/index.ts
create mode 100644 src/widget/render/name-dialog.ts
create mode 100644 src/widget/render/popup.ts
create mode 100644 src/widget/render/sidebar.ts
create mode 100644 src/widget/render/toggle.ts
create mode 100644 src/widget/scroll.ts
create mode 100644 src/widget/selection.ts
create mode 100644 src/widget/state.ts
create mode 100644 src/widget/styles.ts
create mode 100644 src/widget/voice.ts
create mode 100644 tests/shared.unit.test.ts
create mode 100644 tests/widget.integration.test.ts
create mode 100644 tsconfig.json
create mode 100644 vercel.json
create mode 100644 vitest.config.ts
diff --git a/.claude/skills/creating-visual-explainers/SKILL.md b/.claude/skills/creating-visual-explainers/SKILL.md
new file mode 100644
index 0000000..3ab50f6
--- /dev/null
+++ b/.claude/skills/creating-visual-explainers/SKILL.md
@@ -0,0 +1,245 @@
+---
+name: creating-visual-explainers
+description: Generates an illustrated HTML page about any topic and deploys it to surge.sh with a comment widget (text/pin/voice feedback). Triggered by requests like "図解を作って", "図解を生成して", "このトピックを図解して", "図解してデプロイして", "この図解を再デプロイして", or "この図解を削除して".
+---
+
+# Creating Visual Explainers
+
+任意のトピックについて、前提知識がなくても理解できる図解HTMLを生成し、コメント機能(テキスト引用・ピン・音声)付きで surge.sh に公開する。品質基準は「入社したての新卒社会人が読んでも腹落ちする明快さ」だが、この基準は出力には表示しない。
+
+## 依存
+
+- `references/base.html` — 図解テンプレート(Tailwind CSS CDN・Lucide Icons CDN・ADS配色を含む「額縁」)
+- `references/model-answer.html` — 模範回答(品質基準・デザインパターンの実例)。base.htmlと同一の額縁を含む完全なHTMLファイル。widget 未含(デプロイ時に自動注入されるため)
+- リポジトリルートの `fb-tool-url.txt` / `fb-api-token.txt` — セットアップスキル(`setting-up-comment-tool`)が生成する
+
+## ワークフロー
+
+### Step 0: 前提確認
+
+1. `references/base.html` が存在するか確認する。存在しない場合、以下を伝えて終了:
+
+> テンプレートファイルが見つかりません。スキルのフォルダ構成が壊れている可能性があります。運営に連絡してください。
+
+2. リポジトリルート(`.claude` フォルダがある階層)に `fb-tool-url.txt` が存在するか確認する。存在しない場合、以下を伝えて終了:
+
+> コメントツールのセットアップがまだ完了していません。
+> 先にチャット欄で「セットアップして」と伝えてください。
+
+### Step 1: 模範回答の読み込み
+
+`references/model-answer.html` を読み、以下を把握する:
+
+- 完成品の品質水準
+- デザインパターン(色使い・余白・カード・フロー図などの視覚表現)
+- Tailwind CSSクラスの使い方
+- Lucide Iconsの使い方
+- コンテンツの構成・情報量・説明の深さ
+
+模範回答がデザインガイドラインの代わりになる。パーツ一覧やルールではなく、実物から読み取る。
+
+### Step 2: テンプレートの読み込み
+
+`references/base.html` を読み、額縁の構造を把握する:
+
+- `` 〜 `` のプレースホルダー位置
+- ``, `` のプレースホルダー
+- ADS配色のTailwind設定
+- 読み込み済みのCDN(Tailwind CSS・Lucide Icons)
+
+### Step 3: ウェブで情報収集
+
+トピックについてウェブ検索を行い、正確かつ最新の情報を収集する。
+
+検索は **2〜3回** に絞る。以下の観点でクエリを組み立てる:
+
+1. **正確な定義**: トピックの公式な定義、公式ドキュメントの説明
+2. **最新動向**: 直近の変更点、アップデート、現在のベストプラクティス
+3. **具体例**: 実際の使われ方、初心者に伝わるたとえに使える事例
+
+検索結果から以下を整理し、Step 4 の参考情報とする:
+
+- トピックの正確な定義(検索結果を優先。AIの学習データだけに頼らない)
+- 最近変わった点があれば、それを明記する
+- たとえ話に使えそうな事例や数字
+- **出典URL**: 図解に採用した情報のソースURLを控えておく(Step 4 でインライン出典に使う)
+
+### Step 4: コンテンツ生成
+
+Step 3 で収集した情報をもとに、図解HTMLを生成する。検索結果で得た定義・事実・具体例を優先的に採用する。
+
+模範回答のデザインを参考にしつつ、Tailwindの語彙で自由にレイアウトを組む。模範回答のパターンに合うものはそのまま使い、合わないものはTailwindクラスでその場で作る。テンプレートの定義済みパーツに縛られない。
+
+### Step 5: ファイル作成
+
+1. `output/` ディレクトリがなければ作成する
+2. トピックに関連する短い英単語のスラッグを決める(例: `api-basics`, `git-rebase`)
+3. `references/base.html` を `output/{スラッグ}.html` にコピーする
+4. コピーしたファイル内のプレースホルダーをすべて置換する:
+ - `` → 図解のタイトル
+ - `` → 内容を要約した1文
+ - `` 〜 `` → Step 4で生成したコンテンツ
+5. ファイルを保存する(ブラウザで開くのは Step 6 のデプロイ後に行う。ローカルでは開かない)
+
+### Step 6: 公開
+
+ファイル保存後、公開する前にまず Node.js の有無を確認する。
+
+```bash
+node --version
+```
+
+バージョン番号が表示された → そのまま「公開の実行」に進む。
+
+`command not found` と表示された → `references/node-install-guide.md` の手順に従ってNode.jsのインストールを案内する。
+
+#### 公開の実行
+
+以下のスクリプトを**実行する**(中身を読む必要はない)。コメントウィジェットの埋め込みはこのスクリプトが自動で行う。
+
+**macOS / Git Bash(Windows)の場合:**
+
+```bash
+bash .claude/skills/creating-visual-explainers/scripts/deploy-diagram.sh output/{スラッグ}.html [スラッグ]
+```
+
+**Windows(PowerShell)で bash が使えない場合:**
+
+```powershell
+$fbUrl = (Get-Content fb-tool-url.txt).Trim()
+$apiToken = (Get-Content fb-api-token.txt).Trim()
+$snippet = ""
+$dir = "$env:TEMP\diagram-deploy"
+New-Item -ItemType Directory -Force $dir | Out-Null
+# (?s)^(.*)
+
+
+
+
+
+
+
+
+
+
+
+