
关于
项目指南技能(示例)。
name: cc-skill-project-guidelines-example description: "项目指南技能(示例)" risk: unknown source: community date_added: "2026-02-27"
项目指南技能(示例)
这是一个项目特定技能的示例。可以将其作为你自己项目的模板。
基于真实生产应用:Zenith - AI 驱动的客户发现平台。
何时使用
在处理该技能所设计的特定项目时参考此技能。项目技能包含:
- 架构概述
- 文件结构
- 代码模式
- 测试要求
- 部署工作流
架构概述
技术栈:
- 前端:Next.js 15(App Router)、TypeScript、React
- 后端:FastAPI(Python)、Pydantic 模型
- 数据库:Supabase(PostgreSQL)
- AI:Claude API,支持工具调用和结构化输出
- 部署:Google Cloud Run
- 测试:Playwright(E2E)、pytest(后端)、React Testing Library
服务架构:
┌─────────────────────────────────────────────────────────────┐
│ Frontend │
│ Next.js 15 + TypeScript + TailwindCSS │
│ Deployed: Vercel / Cloud Run │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Backend │
│ FastAPI + Python 3.11 + Pydantic │
│ Deployed: Cloud Run │
└─────────────────────────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Supabase │ │ Claude │ │ Redis │
│ Database │ │ API │ │ Cache │
└──────────┘ └──────────┘ └──────────┘
文件结构
project/
├── frontend/
│ └── src/
│ ├── app/ # Next.js app router 页面
│ │ ├── api/ # API 路由
│ │ ├── (auth)/ # 需认证的路由
│ │ └── workspace/ # 主应用工作区
│ ├── components/ # React 组件
│ │ ├── ui/ # 基础 UI 组件
│ │ ├── forms/ # 表单组件
│ │ └── layouts/ # 布局组件
│ ├── hooks/ # 自定义 React hooks
│ ├── lib/ # 工具函数
│ ├── types/ # TypeScript 类型定义
│ └── config/ # 配置
│
├── backend/
│ ├── routers/ # FastAPI 路由处理器
│ ├── models.py # Pydantic 模型
│ ├── main.py # FastAPI 应用入口
│ ├── auth_system.py # 认证系统
│ ├── database.py # 数据库操作
│ ├── services/ # 业务逻辑
│ └── tests/ # pytest 测试
│
├── deploy/ # 部署配置
├── docs/ # 文档
└── scripts/ # 工具脚本
代码模式
API 响应格式(FastAPI)
from pydantic import BaseModel
from typing import Generic, TypeVar, Optional
T = TypeVar('T')
class ApiResponse(BaseModel, Generic[T]):
success: bool
data: Optional[T] = None
error: Optional[str] = None
@classmethod
def ok(cls, data: T) -> "ApiResponse[T]":
return cls(success=True, data=data)
@classmethod
def fail(cls, error: str) -> "ApiResponse[T]":
return cls(success=False, error=error)
前端 API 调用(TypeScript)
interface ApiResponse<T> {
success: boolean
data?: T
error?: string
}
async function fetchApi<T>(
endpoint: string,
options?: RequestInit
): Promise<ApiResponse<T>> {
try {
const response = await fetch(`/api${endpoint}`, {
...options,
headers: {
'Content-Type': 'application/json',
...options?.headers,
},
})
if (!response.ok) {
return { success: false, error: `HTTP ${response.status}` }
}
return await response.json()
} catch (error) {
return { success: false, error: String(error) }
}
}
Claude AI 集成(结构化输出)
from anthropic import Anthropic
from pydantic import BaseModel
class AnalysisResult(BaseModel):
summary: str
key_points: list[str]
confidence: float
async def analyze_with_claude(content: str) -> AnalysisResult:
client = Anthropic()
response = client.messages.create(
model="claude-sonnet-4-5-20250514",
max_tokens=1024,
messages=[{"role": "user", "content": content}],
tools=[{
"name": "provide_analysis",
"description": "Provide structured analysis",
"input_schema": AnalysisResult.model_json_schema()
}]
)
兼容工具
Claude CodeCursor
标签
前端开发