# 我的第一間商店：技能書與協作來源

把想賣的商品，排成可以在自己電腦看的商店樣稿。

## 工坊收錄說明

供貨與商店

想練習開店，或替商家設計商品展示頁的人。

一張商店或單品展示頁。

搭配「開店與銷售」的選品，先討論版面；樣稿目前不能下單或結帳。

挑一個商品，先用範例做出展示頁，再換成自己的內容。

## 封面與來源署名

封面插畫：/art/skills/storefront.webp

原作者 GitHub：https://github.com/FreeTWAI/freedom-storefront

登入自由工坊並連結自己的 GitHub，即可在技能書加星或取消星星。

原作數據：/api/v1/github/books/storefront/metrics

Stars、Forks、追蹤數、未結 Issues 與 PR 合計、最近程式更新時間以 GitHub 回覆為準；數據附核對時間，讀取失敗不冒充零。

## 讀者與格式

商店模板與讀取客戶端

- 想開店的銷售者

- 協助商家製作展示版面的開發者

## 功能與使用範圍

已提供四種模板與私人的商店讀取連線；公開買家商店、結帳、訂單與金流尚未實作。

- 目錄、單品與參考商品 HTML 預覽

- 一次只核准自己的一家商店

- 共用平台選品與供貨狀態；服務模板明示尚無預約 API

## 開始前準備

- Node.js 24

- 連真資料前先在平台建立自己的商店；離線範例不需要帳號

## 第一個練習

1. 先用虛構 snapshot 產生單品預覽，確認文案與商品資訊排版。

2. 到平台建立商店並選品，再用 connect 代碼核准該商店的讀取。

3. 修改自己的版面；含供貨價格與私人資料的預覽留在本機。

## 練習成果

一張可在本機開啟的商店／單品 HTML，清楚標示預覽而非可下單商店。

## 原始專案的起步指令

在自己的專案副本根目錄執行；指令已對照收錄版本的說明，這次介紹核對沒有代為安裝或執行。

```sh
npm ci --ignore-scripts
npm test
npm run build -- --template single-product --input examples/demo-snapshot.json --output dist/product.html --listing-id demo-listing
```

## 專案與授權

原作 Repo：https://github.com/FreeTWAI/freedom-storefront
從原作建立自己的版本：https://github.com/FreeTWAI/freedom-storefront/fork
工坊整合參考：https://github.com/FreeTWAI/freedom-storefront
記錄的授權：NOASSERTION

## 一起改這本技能書

改善模板的易讀性與手機排版；公開結帳需求先在中央平台討論。

原作 Repo：https://github.com/FreeTWAI/freedom-storefront
預設 PR 目標：FreeTWAI/freedom-storefront:main
從原作建立自己的版本：https://github.com/FreeTWAI/freedom-storefront/fork
原作 PR：https://github.com/FreeTWAI/freedom-storefront/pulls

工坊整合參考：https://github.com/FreeTWAI/freedom-storefront
工坊整合任務專用 Fork：https://github.com/FreeTWAI/freedom-storefront/fork
工坊任務：https://github.com/FreeTWAI/freedom-storefront/issues
工坊 PR：https://github.com/FreeTWAI/freedom-storefront/pulls
GitHub Milestones：https://github.com/FreeTWAI/freedom-storefront/milestones

先閱讀原作現行的貢獻規則。Fork 不會自動回饋原作；修改要以 PR 提交，由原作維護者決定是否合併。工坊整合任務可在工坊審查，另外記錄回饋原作的 PR 或未回送原因。

以下是入口與建議，不代表已認領或已完成。以 GitHub 最新 Issue、PR 與維護者確認為準。

- 第一份可重用的共同成果（建議里程碑）：提交可重現案例、來源與驗證結果，由維護者審查；這是建議里程碑，尚未建立為 GitHub milestone。

### 改善一張商店模板的手機版 · 建議任務

在既有 templates 與合成 snapshot 改單品資訊層級。

- 驗收：窄螢幕可完整閱讀商品與條件，保留預覽標示，不加入假的結帳。

Agent Skill：/development/skills/storefront/SKILL.md
協作 JSON：/api/v1/skills/storefront/collaboration

## 參與開發

改善模板的易讀性與手機排版；公開結帳需求先在中央平台討論。

工坊 Issue／PR 協調入口：https://github.com/FreeTWAI/freedom-storefront/issues

先讀該 Repo 根目錄 README.md、AGENTS.md、CONTRIBUTING.md；原始程式、測試及來源授權留在該專案。平台介紹與公會收錄則在 freedom-platform 的 modules/community 維護。

要改善平台介紹：https://github.com/FreeTWAI/freedom-platform/issues

## 閱讀與來源

閱讀原始專案：https://github.com/FreeTWAI/freedom-storefront/blob/9823df79f8eee86008c269437880ed2e49bdc394/README.md
核對日期：2026-09-27
核對版本：9823df79f8eee86008c269437880ed2e49bdc394

- README.md：https://github.com/FreeTWAI/freedom-storefront/blob/9823df79f8eee86008c269437880ed2e49bdc394/README.md

- package.json：https://github.com/FreeTWAI/freedom-storefront/blob/9823df79f8eee86008c269437880ed2e49bdc394/package.json

## 共創原則

GitHub Issue 是待辦與協調來源，PR 是審查與合併紀錄。先確認任務範圍，再用自己的分支完成相關驗證；保留上游與實際貢獻者。Fork 不等於平台認證、已測試運行或新授權。

完整結構化目錄：/api/v1/development-map