mcpField
P
project-structure

project-structure

github.com/elie222开发12.8k37 次安装1 天前更新
代码仓库

关于 project-structure

该技能文档说明使用 Turborepo 和 pnpm workspaces 的项目目录布局与代码组织约定，面向开发该 Next.js 应用的人员。内容涵盖页面、组件、工具函数及命名规则。

主要功能

  1. 01介绍应用与包目录布局
  2. 02说明页面和组件的放置方式
  3. 03列出文件命名约定
  4. 04指导工具函数组织与导入

适用场景

  1. 01定位主应用或共享包代码
  2. 02创建符合约定的新页面
  3. 03组织可复用的工具函数

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/elie222/inbox-zero --skill project-structure

安装后在 Claude Code 中输入/project-structure确认已加载。

详细介绍

项目结构

主要结构

  • 我们使用 Turborepo 和 pnpm 工作区
  • 主应用位于 apps/web
  • 软件包位于 packages 文件夹
  • Server actions 位于 apps/web/utils/actions 文件夹
.
├── apps
│   ├── web/             # Main Next.js application
│   │   ├── app/         # Next.js App Router
│   │   │   ├── (app)/   # Main application pages
│   │   │   │   ├── assistant/     # AI assistant feature
│   │   │   │   ├── reply-zero/     # Reply Zero feature
│   │   │   │   ├── settings/       # User settings
│   │   │   │   ├── setup/          # Main onboarding
│   │   │   │   ├── clean/          # Bulk email cleanup
│   │   │   │   ├── smart-categories/ # Smart sender categorization
│   │   │   │   ├── bulk-unsubscribe/ # Bulk unsubscribe
│   │   │   │   ├── stats/          # Email analytics
│   │   │   │   ├── mail/           # Email client (in beta)
│   │   │   │   └── ... (other app routes)
│   │   │   ├── api/    # API Routes
│   │   │   │   ├── knowledge/      # Knowledge base API
│   │   │   │   ├── reply-tracker/  # Reply tracking
│   │   │   │   ├── clean/          # Cleanup API
│   │   │   │   ├── ai/            # AI features API
│   │   │   │   ├── user/          # User management
│   │   │   │   ├── google/        # Google integration
│   │   │   │   ├── auth/          # Authentication
│   │   │   │   └── ... (other APIs)
│   │   │   ├── (landing)/  # Marketing/landing pages
│   │   │   ├── blog/       # Blog pages
│   │   │   ├── layout.tsx  # Root layout
│   │   │   └── ... (other app files)
│   │   ├── utils/       # Utility functions and helpers
│   │   │   ├── actions/    # Server actions
│   │   │   ├── ai/         # AI-related utilities
│   │   │   ├── llms/       # Language model utilities
│   │   │   ├── gmail/      # Gmail integration utilities
│   │   │   ├── redis/      # Redis utilities
│   │   │   ├── user/       # User-related utilities
│   │   │   ├── parse/      # Parsing utilities
│   │   │   ├── queue/      # Queue management
│   │   │   ├── error-messages/  # Error handling
│   │   │   └── *.ts        # Other utility files (auth, email, etc.)
│   │   ├── public/      # Static assets (images, fonts)
│   │   ├── prisma/      # Prisma schema and client
│   │   ├── styles/      # Global CSS styles
│   │   ├── providers/   # React Context providers
│   │   ├── hooks/       # Custom React hooks
│   │   ├── sanity/      # Sanity CMS integration
│   │   ├── __tests__/   # AI test files (Vitest)
│   │   ├── scripts/     # Utility scripts
│   │   ├── store/       # State management
│   │   ├── types/       # TypeScript type definitions
│   │   ├── next.config.mjs
│   │   ├── package.json
│   │   └── ... (config files)
├── packages
    ├── tinybird/
    ├── loops/
    ├── resend/
    ├── tinybird-ai-analytics/
    └── tsconfig/

文件命名与组织

  • 路由目录使用 kebab case 命名（例如，api/hello-world/route）
  • 组件使用 PascalCase 命名（例如，components/Button.tsx）
  • Shadcn 组件位于 components/ui
  • 其他组件都位于 components/
  • 除非文件可在整个应用中使用，否则将文件与其使用位置放在同一目录中
  • 如果某个组件可在多个位置使用，则将其放在 components 文件夹中

新建页面

  • 在此处创建新页面：apps/web/app/(app)/PAGE_NAME/page.tsx
  • 页面的组件可放在 page.tsx 中，也可放在 apps/web/app/(app)/PAGE_NAME 文件夹中
  • 页面使用 Server 组件，以便直接加载数据
  • 在深层嵌套的组件中使用 swr 获取数据
  • 带有 onClick 的组件必须是带有 use client 指令的客户端组件
  • Server action 文件必须以 use server 开头

工具函数

  • 在 utils/ 文件夹中创建可复用逻辑的工具函数
  • 使用 lodash 工具处理常见操作（数组、对象、字符串）
  • 导入特定的 lodash 函数以缩小打包体积： 
    import groupBy from "lodash/groupBy";

评论

支持 Markdown