Claude Code 的記憶機制

記憶檔案的種類與設計理念

Claude Code 支援三種級別的記憶檔案：

記憶檔案位置用途
專案記憶./CLAUDE.md全團隊共享，記錄架構、標準、常用工作流程
使用者記憶~/.claude/CLAUDE.md個人偏好與搜尋條件（如 code style、工具快捷指令）
專案本地記憶（即將淘汰）./CLAUDE.local.md不推到遠端的個人專案設定

撰寫優質記憶內容

打造有用記憶內容的重點是結構化、具體、長久適用：

  • 專案架構與圖表：在 ./CLAUDE.md 中簡述專案目標、邏輯分層、資料流程與常用第三方服務。
  • 開發規範：team 常用的測試、commit message 格式、branch 流程也能記錄進去。
  • 典型指令集：例如 @scripts/test.sh 或 @README 提醒可快速引用。
  • 個人偏好：例如你喜歡 using tabs 還是 spaces、有沒有自動補 commit message 的習慣，都可放在 ~/.claude/CLAUDE.md。

這樣的記憶會幫助 Claude 在解釋、編碼和 refactor 中，更貼合你團隊與個人的風格。

在Claude.md中匯入其他檔案

CLAUDE.md 檔案可以使用 @path/to/import 語法匯入其他檔案。下列範例匯入 3 個檔案：

See @README for project overview and @package.json for available npm commands for this project.

# Additional Instructions
- git workflow @docs/git-instructions.md

允許相對和絕對路徑，匯入的檔案可以遞迴匯入其他檔案，最大深度為 5。您可以通過運行 /memory 命令查看加載了哪些內存文件。

# Individual Preferences
- @~/.claude/my-project-instructions.md

**Tek 陣列式命名（如 # 命令清單）讓記憶更易讀、維護性高。

以下為一個簡單範例

Tek 陣列式命名（如 # 命令清單）讓記憶更易讀、維護性高。

CLAUDE.md

# 專案指南

## 專案概述

這是一個使用 `create-next-app` 建立的 **Next.js 15** 應用程式，採用現代的 React 19、TypeScript、Tailwind CSS 和 App Router 架構。

## 架構與結構

### 目錄結構
```
claudecode/
└── my-next-app/          # 主要 Next.js 應用程式
    ├── src/
    │   └── app/          # App Router 目錄 (Next.js 13+ 模式)
    │       ├── globals.css
    │       ├── layout.tsx    # 根佈局組件
    │       ├── page.tsx      # 首頁組件
    │       └── favicon.ico
    ├── public/           # 靜態資源 (SVG 圖標)
    ├── package.json      # 依賴項和腳本
    ├── next.config.ts    # Next.js 配置
    ├── tailwind.config.ts # Tailwind CSS 配置
    ├── tsconfig.json     # TypeScript 配置
    ├── eslint.config.mjs # ESLint 配置
    ├── postcss.config.mjs # PostCSS 配置
    └── .gitignore
```

## 技術堆棧

### 核心技術
- **Next.js 15.4.3** - 帶有 App Router 的 React 框架
- **React 19.1.0** - 最新版 React 與改進功能
- **TypeScript 5.8.3** - 類型安全和現代 JavaScript 功能
- **Tailwind CSS 4.1.11** - 實用優先的 CSS 框架
- **ESLint** - 帶有 Next.js 和 TypeScript 規則的代碼檢查

### 主要特性
- **App Router** - 使用 Next.js 13+ App Router 模式 (`src/app/` 目錄)
- **字體優化** - Geist 字體 (Sans & Mono) 與 next/font
- **深色主題支援** - 使用 CSS 變數和 prefers-color-scheme
- **TypeScript 路徑** - 配置 `@/*` 別名指向 `src/*`
- **Turbopack** - 開發環境啟用 (`--turbopack` 標誌)

## 開發工作流程

### 可用腳本
```bash
npm run dev    # 使用 Turbopack 啟動開發伺服器
npm run build  # 生產環境建置
npm run start  # 啟動生產伺服器
npm run lint   # 運行 ESLint
```

