cleanslice

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

CleanSlice

Quick Start

快速开始

CleanSlice organizes code into vertical slices — self-contained feature modules following Clean Architecture.

Fixed stack: NestJS + Prisma (API) · Nuxt 3 + Vue 3 + Pinia (App) · Tailwind + shadcn-vue (UI)

CleanSlice 将代码组织为垂直切片——遵循整洁架构的独立功能模块。

固定技术栈： NestJS + Prisma（API）· Nuxt 3 + Vue 3 + Pinia（应用）· Tailwind + shadcn-vue（UI）

Quick Reference

快速参考

Need	Answer
Slice folder name	SINGULAR: `user/` not `users/`
Route/page files	PLURAL: `/users` , `users.vue`
DTO file name	camelCase: `createUser.dto.ts`
Data access layer	Gateway (NOT Repository)
State management	Pinia `stores/` (NOT composables)
Component entry	`Provider.vue` required in every folder
DI tokens	Abstract class with `I` prefix: `IUserGateway`
Backend order	schema → types → gateway → service → mapper → dtos → controller → module
Frontend order	nuxt.config → stores → components → pages
Implementation order	API first, then App

需求	说明
切片文件夹名称	单数形式： `user/` 而非 `users/`
路由/页面文件	复数形式： `/users` 、 `users.vue`
DTO文件名	小驼峰命名： `createUser.dto.ts`
数据访问层	Gateway（而非 Repository）
状态管理	Pinia `stores/` （而非 composables）
组件入口	每个文件夹中必须包含 `Provider.vue`
DI 令牌	以 `I` 为前缀的抽象类： `IUserGateway`
后端顺序	schema → types → gateway → service → mapper → dtos → controller → module
前端顺序	nuxt.config → stores → components → pages
实现顺序	先开发API，再开发应用

Bundled Resources

内置资源

