一键在 Manus 中运行任何 Skill

layer-onboarding

星标407

分支26

更新时间2026年7月1日 06:19

從資料落地到 Layer 上線的完整驗收 SOP + UX baseline 表。當用戶說「新資料要接圖層」「PMTiles 好了怎麼上」「這個 layer 為什麼點少了」「這個 layer 的透明度/大小/popup 該怎麼設」「新 layer 該檢查什麼」「上游資料改了下游要跟嗎」「跨 repo 交接資料」時觸發。用來守門「常漏點 / 常漏 UX 設定 / 跨 repo 契約沒對齊」三大痛點。與 `/new-layer` command（產骨架）互補 — 本 skill 專注**驗收 + UX 決策 + 跨 repo 對齊**。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

ianlkl11234s

ianlkl11234s/mini-taiwan-pulse

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Layer Onboarding SOP

目的：把「從 taipei-gis-analytics 資料落地 → mini-taiwan-pulse 上線」變成無法漏項的流程。

何時觸發

「新 layer 要接」「PMTiles 好了要怎麼上」
「這 layer 點怎麼少了」「這 layer 為什麼有些點顯示不出來」
「透明度 / 半徑 / popup / 圖例該怎麼設」
「上游改了欄位下游要動嗎」
Review 一個剛完成的 layer 前

步驟總覽

Step 0  規劃 (feature 資料夾 + upstream handoff)
Step 1  資料完整性驗收 (count / attrs / 檔名契約)
Step 2  接線 (走 /new-layer 或手動 7 步)
Step 3  UX baseline 套用 (radius / opacity / cluster / min-zoom)
Step 4  四鐵則自檢 (slider / legend / popup / dropdown)
Step 5  跨 repo 對齊 (handoff 反向引用 + commit hash)
Step 6  驗收 (tsc / test / browser All Off 單測)
Step 7  收尾 (changelog + backlog 標 ✅)

Step 0 — 規劃

選 slug：kebab-case，例如 air-quality-station
開 upstream handoff（若還沒）：taipei-gis-analytics/docs/handoff/<slug>.md
開 downstream feature 資料夾：cp -r docs/features/_TEMPLATE docs/features/<slug>
開 branch：git checkout -b feat/<slug>

Step 1 — 資料完整性驗收（⚠️ 最常漏的地方）

從 upstream 拿到產物後先驗數字對得上，不要急著接線。

PMTiles

# 檢查 tile 數 + zoom 範圍
tippecanoe-decode public/xxx.pmtiles | head -20

# 檢查 keep_attrs 是否帶到（隨機挑 tile）
tile-join --version && python3 -c "
import subprocess
# 從 PMTiles 抽 feature 屬性看 keep_attrs 齊不齊
"

常見漏項：

keep_attrs 沒帶 → 前端 popup 空白 / 分色失效 → 回上游改 tippecanoe 參數重出
扁平檔名契約斷了 → nginx 找不到 → 檢查 public/ 命名（不要加子資料夾）

GeoJSON

# 點數
jq '.features | length' public/xxx.geojson
# 屬性 key 齊不齊
jq '.features[0].properties | keys' public/xxx.geojson

Supabase RPC

-- 直接跑 EXPLAIN ANALYZE
EXPLAIN (ANALYZE, BUFFERS) SELECT * FROM public.get_xxx(...);

若 > 1s 或 > 10k rows → 立刻套 pre-aggregate pattern（見 supabase-optimize skill）。

座標系統

|Response_X| > 1000 → 是 TWD97 TM2 → 要轉 WGS84。

Step 2 — 接線

優先走 /new-layer <slug> slash command（自動產骨架 + 過 7 步 + 跑 tsc）。

若手動，強制順序（CLAUDE.md §5）：

src/types/index.ts → LayerVisibility 加 key
src/data/xxxLoader.ts → loader + loadingRegistry（⚠️ 禁靜默 rpc().then()）
src/hooks/useXxxLayer.ts → React hook（⚠️ 動態圖層禁 currentTime 進 deps）
src/map/overlayRegistry.ts 或 CustomLayer
src/components/sidebar/layerCatalog.ts — LAYER_COLORS 補 key（漏了會 TS2739）+ SECTIONS 加 key
src/App.tsx → 接線
src/hooks/useLayerVisibility.ts → 預設開才加 DEFAULT_ON