### 開發伺服器
- 預設端口: `http://localhost:3000`
- 使用 Turbopack 實現熱重載，加快開發速度
- 主要入口點: `src/app/page.tsx`

## 配置詳情

### TypeScript 配置
- 目標: ES2017
- 啟用嚴格模式
- 路徑映射: `@/*` → `./src/*`
- 包含 Next.js 外掛

### Tailwind 配置
- 實用優先的 CSS 框架
- 自定義顏色變數 (background, foreground)
- 為所有相關文件類型配置內容路徑
- 透過 CSS 變數支援深色主題

### ESLint 配置
- Next.js 核心 web vitals 規則
- TypeScript 支援
- 扁平配置格式 (ESLint 9+)

## 樣式方法

### CSS 架構
- **全域樣式**: `src/app/globals.css`
- **Tailwind**: 帶有自定義 CSS 變數的實用優先方法
- **深色主題**: 透過 `prefers-color-scheme` 自動檢測
- **字體**: Geist Sans 和 Geist Mono 與 CSS 變數

### 顏色系統
```css
:root {
  --background: #ffffff;  /* 亮色主題 */
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;  /* 深色主題 */
    --foreground: #ededed;
  }
}
```

## 主要開發模式

### 組件結構
- **函數組件** 與 TypeScript
- **伺服器組件** 預設 (App Router)
- **CSS-in-JS**: 帶有條件樣式的 Tailwind 類別
- **圖片優化**: 使用 `next/image` 組件

### 文件命名慣例
- 組件: `PascalCase.tsx`
- 頁面: `page.tsx` (App Router 慣例)
- 佈局: `layout.tsx` (App Router 慣例)
- 樣式: `kebab-case.css`

## Claude Code 最佳實踐

### 在此專案上工作時:

1. **遵循 App Router 模式**
   - 使用 `src/app/` 目錄結構
   - 遵循 Next.js 13+ 慣例
   - 為路由建立 `page.tsx`，為佈局建立 `layout.tsx`

2. **TypeScript 優先**
   - 新文件始終使用 TypeScript
   - 利用配置的路徑別名 (`@/`)
   - 維護嚴格的類型檢查

3. **樣式指南**
   - 主要使用 Tailwind 實用程式
   - 尊重主題的 CSS 變數系統
   - 維護深色主題相容性

4. **效能考慮**
   - 使用 `next/image` 處理圖片
   - 盡可能利用伺服器組件
   - 遵循 Next.js 優化模式

5. **開發命令**
   - 使用 `npm run dev` 進行開發 (包含 Turbopack)
   - 提交前運行 `npm run lint`
   - 使用 `npm run build` 測試生產建置

6. **Git 提交流程**
   - 每次執行 `git commit` 後，必須執行 `ntfy publish claire-topic "git commit: {commit message}"`
   - AI 應動態使用該次 commit 的實際訊息內容，而非固定文字 {commit message}
   - 這將發送提交通知到指定的 ntfy 主題

## 常見任務

### 新增頁面
在適當的 `src/app/` 子目錄中建立 `page.tsx` 文件，遵循 App Router 慣例。

### 新增組件
將可重用組件放在 `src/components/` (需要時建立此目錄) 並使用 `@/` 路徑別名。

### 樣式更新
修改 `src/app/globals.css` 以更改全域樣式，或在組件中使用 Tailwind 實用程式。

### 配置更改
- Next.js: `next.config.ts`
- TypeScript: `tsconfig.json`
- Tailwind: `tailwind.config.ts`
- ESLint: `eslint.config.mjs`

## 注意事項

- 這是一個最小自定義的全新 Next.js 專案
- 使用最新的 React 19 和 Next.js 15 功能
- 配置用於 TypeScript 和 Tailwind 的現代開發
- 準備部署到 Vercel 或其他平台
- 目前不存在額外的文檔或規則文件

## 部署

此專案配置為可在 Vercel 上輕鬆部署，但也可以部署到任何支援 Next.js 應用程式的平台。