mcpField
O
organizing-project-files

organizing-project-files

github.com/augmnt开发249 次安装40 周前更新
代码仓库

关于 organizing-project-files

面向 React 和 Next.js 代码库的项目文件组织技能，帮助开发者统一文件放置方式，优先按功能就近组织，仅将真正共享的代码按类型归类。

主要功能

  1. 01按功能就近组织文件
  2. 02标准源码目录布局
  3. 03文件放置指引
  4. 04命名规范
  5. 05复杂功能组织模式

适用场景

  1. 01整理组件、Hook 和工具
  2. 02将功能代码与测试放在一起
  3. 03确定 API 与状态文件的位置

安装

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

$npx skills add https://github.com/augmnt/webdev-skills --skill organizing-project-files

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

附带文件PATTERNS.md

详细介绍

组织项目文件

尽可能按功能就近组织。只有真正共享的代码才按类型归类。

标准布局

src/
├── app/                    # Next.js App Router (or pages/)
├── components/
│   ├── ui/                 # Reusable primitives (Button, Modal)
│   └── [feature]/          # Feature-specific (auth/, dashboard/)
├── hooks/                  # Custom React hooks
├── lib/                    # Core utilities, clients, constants
├── services/               # API calls, external integrations
├── stores/                 # State management
└── types/                  # TypeScript definitions

文件位置速查

“我需要……”位置
一个按钮components/ui/Button.tsx
一个登录表单components/auth/LoginForm.tsx
用户数据获取services/user.ts 或 hooks/queries/useUser.ts
日期格式化程序lib/utils.ts
身份验证状态stores/auth.ts
Supabase 类型types/supabase.ts（生成的）
自定义类型types/index.ts 或就近放置

命名

  • 组件：PascalCase.tsx
  • Hooks：useCamelCase.ts
  • 工具函数：camelCase.ts
  • 类型：camelCase.ts

就近组织模式

对于复杂功能，将相关文件放在一起：

components/auth/
├── LoginForm.tsx
├── LoginForm.test.tsx
├── useLoginForm.ts
└── login-schema.ts

高级模式

有关 App Router 的具体用法、barrel 文件和 monorepo 结构，请参阅 PATTERNS.md。

评论

支持 Markdown