Step 3 — UX Baseline 表（照類型套，不用猜）

點層 POI

資料密度	radius (zoom 6)	radius (zoom 12)	opacity 預設	cluster？
< 1k	4px	8px	0.9	否
1k ~ 10k	3px	6px	0.85	否
10k ~ 100k	2px	5px	0.75	可選（zoom < 10 開）
> 100k	1.5px	4px	0.6	必開 cluster + 低 zoom `-r` 抽稀

線層

類型	width (zoom 6)	width (zoom 14)	opacity
主要路網	1px	3px	0.9
次要路網	0.5px	2px	0.7
軌跡 / 流向	2px	4px	0.85

Polygon / 覆蓋

類型	fill-opacity	outline width
熱區 / 密度圖	0.55	0
行政區	0.15	0.5px
覆蓋範圍（等時圈類）	0.35	1px

Raster / 影像

預設 opacity 0.7（可蓋底圖）
Slider 範圍 0.3 ~ 1.0

3D / CustomLayer

先跑 three-3d-component skill 看元件庫
確認 dispose / blending / 動態時間源

所有 layer 都必提供 opacity slider（見四鐵則 #1）。

Step 4 — 圖層 UX 四鐵則自檢

#	鐵則	檢查
1	透明度 slider	`useTransportParams.ts` 有 opacity control？
2	分類 ≥ 2 種必寫圖例	`LEGEND_REGISTRY` 有加？`LegendPanel.tsx` sub-component 有寫？
3	可選取物件必接 click popup	`useMapInteraction.ts` + `featureInfo/registry.tsx` 有加？
4	Select options ≥ 4 用原生 `<select>`	`ctrl.options.length > 3` 自動切 dropdown？

layerConsistency test 會擋 #2，但 #1/#3/#4 靠自檢。

Step 5 — 跨 repo 對齊

必動的四份檔：

taipei-gis-analytics/docs/handoff/<slug>.md — 資料契約 SSOT（upstream）
mini-taiwan-pulse/docs/features/<slug>/handoff.md — 反向引用 + 硬依賴欄位表
mini-taiwan-pulse/docs/features/<slug>/changelog.md — 本次 PR 記
mini-taiwan-pulse/docs/features/<slug>/backlog.md — 對應項標 ✅

若動到資料契約 → 開 ADR：taipei-gis-analytics/docs/adr/NNNN-<title>.md。

Step 6 — 驗收

# TypeScript 驗證（禁 --noEmit）
npx tsc -b

# 全站測試（含 layerConsistency 擋漏圖例）
pnpm test

# Browser：按「All Off」→ 只開新 layer → 邊界 zoom / timeline 都測
pnpm dev

常見驗收失敗：

TS2739 → layerCatalog.ts 的 LAYER_COLORS 漏 key
layerConsistency fail → LEGEND_REGISTRY 沒加
Browser 打不出 popup → useMapInteraction 沒 register

Step 7 — 收尾

更新 docs/features/<slug>/changelog.md（PR # + squash hash）
更新 docs/features/<slug>/backlog.md 標 ✅
更新 .claude/memory/STATUS.md 加最新段落
若踩到新坑 → 寫 .claude/pitfalls/YYYY-MM-DD-<slug>.md
若學到 P0 規則 → 補進 .claude/memory/PRINCIPLES.md

常漏點快速索引

看 .claude/pitfalls/2026-07-01-layer-integration-common-misses.md。

Command：/new-layer — 產骨架
Skill：supabase-optimize — RPC 效能
Skill：three-3d-component — 3D layer
Skill：gis-data-onboard（在 taipei-gis-analytics）— 資料落地路由
Rules：CLAUDE.md §5 §5a + docs/development-rules.md

同仓库更多 Skills

同仓库

wrap-up

ianlkl11234s/mini-taiwan-pulse

