分類: AI 職場超神助手

## Custom Commands
!test-api: curl http://localhost:3000/test

winget install --id GitHub.cli --accept-source-agreements

# Fix GitHub Issue

## 目標
修復 GitHub 上指定 issue 的 bug，並提交一個 Pull Request。

## 步驟

1. 使用 `gh issue view {input}` 指令讀取 Issue 編號為 `{input}` 的描述內容。
2. 分析問題並找出最可能相關的程式碼區段與檔案。
3. 編寫修正該 bug 的程式碼（請先顯示變更建議讓我確認）。
4. 編寫對應的測試案例來覆蓋此次修正。
5. 若我確認沒問題，請進行 commit，訊息為 `fix: resolve issue #{input}`。
6. 提交 PR，標題為 `Fix for issue #{input}`，描述為修正內容與測試方式。

/project:fix-github-issue 1234

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR-KEY",
        "--stdio"
      ]
    }
  }
}

實作這個 Figma frame。

claude mcp add my-private-server /path/to/server
# 或指定為 local
claude mcp add my-private-server -s local /path/to/server

claude mcp add shared-server -s project /path/to/server

{
  "mcpServers": {
    "shared-server": {
      "command": "/path/to/server",
      "args": [],
      "env": {}
    }
  }
}

claude mcp add my-user-server -s user /path/to/server

{
  "mcpServers": {
    "api-server": {
      "type": "sse",
      "url": "${API_BASE_URL:-https://api.example.com}/mcp",
      "headers": {
        "Authorization": "Bearer ${API_KEY}"
      }
    }
  }
}

claude mcp add --transport sse github-server https://api.github.com/mcp

/mcp

claude mcp add postgres-server /path/to/postgres-mcp-server \
  --connection-string "postgresql://user:pass@localhost:5432/mydb"

> describe the schema of our users table
> what are the most recent orders?

# WinGet（Windows）
winget install astral-sh.uv
# Homebrew（macOS）
brew install uv
#PyPI
pip install uv

uv venv --python cpython-3.11.13-windows-x86_64-none
.\.venv\Scripts\activate
uv pip install "mcp[cli]"

"""
FastMCP quickstart example.

cd to the `examples/snippets/clients` directory and run:
    uv run server fastmcp_quickstart stdio
"""

from mcp.server.fastmcp import FastMCP

# Create an MCP server
mcp = FastMCP("Demo")


# Add an addition tool
@mcp.tool()
def add(a: int, b: int) -> int:
    """Add two numbers"""
    return a + b


# Add a dynamic greeting resource
@mcp.resource("greeting://{name}")
def get_greeting(name: str) -> str:
    """Get a personalized greeting"""
    return f"Hello, {name}!"


# Add a prompt
@mcp.prompt()
def greet_user(name: str, style: str = "friendly") -> str:
    """Generate a greeting prompt"""
    styles = {
        "friendly": "Please write a warm, friendly greeting",
        "formal": "Please write a formal, professional greeting",
        "casual": "Please write a casual, relaxed greeting",
    }

    return f"{styles.get(style, styles['friendly'])} for someone named {name}."
    
if __name__ == "__main__":
    mcp.run(transport="stdio")

uv run main.py

npx -y @modelcontextprotocol/inspector@latest

claude mcp add my-mcp-server uv run main.py
claude mcp list

Checking MCP server health...

firecrawl-mcp: cmd /c npx -y firecrawl-mcp - ✓ Connected
my-mcp-server: uv run main.py - ✓ Connected

# Basic syntax
claude mcp add <name> <command> [args...]

# Example: Adding a local server
claude mcp add my-server -e API_KEY=123 -- /path/to/server arg1 arg2
# This creates: command="/path/to/server", args=["arg1", "arg2"]

# Basic syntax
claude mcp add --transport sse <name> <url>

# Example: Adding an SSE server
claude mcp add --transport sse sse-server https://example.com/sse-endpoint

# Example: Adding an SSE server with custom headers
claude mcp add --transport sse api-server https://api.example.com/mcp --header "X-API-Key: your-key"

# Basic syntax
claude mcp add --transport http <name> <url>

# Example: Adding a streamable HTTP server
claude mcp add --transport http http-server https://example.com/mcp

# Example: Adding an HTTP server with authentication header
claude mcp add --transport http secure-server https://api.example.com/mcp --header "Authorization: Bearer your-token"

# List all configured servers
claude mcp list

# Get details for a specific server
claude mcp get my-server

# Remove a server
claude mcp remove my-server

npm install -g firecrawl-mcp

claude mcp add firecrawl-mcp -- cmd /c npx -y firecrawl-mcp

claude mcp list

claude
/install-github-app

name: Claude AI Workflow

on:
  issues:
    types: [opened, edited, labeled]
  issue_comment:
    types: [created]

jobs:
  claude-analysis:
      runs-on: ubuntu-latest
      if: contains(github.event.issue.body, '@claude') || contains(github.event.comment.body, '@claude')

      steps:
        - name: Checkout code
          uses: actions/checkout@v4

        - name: Claude AI 回應
          uses: anthropics/claude-code-action@beta
          with:
            anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}

        - name: Claude AI 呼叫成功通知
          if: always()
          run: echo "✅ Claude 回應觸發成功！"
  notify:
    runs-on: ubuntu-latest
    needs: [claude-analysis]
    if: always()
    
    steps:
    - name: Send notification
      run: |
        echo "Workflow completed"
        echo "Claude analysis status: ${{ needs.claude-analysis.result }}"
        echo "Build and test status: ${{ needs.build-and-test.result }}"

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

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

# Individual Preferences
- @~/.claude/my-project-instructions.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 應用程式的平台。

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '\"\\(.tool_input.command) - \\(.tool_input.description // \"No description\")\"' >> ./.claude/bash-command-log.txt"
          }
        ]
      }
    ]
  }
}

# 使用 Scoop
scoop install jq

# 使用 Chocolatey
choco install jq

# 使用 winget
winget install jqlang.jq

# 使用 Homebrew
brew install jq

# 使用 MacPorts
sudo port install jq

sudo apt update
sudo apt install jq

Linux (CentOS/RHEL):
sudo yum install jq
# 或
sudo dnf install jq

Linux (Arch):
sudo pacman -S jq

ntfy publish claire-topic "任務完成！"

curl -d "備份成功！" ntfy.sh/claire-topic

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