Source File Layout
Decides where a file lives, how it is named and where its tests go.
Install
npx skills add lobehub/lobehub --skill source-layout -g -a claude-code -y- Repository
- lobehub/lobehub83.7k
- Category
- Engineering
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 2,119 tokens
- Runs scripts
- No, instructions only
What it does
Use for where a file lives, how it is named, where its tests go, and how to split a source or test file over 1200 lines (拆分大文件, 目录结构, 文件命名).
Source Layout
Top-level ownership (src/features, src/routes, apps/server/src, packages, …) is in AGENTS.md and project-overview. This skill owns placement and naming inside those roots, test placement, and how a large file becomes a directory. The rules record the conventions the codebase already follows; where it was split between two forms, the rule names the one to use for new files. Do not rename existing files only to match.
1. Names
| What | Form | Example |
|---|---|---|
| React component file / component directory | PascalCase | PlanCard.tsx, ChatInput/ControlBar/ |
| Hook | useXxx.ts(x) | ChatInputNotice/useChatInputNotice.ts |
| Other module | camelCase or one word | originLink.ts, recentDirs.ts |
| Server class module | the class name | services/agentRuntime/StaleOperationReaper.ts |
| Service, router, store, and other non-component dirs | camelCase | services/aiAgent/, store/chat/slices/ |
| Package directory | kebab-case | packages/agent-runtime/ |
| Files inside a package | camelCase | packages/database/src/models/ |
