AI Coding Assistant Skill Tutorial

Part 3: 手把手實作練習

親手建立你的第一個完整 Skill：專案初始化器

Google Antigravity

Claude Code

SKILL.md Template Files Variable Replacement Testing

本單元目標

在這個單元中，你將親手建立第一個真正實用的 Skill！

學習目標

了解 Skill 的完整檔案結構
學會撰寫有效的 SKILL.md
掌握模板檔案的使用方式
學會測試與除錯 Skill

最終成果

建立一個「專案初始化」Skill
能自動產生 README.md
能自動產生 .gitignore
能自動產生 package.json

完成後：只要說「初始化專案」，AI 就會幫你建立完整的專案基礎檔案！

我們要做什麼？

這個 Skill 的完整功能說明：

1

觸發條件

當使用者說「初始化專案」、「建立新專案」、「setup project」等指令時自動觸發

2

詢問資訊

AI 會詢問使用者：專案名稱、專案描述

3

自動建立檔案

根據模板自動建立三個檔案：

README.md - 專案說明文件
.gitignore - Git 忽略清單
package.json - Node.js 專案設定

為什麼選這個範例？這是每個開發者都會用到的功能，而且涵蓋了 Skill 的核心技術：觸發、互動、模板、檔案操作。

步驟總覽

我們將按照以下四個步驟完成這個 Skill：

1

建立資料夾結構

在正確位置建立 Skill 所需的資料夾和檔案結構

2

撰寫 SKILL.md

定義 Skill 的名稱、觸發條件、執行步驟

3

建立模板檔案

準備 README、.gitignore、package.json 的模板

4

測試 Skill

實際測試並確認功能正常運作

預估時間：約 15-20 分鐘（第一次可能會久一點，熟練後 5 分鐘內就能完成類似的 Skill）

步驟 1-1：建立資料夾

根據你使用的 AI 工具，在專案根目錄執行對應指令：

Google Antigravity

# 建立 Skill 主目錄
mkdir -p .agent/skills/project-initializer

# 建立模板資源目錄
mkdir -p .agent/skills/project-initializer/resources

Claude Code

# 建立 Skill 主目錄
mkdir -p .claude/skills/project-initializer

# 建立模板資源目錄
mkdir -p .claude/skills/project-initializer/resources

路徑差異說明：

.agent/ 是 Google Antigravity 的設定目錄
.claude/ 是 Claude Code 的設定目錄
資料夾名稱建議使用小寫英文和連字號（-）

步驟 1-2：確認資料夾結構

建立完成後，你的目錄結構應該長這樣：

你的專案資料夾/ │ ├── .agent/ <-- Google Antigravity │ └── skills/ │ └── project-initializer/ │ ├── SKILL.md <-- 主要設定檔 │ └── resources/ │ ├── readme-template.md │ ├── gitignore-template.txt │ └── package-template.json │ └── .claude/ <-- Claude Code └── skills/ └── project-initializer/ ├── SKILL.md <-- 內容完全相同！ └── resources/ ├── readme-template.md ├── gitignore-template.txt └── package-template.json

兩邊結構相同！只需把同樣的檔案分別放到 .agent/ 和 .claude/ 即可支援兩種 AI 工具。

步驟 2-1：撰寫 SKILL.md - Frontmatter

在對應的 skills 目錄下建立 SKILL.md 檔案：

Antigravity: .agent/skills/project-initializer/SKILL.md Claude: .claude/skills/project-initializer/SKILL.md

首先是最重要的 Frontmatter（YAML 設定區）：

---
name: project-initializer
description: "Initialize new projects with standard files. Triggers: init project, initialize, create project, setup project, start new project, new project setup. Creates: README.md, .gitignore, package.json with customized content."
---

超級重要！description 欄位決定了 AI 何時會觸發這個 Skill：

把所有可能的觸發關鍵字都寫進去
用英文描述功能（AI 會自動匹配中英文）
說明會產生什麼檔案

YAML 格式注意：description 內容要用雙引號包起來，前後各三個減號 ---

步驟 2-2：撰寫 SKILL.md - 完整內容

以下是 SKILL.md 的完整內容：

---
name: project-initializer
description: "Initialize new projects with standard files. Triggers: init project, initialize, create project, setup project, start new project, new project setup. Creates: README.md, .gitignore, package.json with customized content."
---

# Project Initializer Skill

這個 Skill 協助使用者快速初始化新專案，自動建立標準的專案檔案。

## 執行步驟

### Step 1: 詢問專案資訊
首先向使用者詢問以下資訊：
- **專案名稱**（英文，用於 package.json 的 name）
- **專案描述**（中英文皆可，用於 README 和 package.json）

### Step 2: 讀取模板檔案
從 `resources/` 目錄讀取以下模板：
- `resources/readme-template.md`
- `resources/gitignore-template.txt`
- `resources/package-template.json`

### Step 3: 替換變數
將模板中的變數替換為使用者提供的資訊：
- `{{PROJECT_NAME}}` -> 專案名稱
- `{{PROJECT_DESCRIPTION}}` -> 專案描述

