歡迎來到 Day 5！經過前四天的摸索，我們已經確立了 VibeFinance 的產品目標、組裝好 IDE、拆解了 User Story，也畫出了 Next.js + Supabase 的系統架構圖。

今天是「階段一：觀念建立與環境整備」的最後一天。在正式開工寫程式前，我們要為 AI 戴上關鍵的「緊箍咒」——建立專案專屬的 .cursorrules / .clinerules 規範檔。

為什麼需要 Context 規範檔？

在使用 Cursor 或 Claude Code 等 AI 工具時，你是否經常遇到這些崩潰時刻？

1. 語法過時：AI 堅持使用 Next.js 舊版的 Pages Router (pages/api)，而不是最新的 App Router (app/api 或 Server Actions)。
2. 風格不一：一下用 function，一下用 const 箭頭函數；一下用 Inline CSS，一下又用 Tailwind。
3. 無效模組：隨便 import 一些根本沒安裝的第三方套件。

AI 的底層模型雖然強大，但它「不知道你的專案偏好」。.cursorrules 就是專案的最高憲法，只要放在專案根目錄，AI 在生成程式碼前就會自動讀取，確保產出的程式碼 100% 符合你的技術規範。

Human vs. AI 實戰示範：打造完美的 .cursorrules

我們試著讓 AI 為 VibeFinance 專案生成一份專屬的規則設定檔。

1. 給 AI 的 Prompt

「請幫我撰寫一份適用於 Next.js 15 (App Router) + TypeScript + Tailwind CSS + Supabase 的 .cursorrules 檔案，用來約束 AI 生成程式碼時的行為。」

2. AI 產出的結果（節錄）

AI 給出了一份基本的 Markdown 規則：

- Use TypeScript for all code.
- Use React functional components.
- Use Tailwind CSS for styling.
- Always use async/await for asynchronous operations.

3. 人類工程師的修正與判斷（Debug & Judgment Process）

• 工程師思考：這份規則太過泛用，缺乏「約束力」！例如沒有強制指定 Server Component 與 Client Component 的劃分標準、沒有要求使用 shadcn/ui 的元件寫法，也沒有針對錯誤處理（Error Handling）與 Type 安全做嚴格要求。

• 給 AI 的反覆引導與優化：

  「這份規則不夠嚴謹。請幫我補充以下實戰約束：

  1. 強制架構：預設使用 Server Components；只有需要 State 或 Effect 時才加上 'use client'。
  2. 型別安全：嚴格禁止使用 any，資料庫操作必須導出 TypeScript Interface。
  3. UI 規範：優先使用 shadcn/ui 元件，樣式統一寫在 Tailwind className 中。
  4. 檔案命名：組件使用 PascalCase，工具函式與 Route 使用 kebab-case。」

• 最終獲得的 .cursorrules 精華範本：

# VibeFinance Project Rules

## Tech Stack
- Framework: Next.js 15 (App Router)
- Language: TypeScript (Strict mode, NO `any`)
- Styling: Tailwind CSS + shadcn/ui
- Database: Supabase with Prisma ORM

## Code Style & Architecture
- Default to Server Components. Only add `'use client'` when interactive hooks (useState, useEffect) are strictly required.
- Use Server Actions for form submissions and data mutation.
- Use named exports for components (`export function UserCard()`).
- Always handle errors explicitly using try-catch blocks in Server Actions and return standardized `{ success: boolean, data?: T, error?: string }` objects.

## Naming Conventions
- Components: `PascalCase.tsx`
- Hooks & Utilities: `camelCase.ts`
- Routes & Directories: `kebab-case`