Session 結束後收尾 + 更新 .claude/memory/ 的 skill。當使用者說 /wrap-up、「收工」、「收尾」、「session 結束」、「做完了」、「commit memory」、「整理記憶」時觸發。讀本 session 脈絡 + git log + 現有 memory → 對應更新 9 個 memory 檔 → 產出 diff 給用戶 review → 每檔 atomic commit（prefix memory:）→ 不自動 push。

2026-07-03407

accessibility-analysis

ianlkl11234s/mini-taiwan-pulse

服務可達性分析工具箱（accessibility / service coverage）。當用戶說「30km 路網可達」「最近 X 站」「服務範圍」「沙漠」「孤島」「等時圈」「isochrone」「可達性分析」「路網覆蓋」或要新增任何「離 POI 多遠」類型的分析時觸發。整合 mini-taiwan-pulse + taipei-gis-analytics 兩端 SOP，覆蓋三種視覺模式（路網染色 / Polygon 沿路網 / Hex 格點）、三套既有 reference pipeline 對照、模式選擇決策樹、常見坑（Overpass mirror 不穩 / pyrosm 爆 RAM / multi-bucket / whitelist）。新增 POI 類型（加油站 / 醫療 / 消防 / 充電站 / 警局 / 學校）做可達分析時用。允許只跑 pipeline 不接前端，也允許 pipeline 已備好只做前端接線。

2026-06-22407

service-coverage

ianlkl11234s/mini-taiwan-pulse

服務覆蓋分析（service coverage / 商業策略視角）— 「我的店要開哪」「誰被服務不到」「跟競爭者疊圖」這類問題的視覺化。技術實作完整內容在 [[accessibility-analysis]] skill。本 alias 為了商業 / 策略口吻觸發更順 — 當用戶說「服務覆蓋」「服務沙漠」「市場版圖」「競爭者疊圖」「品牌勢力範圍」「服務缺口」「補點策略」「擴點選址」「未來開店」時用這個。實作 SOP 完全相同 → 請直接讀 accessibility-analysis/SKILL.md。

2026-06-22407

three-3d-component

ianlkl11234s/mini-taiwan-pulse

Mini Taiwan Pulse 新增 Three.js × Mapbox 立體圖層的設計與接線手冊。當用戶說「新增 3D 圖層」「立體元件」「3D layer」「Three.js scene」「立體呈現」「3D 視覺化」「點與點的連結」「燈塔轉圈/光柱/巨蛋/光弧」或要從 `public/three-showcase.html`（68 元件案例庫）挑元件接到實際圖層時觸發。導引用戶從「想表達什麼語意」→ 對應元件類別 → Scene/CustomLayer 範本 → 必過 checklist（座標 / blending / dispose / 動態時間源 / 性能）→ 最後跑 tsc -b。

2026-06-18407

supabase-optimize

ianlkl11234s/mini-taiwan-pulse

為 Supabase RPC 產生 pre-aggregate pattern SQL 範本。當響應時間 > 1s、rows > 10k、或含 string_agg/ST_Union 時使用。依照 Mini Taiwan Pulse 專案的「普通 table + per-day refresh function + pg_cron + 薄 RPC」架構產生完整 SQL，含 advisory lock、cleanup、cron 排程。

2026-05-24407

wrap-up

ianlkl11234s/mini-taiwan-pulse

Session 結束後收尾 + 更新 .Codex/memory/ 的 skill。當使用者說 /wrap-up、「收工」、「收尾」、「session 結束」、「做完了」、「commit memory」、「整理記憶」時觸發。讀本 session 脈絡 + git log + 現有 memory → 對應更新 9 個 memory 檔 → 產出 diff 給用戶 review → 每檔 atomic commit（prefix memory:）→ 不自動 push。

2026-05-24407

name

layer-onboarding

description

Layer Onboarding SOP

目的：把「從 taipei-gis-analytics 資料落地 → mini-taiwan-pulse 上線」變成無法漏項的流程。

何時觸發