### Step 4: 寫入檔案
在專案根目錄建立以下檔案：
- `README.md`
- `.gitignore`
- `package.json`

### Step 5: 報告完成
告知使用者已完成初始化，列出建立的檔案清單。

結構說明：每個 Step 都清楚定義 AI 應該做什麼，這樣 AI 才能正確執行。

步驟 3-1：建立 README 模板

在 resources/ 目錄下建立 readme-template.md：

# {{PROJECT_NAME}}

{{PROJECT_DESCRIPTION}}

## 安裝

```bash
npm install
```

## 使用方式

```bash
npm start
```

## 開發

```bash
npm run dev
```

## 授權

MIT License

變數說明：

{{PROJECT_NAME}} - 會被替換為使用者輸入的專案名稱
{{PROJECT_DESCRIPTION}} - 會被替換為使用者輸入的專案描述

使用雙大括號 {{ }} 包住變數名稱，這是常見的模板語法。

步驟 3-2：建立 .gitignore 模板

在 resources/ 目錄下建立 gitignore-template.txt：

# Dependencies
node_modules/
package-lock.json

# Environment variables
.env
.env.local
.env.*.local

# Build output
dist/
build/
.next/

# IDE and OS
.DS_Store
.vscode/
.idea/
*.swp
*.swo

# Logs
*.log
npm-debug.log*

# Test coverage
coverage/

# Temporary files
tmp/
temp/

小技巧：這個模板不需要變數替換，因為 .gitignore 的內容對所有專案都適用。你可以根據需求自訂內容。

步驟 3-3：建立 package.json 模板

在 resources/ 目錄下建立 package-template.json：

{
  "name": "{{PROJECT_NAME}}",
  "version": "1.0.0",
  "description": "{{PROJECT_DESCRIPTION}}",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

注意 JSON 格式：

所有的 key 都要用雙引號包起來
最後一個項目後面不能有逗號
變數 {{PROJECT_NAME}} 要包在字串的雙引號裡面

步驟 4：測試 Skill

現在來實際測試我們建立的 Skill！

1

開啟 Claude Code

在終端機中執行 claude 開啟 Claude Code

2

輸入觸發指令

試著輸入：「幫我初始化一個新專案」或「init project」

3

觀察 AI 反應

AI 應該會詢問你專案名稱和描述

4

確認檔案生成

檢查專案根目錄是否出現 README.md、.gitignore、package.json

成功指標：三個檔案都正確生成，且內容中的變數都被正確替換！

常見問題排解

問題 1：Skill 沒有被觸發

解決方案：檢查 SKILL.md 的 description 欄位

確認包含足夠的觸發關鍵字
嘗試用不同的說法觸發
可以直接說「run project-initializer」強制觸發

問題 2：YAML 格式錯誤

解決方案：使用線上 YAML 驗證器檢查

確認 --- 前後各三個減號
description 內容用雙引號包起來
推薦工具：yamllint.com

問題 3：找不到模板檔案

解決方案：確認檔案位置正確

Google Antigravity: 必須在 .agent/skills/project-initializer/resources/ 目錄下
Claude Code: 必須在 .claude/skills/project-initializer/resources/ 目錄下
檔名大小寫要完全正確

互動練習區 - 動手試試看！

在下方編輯你的 SKILL.md，完成後可以複製或一鍵打包下載完整 Skill 資料夾。

SKILL.md

---
name: project-initializer
description: "Initialize new projects with standard files. Triggers: init project, initialize, create project, setup project. Creates: README.md, .gitignore, package.json."
---

# Project Initializer Skill

這個 Skill 協助使用者快速初始化新專案。

## 執行步驟

### Step 1: 詢問專案資訊
詢問使用者：
- 專案名稱（英文）
- 專案描述

### Step 2: 讀取模板檔案
從 resources/ 目錄讀取模板。

### Step 3: 替換變數
將 {{PROJECT_NAME}} 和 {{PROJECT_DESCRIPTION}} 替換為使用者輸入。

### Step 4: 寫入檔案
建立 README.md、.gitignore、package.json。

### Step 5: 報告完成
告知使用者已完成初始化。

readme-template.md

# {{PROJECT_NAME}}

{{PROJECT_DESCRIPTION}}

## 安裝
```bash
npm install
```

## 使用方式
```bash
npm start
```

提示：點擊「打包下載 ZIP」會下載完整的 Skill 資料夾結構，解壓縮後放到 .agent/skills/ 或 .claude/skills/ 即可使用！

恭喜完成！下一步

你已經學會：

建立 Skill 的完整資料夾結構
撰寫 SKILL.md 的 Frontmatter 和執行步驟
使用模板檔案和變數替換
測試與除錯 Skill

這只是開始！在下一個單元，我們將挑戰更複雜的任務：

將 Firebase 即時聊天室的建置流程，封裝成一個強大的 Skill！

前往 Part 4：Firebase 建置 Skill

Design (構想) -> Code (撰寫) -> Test (測試) -> Iterate (優化)