AI Coding Assistant Skill Tutorial

Part 4: 挑戰 - 建置 Firebase Skill

將「專案8：即時聊天室」轉化為一鍵生成的自動化技能
使用者只要說「建立聊天室」，AI 就會自動完成所有事！

Google Antigravity

Claude Code

Firebase Auth Firestore Database Template Management End-to-End Automation

挑戰目標

我們要將「即時聊天室」專案轉化為一鍵生成的 Skill！

Before: 傳統開發流程

手動建立 Firebase 專案
複製貼上設定程式碼
修改 Config 參數
調整 HTML 結構
設定 Firestore 規則
測試除錯...

耗時: 30-60 分鐘

After: 使用 Skill

說「幫我建立聊天室」
提供 Firebase Config
完成！

耗時: 2 分鐘

Skill 的威力：把重複性的開發工作封裝成指令，讓 AI 成為你的自動化助手！

回顧「即時聊天室」專案

在設計 Skill 之前，我們先來分析這個專案的組成。

使用的技術

Firebase Authentication (Google 登入)
Cloud Firestore (即時資料庫)
單一 HTML 檔案架構

核心檔案

index.html

包含完整的 HTML + CSS + JavaScript

約 750 行程式碼

使用者需提供

firebaseConfig 物件

apiKey
authDomain
projectId
其他設定...

關鍵洞察：整個專案只有 firebaseConfig 需要替換，其他程式碼都是固定的！

Skill 設計思路

設計一個好的 Skill，需要清楚定義每個步驟。

1

前置檢查
確認使用者是否已建立 Firebase 專案，是否已開通必要服務

2

收集 Firebase Config
詢問使用者的 apiKey、projectId 等設定參數

3

讀取聊天室模板
從 resources/chat-template.html 讀取完整程式碼

4

替換 Config
將模板中的 {{FIREBASE_CONFIG}} 替換為使用者提供的設定

5

生成檔案 + 提供說明
輸出完成的 HTML 檔案，並顯示 Firebase 設定指南

Skill 資料夾結構

好的架構讓 Skill 更易於維護和擴展。兩種 AI 工具的結構相同：

你的專案資料夾/ │ ├── .agent/ <-- Google Antigravity │ └── skills/ │ └── firebase-chat-generator/ │ ├── SKILL.md <-- 主要設定檔 │ └── resources/ │ ├── chat-template.html <-- 聊天室模板 │ └── setup-guide.md <-- 設定說明 │ └── .claude/ <-- Claude Code └── skills/ └── firebase-chat-generator/ ├── SKILL.md <-- 內容完全相同！ └── resources/ ├── chat-template.html └── setup-guide.md

設計重點：

把 750 行的 HTML 放在獨立檔案，SKILL.md 保持簡潔
模板檔案可以單獨更新，不影響 Skill 邏輯
SKILL.md 內容完全相同，只需複製到不同路徑即可！

SKILL.md - Frontmatter 設定

Frontmatter 決定了這個 Skill 何時被觸發。

---
name: firebase-chat-generator
description: "Build Firebase chat room with real-time messaging.
Actions: create chat, build chatroom, make chat app,
建立聊天室, 聊天室專案, 即時通訊.
Tech: Firebase Auth, Firestore, Google Login, real-time sync."
---

Description 的寫法技巧：

Actions: 列出會觸發此 Skill 的動詞和短語
中英文混用： 讓中英文指令都能觸發
Tech: 列出相關技術，增加匹配準確度

當使用者說以下任一句話，AI 就會自動啟用這個 Skill：

「幫我建立一個 Firebase 聊天室」
「我要做即時通訊功能」
「Create a chat application with Google login」

SKILL.md - 完整內容 (1/3)

開頭說明與前置檢查。

# Firebase Chat Generator

本技能用於快速生成 Firebase 即時聊天室專案。
生成的聊天室包含 Google 登入、即時訊息同步等完整功能。

## Prerequisites (前置需求)

Before proceeding, you MUST confirm the user has:

1. **Firebase Project** - Created at https://console.firebase.google.com
2. **Google Authentication** - Enabled in Authentication > Sign-in method
3. **Firestore Database** - Created in Build > Firestore Database
4. **Firebase Config** - The configuration object from Project Settings