「新 layer 要接」「PMTiles 好了要怎麼上」
「這 layer 點怎麼少了」「這 layer 為什麼有些點顯示不出來」
「透明度 / 半徑 / popup / 圖例該怎麼設」
「上游改了欄位下游要動嗎」
Review 一個剛完成的 layer 前

步驟總覽

Step 0  規劃 (feature 資料夾 + upstream handoff)
Step 1  資料完整性驗收 (count / attrs / 檔名契約)
Step 2  接線 (走 /new-layer 或手動 7 步)
Step 3  UX baseline 套用 (radius / opacity / cluster / min-zoom)
Step 4  四鐵則自檢 (slider / legend / popup / dropdown)
Step 5  跨 repo 對齊 (handoff 反向引用 + commit hash)
Step 6  驗收 (tsc / test / browser All Off 單測)
Step 7  收尾 (changelog + backlog 標 ✅)

Step 0 — 規劃

選 slug：kebab-case，例如 air-quality-station
開 upstream handoff（若還沒）：taipei-gis-analytics/docs/handoff/<slug>.md
開 downstream feature 資料夾：cp -r docs/features/_TEMPLATE docs/features/<slug>
開 branch：git checkout -b feat/<slug>

Step 1 — 資料完整性驗收（⚠️ 最常漏的地方）

從 upstream 拿到產物後先驗數字對得上，不要急著接線。

PMTiles

# 檢查 tile 數 + zoom 範圍
tippecanoe-decode public/xxx.pmtiles | head -20

# 檢查 keep_attrs 是否帶到（隨機挑 tile）
tile-join --version && python3 -c "
import subprocess
# 從 PMTiles 抽 feature 屬性看 keep_attrs 齊不齊
"

常見漏項：

keep_attrs 沒帶 → 前端 popup 空白 / 分色失效 → 回上游改 tippecanoe 參數重出
扁平檔名契約斷了 → nginx 找不到 → 檢查 public/ 命名（不要加子資料夾）

GeoJSON

# 點數
jq '.features | length' public/xxx.geojson
# 屬性 key 齊不齊
jq '.features[0].properties | keys' public/xxx.geojson

Supabase RPC

-- 直接跑 EXPLAIN ANALYZE
EXPLAIN (ANALYZE, BUFFERS) SELECT * FROM public.get_xxx(...);

若 > 1s 或 > 10k rows → 立刻套 pre-aggregate pattern（見 supabase-optimize skill）。

座標系統

|Response_X| > 1000 → 是 TWD97 TM2 → 要轉 WGS84。

Step 2 — 接線

優先走 /new-layer <slug> slash command（自動產骨架 + 過 7 步 + 跑 tsc）。

若手動，強制順序（CLAUDE.md §5）：

src/types/index.ts → LayerVisibility 加 key
src/data/xxxLoader.ts → loader + loadingRegistry（⚠️ 禁靜默 rpc().then()）
src/hooks/useXxxLayer.ts → React hook（⚠️ 動態圖層禁 currentTime 進 deps）
src/map/overlayRegistry.ts 或 CustomLayer
src/components/sidebar/layerCatalog.ts — LAYER_COLORS 補 key（漏了會 TS2739）+ SECTIONS 加 key
src/App.tsx → 接線
src/hooks/useLayerVisibility.ts → 預設開才加 DEFAULT_ON

Step 3 — UX Baseline 表（照類型套，不用猜）

點層 POI

資料密度	radius (zoom 6)	radius (zoom 12)	opacity 預設	cluster？
< 1k	4px	8px	0.9	否
1k ~ 10k	3px	6px	0.85	否
10k ~ 100k	2px	5px	0.75	可選（zoom < 10 開）
> 100k	1.5px	4px	0.6	必開 cluster + 低 zoom `-r` 抽稀

線層

類型	width (zoom 6)	width (zoom 14)	opacity
主要路網	1px	3px	0.9
次要路網	0.5px	2px	0.7
軌跡 / 流向	2px	4px	0.85

Polygon / 覆蓋

類型	fill-opacity	outline width
熱區 / 密度圖	0.55	0
行政區	0.15	0.5px
覆蓋範圍（等時圈類）	0.35	1px

Raster / 影像

