Files
nexus/Project/fonrey/TECH_STACK/TECH_STACK 文档要求.md
2026-04-23 19:25:35 +08:00

161 lines
4.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
#### 1. 项目概览Project Overview
用 2-3 句话说清楚这是什么项目、核心用途、目标用户。AI 需要这个"北极星"来判断所有技术取舍。
md
```md
## Project Overview
A B2B SaaS invoice management tool. Target users are SMB accountants.
Prioritize reliability and data integrity over flashy UI.
```
---
#### 2. 核心技术栈Core Stack
每一层都要写清楚,**不要只写框架名,要写版本号和选型原因**。
md
```md
## Core Stack
- Runtime: Node.js 22 (not Bun, not Deno)
- Framework: Next.js 15 (App Router only, never Pages Router)
- Language: TypeScript 5.x, strict mode enabled
- Database: PostgreSQL 16 via Supabase
- ORM: Drizzle ORM (not Prisma)
- Styling: Tailwind CSS v4 + shadcn/ui
- Auth: Clerk
- Deployment: Vercel
```
---
#### 3. 关键约定Key Conventions
这是 vibe coding 最容易出错的地方AI 会有自己的"默认习惯",必须显式覆盖。
md
```md
## Key Conventions
- File naming: kebab-case for files, PascalCase for components
- All server actions in /actions, never inline in components
- Use `server components` by default; add 'use client' only when needed
- Environment variables: never hardcode, always use process.env.NEXT_PUBLIC_*
- Error handling: always use Result pattern, never throw in server actions
- No `any` types. No `// @ts-ignore`.
```
---
#### 4. 目录结构Directory Structure
AI 需要知道把新文件放在哪里,否则它会自己"发明"结构。
md
```md
## Directory Structure
src/
├── app/ # Next.js routes only, minimal logic
├── components/ # Reusable UI components
│ └── ui/ # shadcn primitives, DO NOT edit
├── actions/ # Server actions
├── lib/ # Utilities and helpers
├── db/ # Drizzle schema and migrations
└── types/ # Global TypeScript types
```
---
#### 5. 明确禁止的东西Explicitly Forbidden
这是最被忽视但最重要的部分。告诉 AI **不要用什么**,比告诉它用什么更有效。
md
```md
## Do NOT Use
-`axios` — use native `fetch`
-`moment.js` — use `date-fns`
-`useEffect` for data fetching — use server components or React Query
-`pages/` directory — App Router only
-`class components` — functional only
- ❌ CSS Modules or styled-components — Tailwind only
-`console.log` in production code
```
---
#### 6. 第三方服务与集成External Services
列出已经接入的服务,避免 AI 重复造轮子或引入冲突的 SDK。
md
```md
## External Services
- Payments: Stripe (already configured in /lib/stripe.ts)
- Email: Resend + React Email templates
- File storage: Supabase Storage (not S3)
- Analytics: PostHog
- Error tracking: Sentry
```
---
#### 7. 代码风格与 LintingCode Style
md
```md
## Code Style
- Formatter: Prettier (config in .prettierrc)
- Linter: ESLint with eslint-config-next
- Imports: absolute paths via `@/` alias, no relative `../../`
- Prefer `const` over `let`, avoid `var`
- Async/await over `.then()` chains
```
---
#### 8. 测试策略Testing, 如果有的话)
md
```md
## Testing
- Unit tests: Vitest
- E2E tests: Playwright (critical flows only)
- No snapshot tests
- Test files co-located: `component.test.ts` next to `component.ts`
```
---
### 一个实用的小技巧
在文件开头加一句 AI 专用说明:
md
```md
> **For AI assistants**: Read this entire file before writing any code.
> All decisions here are final. Do not suggest alternatives unless asked.
```
---
### 内容优先级总结
|优先级|内容|原因|
|---|---|---|
|🔴 必须|核心技术栈 + 禁止列表|防止 AI 用错库|
|🔴 必须|目录结构 + 文件约定|防止结构混乱|
|🟡 重要|外部服务清单|防止重复实现|
|🟡 重要|关键约定|保持风格一致|
|🟢 加分|测试策略 + 代码风格|提升整体质量|
**核心原则**:写给 AI 看的文档要比写给人看的**更具体、更强硬、更少歧义**。任何"视情况而定"的描述AI 都会做出你不想要的选择。