If user doesn't have these ready, guide them to complete
the setup first before generating the chat application.

重要：這個 Skill 需要使用者先完成 Firebase 設定。務必在開頭就確認！

SKILL.md - 完整內容 (2/3)

收集使用者的 Firebase Config。

## Step 1: Collect Firebase Config

You MUST ask the user for their Firebase configuration.
Display this prompt:

"""
請提供您的 Firebase Config，您可以在以下位置找到：
Firebase Console → 專案設定(齒輪圖示) → 一般 → 您的應用程式 → SDK 設定和配置

我需要以下資訊：
- apiKey
- authDomain
- projectId
- storageBucket
- messagingSenderId
- appId
"""

### Config Format Example
The user should provide something like:
```javascript
{
  apiKey: "AIzaSy...",
  authDomain: "my-project.firebaseapp.com",
  projectId: "my-project",
  storageBucket: "my-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
}
```

SKILL.md - 完整內容 (3/3)

檔案生成與後續說明。

## Step 2: Generate Chat Application

1. Read the template file: `resources/chat-template.html`
2. Find the placeholder: `{{FIREBASE_CONFIG}}`
3. Replace it with the user's actual Firebase config object
4. Write the final file to user's specified location
   - Default: `chat/index.html`
   - Or ask user for preferred path

## Step 3: Provide Setup Instructions

After generating the file:
1. Read and display `resources/setup-guide.md`
2. Remind user about these critical steps:
   - Add their domain to Firebase Authorized Domains
   - Configure Firestore security rules
   - Test with Live Server or deploy to hosting

## Success Message

"""
聊天室已成功建立！

檔案位置：[輸出路徑]
請使用 Live Server 開啟 index.html 進行測試。

如果遇到登入問題，請確認已在 Firebase Console 的
Authentication > Settings > Authorized domains 中
新增您的網域（localhost 通常已預設加入）。
"""

chat-template.html 模板 - HTML 結構

模板的基本 HTML 結構，包含登入和聊天兩個頁面。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>即時聊天室</title>
    <style>
        /* 完整 CSS 樣式 - 深色主題 */
    </style>
</head>
<body>
    <!-- 登入頁面 -->
    <div class="login-page" id="loginPage">
        <div class="login-card">
            <h1>即時聊天室</h1>
            <button class="google-btn" id="googleLoginBtn">
                使用 Google 帳號登入
            </button>
        </div>
    </div>

    <!-- 聊天室頁面 -->
    <div class="chat-page" id="chatPage">
        <!-- 頂部導航、訊息區域、輸入區域 -->
    </div>
</body>
</html>

chat-template.html 模板 - CSS 樣式重點

使用 CSS 變數打造深色主題，訊息氣泡有「自己」和「他人」兩種樣式。

:root {
    --primary: #6366f1;      /* 主題紫色 */
    --bg-dark: #0f172a;      /* 深色背景 */
    --bg-card: #1e293b;      /* 卡片背景 */
    --text: #f1f5f9;         /* 文字顏色 */
}

/* 訊息氣泡 - 他人 */
.message-content {
    background: var(--bg-card);
    border-radius: 18px;
    border-top-left-radius: 4px;  /* 左上角尖角 */
}