預設 opacity 0.7（可蓋底圖）
Slider 範圍 0.3 ~ 1.0

3D / CustomLayer

先跑 three-3d-component skill 看元件庫
確認 dispose / blending / 動態時間源

所有 layer 都必提供 opacity slider（見四鐵則 #1）。

Step 4 — 圖層 UX 四鐵則自檢

#	鐵則	檢查
1	透明度 slider	`useTransportParams.ts` 有 opacity control？
2	分類 ≥ 2 種必寫圖例	`LEGEND_REGISTRY` 有加？`LegendPanel.tsx` sub-component 有寫？
3	可選取物件必接 click popup	`useMapInteraction.ts` + `featureInfo/registry.tsx` 有加？
4	Select options ≥ 4 用原生 `<select>`	`ctrl.options.length > 3` 自動切 dropdown？

layerConsistency test 會擋 #2，但 #1/#3/#4 靠自檢。

Step 5 — 跨 repo 對齊

必動的四份檔：

taipei-gis-analytics/docs/handoff/<slug>.md — 資料契約 SSOT（upstream）
mini-taiwan-pulse/docs/features/<slug>/handoff.md — 反向引用 + 硬依賴欄位表
mini-taiwan-pulse/docs/features/<slug>/changelog.md — 本次 PR 記
mini-taiwan-pulse/docs/features/<slug>/backlog.md — 對應項標 ✅

若動到資料契約 → 開 ADR：taipei-gis-analytics/docs/adr/NNNN-<title>.md。

Step 6 — 驗收

# TypeScript 驗證（禁 --noEmit）
npx tsc -b

# 全站測試（含 layerConsistency 擋漏圖例）
pnpm test

# Browser：按「All Off」→ 只開新 layer → 邊界 zoom / timeline 都測
pnpm dev

常見驗收失敗：

TS2739 → layerCatalog.ts 的 LAYER_COLORS 漏 key
layerConsistency fail → LEGEND_REGISTRY 沒加
Browser 打不出 popup → useMapInteraction 沒 register

Step 7 — 收尾

更新 docs/features/<slug>/changelog.md（PR # + squash hash）
更新 docs/features/<slug>/backlog.md 標 ✅
更新 .claude/memory/STATUS.md 加最新段落
若踩到新坑 → 寫 .claude/pitfalls/YYYY-MM-DD-<slug>.md
若學到 P0 規則 → 補進 .claude/memory/PRINCIPLES.md

常漏點快速索引

看 .claude/pitfalls/2026-07-01-layer-integration-common-misses.md。

Command：/new-layer — 產骨架
Skill：supabase-optimize — RPC 效能
Skill：three-3d-component — 3D layer
Skill：gis-data-onboard（在 taipei-gis-analytics）— 資料落地路由
Rules：CLAUDE.md §5 §5a + docs/development-rules.md

layer-onboarding

Layer Onboarding SOP

何時觸發

步驟總覽

Step 0 — 規劃

Step 1 — 資料完整性驗收（⚠️ 最常漏的地方）

PMTiles

GeoJSON

Supabase RPC

座標系統

Step 2 — 接線

Step 3 — UX Baseline 表（照類型套，不用猜）

點層 POI

線層

Polygon / 覆蓋

Raster / 影像

3D / CustomLayer

Step 4 — 圖層 UX 四鐵則自檢

Step 5 — 跨 repo 對齊

Step 6 — 驗收

Step 7 — 收尾

常漏點快速索引

Related

同仓库更多 Skills

同仓库更多 Skills

Layer Onboarding SOP

何時觸發

步驟總覽

Step 0 — 規劃

Step 1 — 資料完整性驗收（⚠️ 最常漏的地方）

PMTiles

GeoJSON

Supabase RPC

座標系統

Step 2 — 接線

Step 3 — UX Baseline 表（照類型套，不用猜）

點層 POI

線層

Polygon / 覆蓋

Raster / 影像

3D / CustomLayer

Step 4 — 圖層 UX 四鐵則自檢

Step 5 — 跨 repo 對齊

Step 6 — 驗收

Step 7 — 收尾

常漏點快速索引

Related