References (

references/

```
workflow.md
```
— Four-phase workflow, fix-bug workflow, git commits, system prompt
```
backend.md
```
— NestJS slice structure, module, controller, service, gateway, mapper, DTOs, types
```
frontend.md
```
— Nuxt slice structure, auto-imports, Provider.vue, stores, composables
```
gateway.md
```
— Gateway pattern with full code examples (abstract class, DI wiring)
```
typescript.md
```
— TypeScript standards (no-any, I prefix, Types suffix, import aliases)
```
errors.md
```
— Error pattern (BaseError, domain errors, interceptor, no try/catch in controllers)

参考文档（

references/

）：

```
workflow.md
```
— 四阶段工作流、Bug修复工作流、Git提交规范、系统提示词
```
backend.md
```
— NestJS切片结构、模块、控制器、服务、网关、映射器、DTO、类型定义
```
frontend.md
```
— Nuxt切片结构、自动导入、Provider.vue、状态管理、组合式函数
```
gateway.md
```
— 网关模式及完整代码示例（抽象类、DI注入配置）
```
typescript.md
```
— TypeScript规范（禁用any、I前缀、Types后缀、导入别名）
```
errors.md
```
— 错误处理模式（BaseError、领域错误、拦截器、控制器中不使用try/catch）

When to Load References

何时加载参考文档

Load
references/workflow.md
when:
- Starting any new feature, project, or bug fix
- User asks how to plan or structure work
- Need the four-phase workflow or system prompt
- Trigger phrases: "new feature", "add", "create", "build", "implement", "plan", "start"
Load
references/backend.md
when:
- Implementing any API slice (NestJS)
- Writing controllers, gateways, mappers, DTOs, modules
- Questions about backend file structure or standards
- Trigger phrases: "controller", "DTO", "module", "NestJS", "API", "endpoint", "Prisma"
Load
references/frontend.md
when:
- Implementing any App slice (Nuxt)
- Writing stores, components, pages, composables
- Questions about auto-imports, Provider.vue, or Pinia
- Trigger phrases: "store", "page", "component", "Nuxt", "Vue", "Provider", "frontend"
Load
references/gateway.md
when:
- Implementing data access layer
- Questions about Gateway vs Repository
- DI injection tokens and abstract class pattern
- Trigger phrases: "gateway", "repository", "data layer", "inject", "DI"
Load
references/typescript.md
when:
- Questions about naming conventions or TypeScript rules
- Writing interfaces, enums, types, or imports
- Any code review or standards check
- Trigger phrases: "interface", "enum", "type", "naming", "any", "import alias", "standards"
Load
references/errors.md
when:
- Implementing error handling in any slice
- Creating domain error classes
- Questions about where errors belong or how they flow
- Trigger phrases: "error", "exception", "throw", "not found", "catch", "BaseError"

加载
references/workflow.md
的场景：
- 启动任何新功能、项目或Bug修复
- 用户询问如何规划或构建工作内容
- 需要四阶段工作流或系统提示词
- 触发关键词： 新功能、添加、创建、构建、实现、规划、启动
加载
references/backend.md
的场景：
- 实现任何API切片（NestJS）
- 编写控制器、网关、映射器、DTO、模块
- 询问后端文件结构或规范相关问题
- 触发关键词： 控制器、DTO、模块、NestJS、API、接口、Prisma
加载
references/frontend.md
的场景：
- 实现任何应用切片（Nuxt）
- 编写状态管理、组件、页面、组合式函数
- 询问自动导入、Provider.vue或Pinia相关问题
- 触发关键词： 状态管理、页面、组件、Nuxt、Vue、Provider、前端
加载
references/gateway.md
的场景：
- 实现数据访问层
- 询问Gateway与Repository的区别
- DI注入令牌及抽象类模式相关问题
- 触发关键词： gateway、repository、数据层、注入、DI
加载
references/typescript.md
的场景：
- 询问命名规范或TypeScript规则相关问题
- 编写接口、枚举、类型定义或导入语句
- 任何代码评审或规范检查场景
- 触发关键词： 接口、枚举、类型、命名、any、导入别名、规范
加载
references/errors.md
的场景：
- 在任何切片中实现错误处理
- 创建领域错误类
- 询问错误归属或流转逻辑相关问题
- 触发关键词： 错误、异常、抛出、未找到、捕获、BaseError

Critical Rules

核心规则

Mandatory Four-Phase Workflow

强制四阶段工作流

Every task follows these phases — stop and wait for user approval between each:

Phase	What You Do	End With
Phase 1	High-level plan: slices, pages, endpoints (NO file paths)	"Do you approve?" → STOP
Phase 2	Detailed plan: file paths, schemas, components, DTOs	"Do you approve?" → STOP
Phase 3	Implementation: API first, then App	—
Phase 4	Review: validate against patterns, plan next iteration	"STOP or continue?" → STOP

每个任务都需遵循以下阶段——每个阶段结束后需等待用户确认再继续：

阶段	工作内容	结束标识
阶段1	高层级规划：切片、页面、接口（不包含文件路径）	“您是否批准该规划？” → 停止
阶段2	详细规划：文件路径、Schema、组件、DTO	“您是否批准该规划？” → 停止
阶段3	开发实现：先开发API，再开发应用	—
阶段4	评审验证：对照模式检查，规划下一轮迭代	“停止或继续？” → 停止

Technology Stack (FIXED — Never Ask)

技术栈（固定——无需询问）

api/    → NestJS + Prisma
app/    → Nuxt 3 + Vue 3 + Pinia
styling → Tailwind + shadcn-vue
db      → PostgreSQL (SQLite for dev)

api/    → NestJS + Prisma
app/    → Nuxt 3 + Vue 3 + Pinia
styling → Tailwind + shadcn-vue
db      → PostgreSQL (SQLite for dev)

Slice Structure

切片结构

API slice                           App slice
api/src/slices/{slice}/             app/slices/{slice}/
├── {slice}.module.ts               ├── nuxt.config.ts
├── {slice}.controller.ts           ├── pages/
├── domain/                         │   ├── {slices}.vue        ← plural
│   ├── {slice}.types.ts            │   └── {slices}/[id].vue
│   ├── {slice}.service.ts          ← optional, for business logic
│   └── {slice}.gateway.ts          ├── components/
├── data/                           │   └── {slice}/
│   ├── {slice}.gateway.ts          │       ├── Provider.vue    ← REQUIRED
│   └── {slice}.mapper.ts           │       └── Layout.vue
└── dtos/                           ├── stores/
    ├── {slice}.dto.ts              │   └── {slice}.ts
    └── create{Slice}.dto.ts        └── composables/

API 切片                           应用切片
api/src/slices/{slice}/             app/slices/{slice}/
├── {slice}.module.ts               ├── nuxt.config.ts
├── {slice}.controller.ts           ├── pages/
├── domain/                         │   ├── {slices}.vue        ← 复数
│   ├── {slice}.types.ts            │   └── {slices}/[id].vue
│   ├── {slice}.service.ts          ← 可选，用于业务逻辑
│   └── {slice}.gateway.ts          ├── components/
├── data/                           │   └── {slice}/
│   ├── {slice}.gateway.ts          │       ├── Provider.vue    ← 必填
│   └── {slice}.mapper.ts           │       └── Layout.vue
└── dtos/                           ├── stores/
    ├── {slice}.dto.ts              │   └── {slice}.ts
    └── create{Slice}.dto.ts        └── composables/

Forbidden Patterns

禁用模式

Wrong	Correct
`.repository.ts`	`.gateway.ts`
`AiService` , `ChatService` (data access)	`AiGateway` , `ChatGateway` — external integrations are gateways
`UserRepository`	`UserGateway` (Prisma IS the repository)
`composables/useChat.ts` for state	`stores/chat.ts`
`create-message.dto.ts`	`createMessage.dto.ts`
`ChatWindow.vue`	`chat/Provider.vue`
`features/`	`slices/`
`hooks/`	`stores/`
React / Next.js / Vite	Nuxt
Express	NestJS
TypeORM	Prisma
Vanilla CSS	Tailwind + shadcn-vue
File paths in Phase 1	Save for Phase 2

错误写法	正确写法
`.repository.ts`	`.gateway.ts`
`AiService` , `ChatService` （数据访问）	`AiGateway` , `ChatGateway` — 外部集成属于网关
`UserRepository`	`UserGateway` （Prisma 就是仓库层）
`composables/useChat.ts` 用于状态管理	`stores/chat.ts`
`create-message.dto.ts`	`createMessage.dto.ts`
`ChatWindow.vue`	`chat/Provider.vue`
`features/`	`slices/`
`hooks/`	`stores/`
React / Next.js / Vite	Nuxt
Express	NestJS
TypeORM	Prisma
原生CSS	Tailwind + shadcn-vue
阶段1中包含文件路径	留到阶段2再定义

Git Commit Format

Git提交格式

<type>: <description>

Type	Description
`feat`	New feature
`fix`	Bug fix
`docs`	Documentation only
`refactor`	Code change, no feature/fix
`test`	Adding/updating tests
`chore`	Maintenance tasks

Add

for breaking changes:

feat!: change response format

Rules: lowercase · no period · imperative mood · under 72 chars

<type>: <description>

类型	说明
`feat`	新功能
`fix`	Bug修复
`docs`	仅更新文档
`refactor`	代码重构，无功能新增或Bug修复
`test`	添加/更新测试
`chore`	维护任务

重大变更需添加

：

feat!: 修改响应格式

规则：全小写 · 无句点 · 命令式语气 · 不超过72个字符

Official Documentation

官方文档

CleanSlice Docs: https://cleanslice.dev
GitHub: https://github.com/CleanSlice/studio

CleanSlice 文档：https://cleanslice.dev
GitHub：https://github.com/CleanSlice/studio