/* 訊息氣泡 - 自己 */
.message.own .message-content {
    background: linear-gradient(135deg, var(--primary), #4f46e5);
    border-top-left-radius: 18px;
    border-top-right-radius: 4px; /* 右上角尖角 */
}

/* 響應式設計 */
@media (max-width: 768px) {
    .message { max-width: 90%; }
}

chat-template.html 模板 - JavaScript 核心

Firebase 初始化使用 {{FIREBASE_CONFIG}} 作為替換標記。

<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
import { getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged }
    from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';
import { getFirestore, collection, addDoc, query, orderBy, onSnapshot }
    from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js';

// ========================================
// Firebase 配置 - 這裡是替換點！
// ========================================
const firebaseConfig = {{FIREBASE_CONFIG}};

// 初始化
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// onSnapshot 即時監聽訊息
onSnapshot(query(collection(db, 'messages'), orderBy('timestamp')),
    (snapshot) => { /* 更新 UI */ });

// addDoc 發送訊息
await addDoc(collection(db, 'messages'), { text, userId, timestamp });
</script>

setup-guide.md 模板

提供使用者完成 Firebase 設定的詳細指南。

# Firebase 設定指南

## 1. 開通 Google 登入
- 前往 Firebase Console
- 選擇 Authentication > Sign-in method
- 點擊 Google > 啟用
- 填寫專案公開名稱和支援電子郵件
- 儲存

## 2. 設定授權網域
- Authentication > Settings > Authorized domains
- 預設已有 localhost（本機開發用）
- 部署後需新增你的正式網域

## 3. Firestore 安全規則
將以下規則貼到 Firestore > 規則：

```javascript
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /messages/{messageId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null
        && request.resource.data.userId == request.auth.uid;
    }
  }
}
```

## 4. 測試你的聊天室
- 使用 VS Code 的 Live Server 開啟 index.html
- 使用 Google 帳號登入
- 開啟兩個瀏覽器視窗測試即時同步

測試你的 Skill

建立完成後，讓我們來測試這個 Skill 是否正常運作！

1

開啟 AI 編程助手
確認 Skill 檔案已放在正確位置：
Antigravity .agent/skills/firebase-chat-generator/
Claude .claude/skills/firebase-chat-generator/

2

輸入測試指令
「幫我建立一個 Firebase 聊天室」或「I want to create a chat app」

3

提供 Firebase Config
AI 會詢問你的設定，把 Firebase Console 的 Config 貼給它

4

確認檔案生成
檢查指定目錄是否出現 index.html

5

用 Live Server 測試
右鍵點擊 index.html → Open with Live Server → 測試登入和訊息功能

成功標準：可以用 Google 登入，發送的訊息會即時顯示！

互動練習區 - Firebase Chat Skill

編輯你的 Firebase Chat Generator SKILL.md，完成後可一鍵打包下載。

SKILL.md - Firebase Chat Generator

---
name: firebase-chat-generator
description: "Build Firebase chat room with real-time messaging. Actions: create chat, build chatroom, 建立聊天室, 即時通訊. Tech: Firebase Auth, Firestore, Google Login."
---

# Firebase Chat Generator

本技能用於快速生成 Firebase 即時聊天室專案。

## Prerequisites
Before proceeding, confirm user has:
1. Firebase Project created
2. Google Authentication enabled
3. Firestore Database created
4. Firebase Config object ready

## Step 1: Collect Firebase Config
Ask user for their Firebase configuration (apiKey, projectId, etc.)

## Step 2: Generate Chat Application
1. Read template: resources/chat-template.html
2. Replace {{FIREBASE_CONFIG}} with user's config
3. Write to user's specified location (default: chat/index.html)

## Step 3: Provide Setup Instructions
Display Firebase setup guide and remind about:
- Authorized domains configuration
- Firestore security rules

輸入你的 Firebase Config

{
  apiKey: "你的-API-KEY",
  authDomain: "你的專案.firebaseapp.com",
  projectId: "你的專案ID",
  storageBucket: "你的專案.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
}

提示：下載的 ZIP 包含完整 Skill 結構，只需將 Firebase Config 貼入模板的 {{FIREBASE_CONFIG}} 位置即可！

課程總結

恭喜你完成了 Antigravity Skill 的完整培訓！

Part 1

理解 Skill 是 AI 的 SOP

Skill 讓 AI 照著你設計的流程執行任務

Part 2

學會 SKILL.md 語法結構

Frontmatter + Markdown 指令的完美組合

Part 3

親手實作基礎 Skill

從簡單的「打招呼」Skill 開始練習

Part 4

挑戰 Firebase 自動化建置

結合模板管理，打造專業級 Skill

你已經從「使用 AI」進化到「指揮 AI」！
現在，你是設計流程的架構師，而不只是寫程式碼的工人。

延伸挑戰

學會了 Skill 的核心概念，接下來挑戰自己吧！

挑戰 1: 改良現有 Skill

加入「建立私人聊天室」功能
支援選擇不同主題色彩
增加表情符號選擇器選項
加入訊息通知功能

挑戰 2: 設計全新 Skill

部落格生成器
待辦事項 App 生成器
個人履歷網站生成器
你自己的創意專案！

關於作者 - 曾慶良（阿亮老師）

Facebook 粉絲專頁 YouTube 頻道 3A 科技研究社

感謝您的學習！