| name | guild-member-research |
| description | Use when researching a guild member's background, social media presence, and designing or enhancing their unique profile page under /guild/. Trigger when user provides a Threads self-intro link, mentions guild member names, profile enhancement, or wants to deep-dive into someone's online presence for the SuperGalen site. |
Guild Member Research & Profile Enhancement
Overview
User provides a Threads self-intro link → crawl it with Playwright → follow social links to deep-research the person → compile dossier → enhance the existing guild page (built by Google Jules) using /frontend-design. Each page must be one-of-a-kind.
Workflow
digraph guild_research {
"User provides Threads self-intro link" [shape=doublecircle];
"Crawl Threads self-intro post" [shape=box];
"Extract person info and social links" [shape=box];
"Crawl existing guild page" [shape=box];
"Visit each social platform" [shape=box];
"Compile research dossier" [shape=box];
"Present dossier to user" [shape=box];
"User confirms direction" [shape=diamond];
"Invoke /frontend-design" [shape=box];
"Enhance page in src/content/guild/" [shape=box];
"Update hall-of-fame.yml if needed" [shape=box];
"Verify with Playwright" [shape=box];
"Done" [shape=doublecircle];
"User provides Threads self-intro link" -> "Crawl Threads self-intro post";
"Crawl Threads self-intro post" -> "Extract person info and social links";
"Extract person info and social links" -> "Crawl existing guild page";
"Crawl existing guild page" -> "Visit each social platform";
"Visit each social platform" -> "Compile research dossier";
"Compile research dossier" -> "Present dossier to user";
"Present dossier to user" -> "User confirms direction";
"User confirms direction" -> "Invoke /frontend-design" [label="approved"];
"User confirms direction" -> "Visit each social platform" [label="need more info"];
"Invoke /frontend-design" -> "Enhance page in src/content/guild/";
"Enhance page in src/content/guild/" -> "Update hall-of-fame.yml if needed";
"Update hall-of-fame.yml if needed" -> "Verify with Playwright";
"Verify with Playwright" -> "Done";
}
Phase 1: Reconnaissance
Step 1 — Crawl Threads 自我介紹
User 會提供一個 Threads 自介貼文連結，這是最重要的第一手資料。
用 Playwright 爬取該貼文：
- 導航到 user 提供的 Threads 連結
- 截圖留存
- 擷取完整貼文內容（文字）：
- 職業 / 背景
- 人生故事、轉職經歷、轉折點
- 興趣 / 熱情所在
- 價值觀和信念
- 任何提到的社群連結（IG、LinkedIn、GitHub 等）
- 也查看該貼文下方的回覆和互動，可能有更多自我揭露
- 進入此人的 Threads 個人頁面，瀏覽其他貼文，補充人物畫像：
- 日常分享的主題
- 回覆別人的語氣和風格
- 關注的話題和社群
這一步是整個研究的基石 — Threads 自介是成員在社群脈絡下的主動分享，通常最真實、最有深度。
Step 2 — 爬取現有 Guild 頁面
成員頁面通常已由 Google Jules 建立初版，存在於 src/content/guild/{member}.html。
用 Playwright 檢視現有頁面：
- 導航到
http://localhost:4321/guild/{member}/
- 截取完整頁面截圖
- 提取所有連結（
<a href>）— 特別是社群連結
- 記錄現有的：設計主題、配色、動畫技術、內容區塊
- 評估哪些部分可以保留、哪些需要強化
社群平台清單：
- Threads (threads.net)
- Instagram (instagram.com)
- Twitter/X (x.com)
- Facebook (facebook.com)
- LinkedIn (linkedin.com)
- GitHub (github.com)
- YouTube (youtube.com)
- Medium, 個人部落格
- 個人網站
- Discord
- 其他
Step 3 — Deep-dive 社群檔案
Threads（必做，用 Playwright）
從 Step 1 取得的 Threads 個人頁面，進一步深挖：
- 瀏覽此人的貼文歷史，盡量多看
- 截圖重要貼文
- 提取：
- 近期貼文（主題、話題、風格）
- 內容模式 — 他們都在聊什麼？
- 興趣與熱情 — 從內容中推斷
- 個性特質 — 寫作語氣、幽默風格、價值觀
- 成就 — 認證、獎項、里程碑
- 社群歸屬 — 參與的團體、運動、社群
- 和其他成員的互動 — 回覆、轉發、tag
其他平台（必做，Playwright 或 WebFetch）
對其他社群連結（IG、LinkedIn、GitHub 等）都要去抓，工具選擇：
- 優先用 WebFetch — 輕量快速，適合大部分公開頁面
- 需要 JS 渲染或互動時改用 Playwright — 例如需要滾動載入更多內容、點擊展開等
- 兩者都被擋時 → 記錄下來，請 user 手動提供資訊
提取：
- Bio/簡介 文字
- 視覺風格 — 偏好的顏色、美學
- 專業資訊 — 職稱、公司、技能
- 近期活動 — 最近在做什麼
- 作品集 / 專案 — GitHub repos、Portfolio 等
Step 4 — 整理研究檔案
組織所有發現為結構化摘要：
## Research Dossier: {Name}
### Identity
- 名字 / 暱稱
- 目前職業 / 角色
- 所在地（若公開）
### Threads 自介（核心資料）
- 自介貼文原文摘錄
- 提到的職業/背景
- 分享的人生故事或轉折
- 表達的價值觀和信念
- 互動風格（從回覆觀察）
### Online Presence
- Platform 1: [link] — 活動摘要
- Platform 2: [link] — 活動摘要
### Key Themes & Interests
- 主題 1（附證據）
- 主題 2（附證據）
### Personality Profile
- 溝通風格
- 價值觀與信念
- 幽默 / 語氣
### Visual Preferences
- 偏好的顏色
- 美學風格
### Story Arc
- 背景 / 起源
- 現在進行式
- 未來願景（若可見）
### Current Page Assessment
- Jules 初版的優點
- 可以強化的方向
- 缺少的元素
### Enhancement Proposals
- 建議的主題/概念
- 值得引用的金句
- 視覺母題
- 符合其個性的互動創意
將此檔案呈給 user 確認後才進入設計階段。
Phase 2: Design & Enhancement
Step 5 — Invoke /frontend-design
User 確認研究方向後，呼叫 /frontend-design skill，提供：
- 完整研究檔案
- 現有頁面的截圖和程式碼（Jules 初版）
- 獨特性要求：不能和其他 guild 頁面撞主題
Guild 頁面設計原則：
- 每頁是獨立 HTML 檔案，位於
src/content/guild/{member}.html
- 樣式用 inline
<style>（不使用外部 CSS，library 除外）
- GSAP + ScrollTrigger 是基本動畫庫
- 進階頁面可用 PixiJS、Three.js、Babylon.js
- 必須有返回導航：
<a href="/guild/">← ARCHIVE</a>（或類似）
- 頭像路徑：
/assets/img/guild/{member}/avatar.webp
- Footer 放社群連結
- 響應式設計（手機友善）
- Footer 署名：「Made with ♥ by SuperGalen's Dungeon」
- 主題必須深度反映這個人是誰
Step 6 — 實作
- 基於 Jules 初版強化
src/content/guild/{member}.html
- 確認頭像存在於
/public/assets/img/guild/{member}/avatar.webp
- 如為新成員，更新
/src/data/hall-of-fame.yml：
- id: "{unique_id}"
name: "Display Name"
avatar: "/assets/img/guild/{member}/avatar.webp"
page: "/guild/{member}.html"
tags:
- id: "tag_id"
label: "Tag Label"
Step 7 — 驗證
用 Playwright：
- 導航到頁面
- 在關鍵滾動位置截圖
- 驗證所有連結正常
- 檢查手機版響應式（375px）
- 呈給 user 做最終確認
Important Notes
- 隱私優先：只用公開資訊，絕不放私人資料
- 不寫具體追蹤者數字：頁面上禁止出現具體的追蹤者/粉絲數量（如「396 followers」）。這些數字會隨時間變動，寫死在頁面上會過時且尷尬。改用非量化的描述（如「活躍經營中」）或完全省略
- 先問再做：研究結果必須先給 user 確認，再進設計
- 獨特性為王：先看其他 guild 頁面，避免撞主題
- 品質優先：這些頁面是送給成員的禮物，要用心做
- 基於初版強化：Jules 已建初版，我們是在其基礎上深化和提升，不是從零開始
Quick Reference
| File | Purpose |
|---|
src/content/guild/{member}.html | 成員頁面 HTML |
public/assets/img/guild/{member}/avatar.webp | 頭像圖片 |
src/data/hall-of-fame.yml | 成員註冊表 |
src/pages/guild/[member].astro | 動態路由模板 |
src/pages/guild/index.astro | Guild 首頁 |
Common Mistakes
| Mistake | Fix |
|---|
| 跳過 Threads 自介研究 | 自介是核心，絕不能省 |
| 沒有先爬 Jules 初版 | 要知道現有基礎才能有效強化 |
| 沒呈 dossier 就開始設計 | 一定要 user 確認方向 |
| 抄別人的 guild 頁面主題 | 先研究對方，設計圍繞 THEM |
| 用外部 CSS 檔案 | 樣式保持 inline |
| 忘記手機響應式 | 最少測 375px 寬度 |
| 漏掉返回導航連結 | 一定要有 ← ARCHIVE 回 /guild/ |
| 沒更新 hall-of-fame.yml | 新成員需要 YAML 條目 |
| 寫具體追蹤者/粉絲數字 | 數字會過時，用非量化描述或省略 |
