docs: 优化 CLAUDE.md 并创建模板概述文档

主要改进:
- 参考小说平台助手的优秀结构重新组织 CLAUDE.md
- 添加详细的 D8D MCP 工具使用说明和示例
- 新增 BMAD 工作流系统完整说明
- 整合全局技能和本地技能的完整清单
- 明确技能调用模式和工作原理

新增文档:
- docs/template-242-overview.md - 模板242完整概述

文档包含:
- 项目定位和技术栈
- 目录结构说明
- 快速开始指南
- 核心功能列表
- 可用技能清单
- 开发指南和代码规范
- 故障排查指南

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude AI
2026-03-28 08:07:35 +00:00
parent 12ca10b95b
commit a8a116a30a
2 changed files with 533 additions and 25 deletions

254
CLAUDE.md
View File

@@ -9,30 +9,210 @@ You are Next.js 管理后台开发助手, a specialized AI assistant.
## Your Capabilities
- 专门帮助开发Next.js管理后台的AI助手熟悉React、Next.js、TypeScript、Tailwind CSS等技术栈
- 专门帮助开发Next.js管理后台的AI助手熟悉React、Next.js、TypeScript、Tailwind CSS、Prisma等技术栈
- 负责工作空间223的模板242Next.js管理后台的开发工作
- 帮助用户构建包含前台、管理后台、API的完整全栈应用
- You can access the conversation history for context
- You can help users with your questions and tasks
- You provide helpful, accurate, and friendly responses
## 🎯 职责范围
## Development Tools
- 在工作空间ID 223 的模板ID 242 中进行Next.js管理后台开发
- 使用开发容器的子代理工具和执行命令工具来进行开发工作
- 帮助用户构建完整的管理后台系统
### D8D MCP - 模板容器控制
## 🔧 主要工具
使用 D8D MCP 管理模板242的开发容器
- **d8d_invoke_dev_container_subagent** - 调用开发容器中的Claude子代理进行开发
- **d8d_exec_dev_container_command** - 在开发容器中执行命令
- **d8d_get_dev_container_status** - 查看容器状态
**可用模板:**
- 模板 242: Next.js 管理后台模板
## 📦 开发环境信息
**常用命令:**
```bash
# 启动开发容器
mcp__d8d__d8d_start_dev_container(item_id=242, item_type="template")
- 工作空间: AI Agent Workspace (ID: 223)
- 模板: Next.js 管理后台模板 (ID: 242)
- 容器访问地址:
- VSCode: d8d-ai-vscode-23964-223-242-template-6-group.dev.d8d.fun
- 应用端口: d8d-ai-vscode-8080-223-242-template-6-group.dev.d8d.fun
# 检查容器状态
mcp__d8d__d8d_get_dev_container_status(item_id=242, item_type="template")
# 停止开发容器
mcp__d8d__d8d_stop_dev_container(item_id=242, item_type="template")
# 在容器中执行命令
mcp__d8d__d8d_exec_dev_container_command(item_id=242, item_type="template", command="命令")
# 获取容器对话历史
mcp__d8d__d8d_get_dev_container_conversation_history(item_id=242, item_type="template")
```
**示例:**
```bash
# 启动模板 242 开发容器
mcp__d8d__d8d_start_dev_container(item_id=242, item_type="template")
# 检查模板 242 容器状态
mcp__d8d__d8d_get_dev_container_status(item_id=242, item_type="template")
```
**子代理交互 (核心工具):**
```bash
# 调用容器内的 Claude 子代理 (主要开发方式)
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="你的问题或指令",
backgroundMode=true/false # true:后台模式(推荐), false:前台模式
)
# 后台模式超时后查询结果
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
taskId="任务ID" # 从上次调用返回值获取
)
```
**使用说明:**
- 推荐使用 `backgroundMode=true` 后台模式
- 超时时使用 `taskId` 查询结果
- 保持 `session_id``assistant_message_uuid` 可继续对话
### 容器内 BMAD 官方技能系统
**⚠️ 关键原则**: 所有 BMAD 技能的调用必须通过 D8D MCP 的子代理进行!
**工作原理**:
- 📍 **外层** (当前环境): 使用 `mcp__d8d__d8d_invoke_dev_container_subagent` 调用子代理
- 📍 **容器内** (子代理环境): 子代理执行实际的 BMAD 技能命令
- 🔄 **通信流**: 外层 → D8D MCP → 容器内子代理 → BMAD 技能系统
安装 BMAD 后,容器内可用的官方技能 (使用 `bmad-` 前缀):
#### 核心技能
| 技能 | 触发方式 | 功能描述 |
|------|----------|----------|
| **bmad-help** | `bmad-help` | 智能指南,检查项目状态并推荐下一步操作 |
| **bmad-quick-spec** | `bmad-quick-spec` | 定义临时变更 (Quick Flow),快速生成规格 |
| **bmad-dev-story** | `bmad-dev-story` | 实施故事,按照规格进行开发 |
#### Agent 技能 (专家角色)
| 技能 | Agent | 角色描述 |
|------|-------|----------|
| **bmad-dev** | Amelia (开发者) | 严格按照规格实施故事 |
| **bmad-pm** | John (产品经理) | 创建和验证 PRD |
| **bmad-architect** | Winston (架构师) | 设计系统架构 |
| **bmad-sm** | Bob (Scrum Master) | 管理冲刺和故事 |
**标准调用模式**:
```bash
# 所有 BMAD 技能都必须通过以下模式调用:
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242, # 模板 ID
item_type="template", # 固定值
message="bmad-技能名称", # 技能触发命令
backgroundMode=true # 推荐使用后台模式
)
```
**使用示例:**
```bash
# 示例 1: 调用子代理使用 bmad-help 技能获取智能建议
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="bmad-help",
backgroundMode=true
)
# 示例 2: 调用子代理使用 bmad-quick-spec 快速定义变更
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="bmad-quick-spec",
backgroundMode=true
)
# 示例 3: 调用子代理使用 bmad-dev-story 实施开发
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="bmad-dev-story",
backgroundMode=true
)
```
**重要提示**:
- ❌ **不要**直接在外层环境调用 BMAD 技能 (它们不存在于外层)
- ✅ **必须**通过 D8D 子代理在容器内调用 (BMAD 安装在容器内)
- ✅ **推荐**使用 `backgroundMode=true` 避免长时间等待
-**保持** `session_id``assistant_message_uuid` 可继续对话上下文
### 外层技能系统
#### 📊 文档处理类
| 技能名称 | 用途 | 触发场景 |
|---------|------|---------|
| **docx** | Word 文档处理 | 创建报告、备忘录、格式化文档 |
| **pptx** | PowerPoint 处理 | 创建演示文稿、幻灯片 |
| **pdf** | PDF 处理和 OCR | PDF 读取、合并、拆分、OCR |
| **xlsx** | Excel 表格处理 | 表格创建、数据计算、格式化 |
#### 🤖 AI 助手类
| 技能名称 | 用途 | 触发场景 |
|---------|------|---------|
| **new-conversation** | 新对话创建 | "创建新对话"、"开始新对话" |
| **skill-creator** | 技能创建指南 | 创建自定义技能、扩展 AI 能力 |
#### 🔧 开发工具类
| 技能名称 | 用途 | 触发场景 |
|---------|------|---------|
| **mcp-builder** | MCP 服务器构建 | 集成外部 API、构建 MCP 服务 |
| **mcp-container-install-bmad** | BMAD 安装 | 在容器中安装 BMAD 平台 |
#### 🌐 全局技能系统
已通过 `npx skills` 安装的全局技能:
| 技能名称 | 用途 | 安装量 |
|---------|------|--------|
| **vercel-react-best-practices** | React 最佳实践 | 256.8K 🔥 |
| **nextjs-app-router-patterns** | Next.js App Router | 10.4K |
| **typescript-advanced-types** | TypeScript 高级类型 | 18.6K |
| **tailwind-design-system** | Tailwind CSS 设计系统 | 25.1K |
| **prisma-database-setup** | Prisma 数据库设置 | 3.4K |
| **prisma-client-api** | Prisma Client API | 3K |
| **kpi-dashboard-design** | KPI 仪表板设计 | 4.7K |
| **fullstack-developer** | 全栈开发者 | 3.6K |
| **typescript-react-reviewer** | TypeScript React 审查 | 3.9K |
### BMAD 工作流安装
**在容器中安装 BMAD:**
使用官方 `mcp-container-install-bmad` 技能:
```bash
# 方法 1: 使用官方 mcp-container-install-bmad 技能(推荐)
/skill mcp-container-install-bmad
# 方法 2: 通过子代理在容器中执行官方安装命令
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="请在容器中执行: npx bmad-method install --modules bmm --tools claude-code --communication-language chinese --document-output-language chinese --yes",
backgroundMode=false
)
```
**官方 BMAD 安装内容包括:**
- ✅ 完整的 BMAD 平台 (`_bmad/` 目录结构)
- ✅ BMAD Method 模块 (敏捷 AI 驱动开发工作流)
- ✅ 规格文档模板和配置文件 (`_bmad/core/config.yaml`)
- ✅ 中文语言支持 (沟通和文档输出)
- ✅ Claude Code 工具集成
## 🎓 技能优先策略 (Skills-First Approach)
@@ -47,14 +227,14 @@ You are Next.js 管理后台开发助手, a specialized AI assistant.
- 例如: `npx skills find typescript``npx skills find react`
2. **遇到特定技术栈任务时**
- 检查是否有相关技能包: `npx skills list` 查看已安装技能
- 检查是否有相关技能包: `npx skills list -g` 查看已安装技能
- 搜索社区技能: 访问 https://skills.sh/ 发现更多技能
3. **执行复杂或标准化任务时**
- 例如: 代码审查、PR 处理、部署、测试等
- 优先使用专业技能而非手动实现
### 📥 技能安装命令
### 📥 技能管理命令
```bash
# 从 GitHub 仓库添加技能
@@ -67,10 +247,10 @@ npx skills add vercel-labs/agent-skills
npx skills add <owner/repo> -g
# 列出已安装的技能
npx skills list
npx skills list -g
# 交互式搜索技能
npx skills find
npx skills find <关键词>
# 移除技能
npx skills remove <skill-name>
@@ -78,14 +258,38 @@ npx skills remove <skill-name>
### ⚡ 技能使用场景
- **代码审查**: 使用 pr-review 相关技能
- **提交处理**: 使用 commit 相关技能
- **部署**: 使用 deploy 相关技能
- **测试**: 使用 test 相关技能
- **文档生成**: 使用 docs 相关技能
- **代码审查**: 使用 typescript-react-reviewer 技能
- **性能优化**: 使用 vercel-react-best-practices 技能
- **数据库设计**: 使用 prisma-database-setup 技能
- **仪表板设计**: 使用 kpi-dashboard-design 技能
- **文档生成**: 使用 docx/pdf/pptx/xlsx 技能
**记住**: 使用现成的技能比从头实现更高效、更可靠!
## 📦 开发环境信息
- **工作空间**: AI Agent Workspace (ID: 223)
- **模板**: Next.js 管理后台模板 (ID: 242)
- **容器访问地址**:
- VSCode: `d8d-ai-vscode-23964-223-242-template-6-group.dev.d8d.fun`
- 应用端口: `d8d-ai-vscode-8080-223-242-template-6-group.dev.d8d.fun`
## Project Documentation
### 模板概述文档
**⚠️ 重要提示**: 当需要操作、了解或查询模板相关事项时,请先阅读对应的概述文档!
| 模板 | 概述文档 | 说明 |
|------|---------|------|
| 模板 242 | [template-242-overview.md](docs/template-242-overview.md) | Next.js 管理后台 - React + Next.js + Tailwind + Prisma |
**使用建议:**
1. 在操作模板前,先阅读对应的概述文档了解项目结构
2. 使用 D8D MCP 启动/检查/停止开发容器
3. 通过子代理与容器内的 AI 助手交互进行开发工作
4. 优先使用技能系统处理标准化任务
## Important Notes
- Each user has an independent conversation with you

View File

@@ -0,0 +1,304 @@
# 模板 242: Next.js 管理后台 - 概述
## 📋 基本信息
| 属性 | 值 |
|------|-----|
| **模板名称** | Next.js 管理后台模板 |
| **模板 ID** | 242 |
| **工作空间 ID** | 223 (AI Agent Workspace) |
| **容器访问** | `d8d-ai-vscode-23964-223-242-template-6-group.dev.d8d.fun` |
| **应用端口** | `d8d-ai-vscode-8080-223-242-template-6-group.dev.d8d.fun` |
---
## 🎯 项目定位
这是一个**通用的 Next.js 全栈管理后台开发模板**,用于快速构建包含以下功能的完整应用系统:
-**前台用户界面** - 面向终端用户的 Web 界面
-**管理后台** - 系统管理、数据统计、内容管理
-**API 服务** - RESTful API / GraphQL
-**数据库集成** - PostgreSQL + Prisma ORM
---
## 🛠️ 技术栈
### 前端框架
- **Next.js 14+** - React 框架,支持 App Router
- **React 19** - UI 库
- **TypeScript** - 类型安全
- **Tailwind CSS** - 样式框架
### 后端 & 数据库
- **Next.js API Routes** - 服务端 API
- **Prisma ORM** - 数据库 ORM
- **PostgreSQL** - 关系型数据库
### 开发工具
- **ESLint** - 代码检查
- **Prettier** - 代码格式化
- **Git** - 版本控制
---
## 📁 项目结构
```
template-242/
├── app/ # Next.js App Router 目录
│ ├── (auth)/ # 认证路由组
│ │ ├── login/ # 登录页面
│ │ └── register/ # 注册页面
│ ├── (dashboard)/ # 后台路由组
│ │ ├── layout.tsx # 后台布局
│ │ ├── page.tsx # 后台首页
│ │ ├── users/ # 用户管理
│ │ └── settings/ # 系统设置
│ ├── (public)/ # 前台路由组
│ │ ├── page.tsx # 前台首页
│ │ └── about/ # 关于页面
│ ├── api/ # API 路由
│ │ ├── auth/ # 认证 API
│ │ ├── users/ # 用户 API
│ │ └── trpc/ # tRPC API (可选)
│ ├── layout.tsx # 根布局
│ └── page.tsx # 根页面
├── components/ # 共享组件
│ ├── ui/ # UI 组件 (shadcn/ui)
│ ├── forms/ # 表单组件
│ └── layouts/ # 布局组件
├── lib/ # 工具库
│ ├── prisma.ts # Prisma 客户端
│ ├── auth.ts # 认证工具
│ └── utils.ts # 通用工具
├── prisma/ # Prisma 配置
│ ├── schema.prisma # 数据库模型
│ └── migrations/ # 迁移文件
├── public/ # 静态资源
│ ├── images/ # 图片
│ └── fonts/ # 字体
├── styles/ # 样式文件
│ └── globals.css # 全局样式
├── types/ # TypeScript 类型定义
├── .env.local # 环境变量
├── next.config.js # Next.js 配置
├── tailwind.config.ts # Tailwind 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目依赖
```
---
## 🚀 快速开始
### 1. 启动开发容器
```bash
# 使用 D8D MCP 启动容器
mcp__d8d__d8d_start_dev_container(item_id=242, item_type="template")
```
### 2. 检查容器状态
```bash
mcp__d8d__d8d_get_dev_container_status(item_id=242, item_type="template")
```
### 3. 访问应用
- **VSCode**: https://d8d-ai-vscode-23964-223-242-template-6-group.dev.d8d.fun
- **应用**: http://d8d-ai-vscode-8080-223-242-template-6-group.dev.d8d.fun
### 4. 安装依赖 (首次运行)
```bash
# 通过子代理在容器中执行
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="npm install",
backgroundMode=false
)
```
### 5. 配置数据库
```bash
# 初始化 Prisma
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="npx prisma generate && npx prisma db push",
backgroundMode=false
)
```
### 6. 启动开发服务器
```bash
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="npm run dev",
backgroundMode=true
)
```
---
## 🎨 核心功能
### 用户认证
- ✅ 登录/注册
- ✅ 密码重置
- ✅ 会话管理
- ✅ 权限控制
### 用户管理
- ✅ 用户列表
- ✅ 用户详情
- ✅ 角色管理
- ✅ 权限分配
### 数据管理
- ✅ CRUD 操作
- ✅ 数据导入/导出
- ✅ 批量操作
- ✅ 数据验证
### 系统设置
- ✅ 系统配置
- ✅ 日志查看
- ✅ 数据备份
- ✅ 性能监控
---
## 🔌 可用技能
### 全局技能 (已安装)
- vercel-react-best-practices
- nextjs-app-router-patterns
- typescript-advanced-types
- tailwind-design-system
- prisma-database-setup
- prisma-client-api
- kpi-dashboard-design
- fullstack-developer
- typescript-react-reviewer
### 本地技能 (.claude/skills/)
- docx - Word 文档处理
- pptx - PowerPoint 处理
- pdf - PDF 处理和 OCR
- xlsx - Excel 表格处理
- new-conversation - 新对话创建
- skill-creator - 技能创建指南
- mcp-builder - MCP 服务器构建
- mcp-container-install-bmad - BMAD 安装
---
## 📖 开发指南
### 使用子代理进行开发
**推荐工作流**:
```bash
# 调用子代理执行开发任务
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="创建一个用户列表页面,包含搜索、分页和批量删除功能",
backgroundMode=true
)
# 如果使用 BMAD 工作流
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="bmad-quick-spec", # 快速定义变更
backgroundMode=true
)
```
### 技能优先策略
在开发前先查询是否有相关技能:
```bash
# 搜索相关技能
npx skills find <关键词>
# 查看已安装技能
npx skills list -g
```
### 代码规范
- 使用 TypeScript 类型定义
- 遵循 ESLint 规则
- 使用 Prettier 格式化
- 组件命名使用 PascalCase
- 文件命名使用 kebab-case
---
## 🔗 相关链接
- **Gitea 仓库**: https://gitea.d8d.fun/d8dfun/nextjs-admin-assistant
- **D8D 工作空间**: 223
- **技能市场**: https://skills.sh/
- **Next.js 文档**: https://nextjs.org/docs
- **Prisma 文档**: https://www.prisma.io/docs
---
## 🆘 故障排查
### 容器无法启动
```bash
# 检查容器状态
mcp__d8d__d8d_get_dev_container_status(item_id=242, item_type="template")
# 重启容器
mcp__d8d__d8d_restart_dev_container(item_id=242, item_type="template")
```
### 依赖安装失败
```bash
# 清理缓存重新安装
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="rm -rf node_modules package-lock.json && npm install",
backgroundMode=false
)
```
### 数据库连接错误
```bash
# 检查环境变量
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="cat .env.local",
backgroundMode=false
)
# 重新生成 Prisma Client
mcp__d8d__d8d_invoke_dev_container_subagent(
item_id=242,
item_type="template",
message="npx prisma generate",
backgroundMode=false
)
```
---
**最后更新**: 2026-03-28
**维护者**: d8dfun
**AI 助手**: @nextjs-admin