developing-lt-frontend

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

lenne.tech Frontend Development

lenne.tech 前端开发

Ecosystem Context

生态系统背景

Developers typically work in a Lerna fullstack monorepo created via

lt fullstack init

project/
├── projects/
│   ├── api/    ← nest-server-starter (depends on @lenne.tech/nest-server)
│   └── app/    ← nuxt-base-starter (depends on @lenne.tech/nuxt-extensions)
├── lerna.json
└── package.json (workspaces: ["projects/*"])

Package relationships:

nuxt-base-starter (template) → depends on @lenne.tech/nuxt-extensions (plugin)
@lenne.tech/nuxt-extensions provides pre-built composables, components, and types aligned with
```
@lenne.tech/nest-server
```
This skill covers
```
projects/app/
```
and any code using nuxt-base-starter or nuxt-extensions

开发人员通常在通过

lt fullstack init

创建的Lerna全栈单体仓库中工作：

project/
├── projects/
│   ├── api/    ← nest-server-starter (依赖于@lenne.tech/nest-server)
│   └── app/    ← nuxt-base-starter (依赖于@lenne.tech/nuxt-extensions)
├── lerna.json
└── package.json (workspaces: ["projects/*"])

包依赖关系：

nuxt-base-starter（模板）→ 依赖于**@lenne.tech/nuxt-extensions**（插件）
@lenne.tech/nuxt-extensions提供与
```
@lenne.tech/nest-server
```
对齐的预构建组合式函数、组件和类型
本技能覆盖
```
projects/app/
```
以及所有使用nuxt-base-starter或nuxt-extensions的代码

When to Use This Skill

何时使用本技能

Working with Nuxt 4 projects (nuxt.config.ts present)

Editing files in

app/components/

app/composables/

app/pages/

app/interfaces/

Creating or modifying Vue components with Nuxt UI
Integrating backend APIs via generated types (
```
types.gen.ts
```
,
```
sdk.gen.ts
```
)
Building forms with Valibot validation
Implementing authentication (login, register, 2FA, passkeys)
Working in monorepos with
```
projects/app/
```
or
```
packages/app/
```
structure

NOT for: NestJS backend development (use

generating-nest-servers

skill instead)

处理Nuxt 4项目（存在nuxt.config.ts文件）

编辑

app/components/

、

app/composables/

、

app/pages/

、

app/interfaces/

目录下的文件

使用Nuxt UI创建或修改Vue组件
通过生成的类型（
```
types.gen.ts
```
、
```
sdk.gen.ts
```
）集成后端API
使用Valibot验证构建表单
实现身份验证（登录、注册、双因素认证、密钥登录）
在采用
```
projects/app/
```
或
```
packages/app/
```
结构的单体仓库中工作

不适用于： NestJS后端开发（请改用

generating-nest-servers

技能）

CRITICAL: Real Backend Integration FIRST

重要提示：优先完成真实后端集成

Never use placeholder data, TODO comments, or manual interfaces!

Always use real API calls via
```
sdk.gen.ts
```
from the start
Always use generated types from
```
types.gen.ts
```
(never manual interfaces for DTOs)
Run
```
npm run generate-types
```
with API running before starting frontend work
Implement feature-by-feature with full backend integration

Before starting: Ensure services are running. See reference/service-health-check.md

绝对不要使用占位数据、TODO注释或手动编写的接口！

从一开始就始终通过
```
sdk.gen.ts
```
调用真实API
始终使用
```
types.gen.ts
```
生成的类型（绝对不要为DTO手动编写接口）
在开始前端工作前，启动API服务并运行
```
npm run generate-types
```
逐个功能实现，全程集成后端

开始前： 确保服务正在运行。请查看reference/service-health-check.md

Skill Boundaries

技能边界

User Intent	Correct Skill
"Build a Vue component"	THIS SKILL
"Create a Nuxt page"	THIS SKILL
"Style with TailwindCSS"	THIS SKILL
"Create a NestJS module"	generating-nest-servers
"Security audit of frontend"	general-frontend-security
"Implement with TDD"	building-stories-with-tdd

用户意图	正确技能
"构建Vue组件"	本技能
"创建Nuxt页面"	本技能
"使用TailwindCSS样式"	本技能
"创建NestJS模块"	generating-nest-servers
"前端安全审计"	general-frontend-security
"使用TDD实现功能"	building-stories-with-tdd

Related Skills

Nuxt 4 Directory Structure

Nuxt 4目录结构

app/                  # Application code (srcDir)
├── components/       # Auto-imported components
├── composables/      # Auto-imported composables
├── interfaces/       # TypeScript interfaces
├── lib/              # Utility libraries (auth-client, etc.)
├── pages/            # File-based routing
├── layouts/          # Layout components
├── utils/            # Auto-imported utilities
└── api-client/       # Generated types & SDK
server/               # Nitro server routes
public/               # Static assets
nuxt.config.ts

app/                  # 应用代码（srcDir）
├── components/       # 自动导入的组件
├── composables/      # 自动导入的组合式函数
├── interfaces/       # TypeScript接口
├── lib/              # 工具库（auth-client等）
├── pages/            # 文件式路由
├── layouts/          # 布局组件
├── utils/            # 自动导入的工具函数
└── api-client/       # 生成的类型与SDK
server/               # Nitro服务端路由
public/               # 静态资源
nuxt.config.ts

Type Rules

类型规则

Priority	Source	Use For
1.	`~/api-client/types.gen.ts`	All backend DTOs (REQUIRED)
2.	`~/api-client/sdk.gen.ts`	All API calls (REQUIRED)
3.	Nuxt UI types	Component props (auto-imported)
4.	`app/interfaces/*.interface.ts`	Frontend-only types (UI state, forms)

优先级	来源	用途
1.	`~/api-client/types.gen.ts`	所有后端DTO（必填）
2.	`~/api-client/sdk.gen.ts`	所有API调用（必填）
3.	Nuxt UI类型	组件属性（自动导入）
4.	`app/interfaces/*.interface.ts`	前端专属类型（UI状态、表单）

Standards

标准规范

Rule	Value
UI Labels	German ( `Speichern` , `Abbrechen` )
Code/Comments	English
Styling	TailwindCSS only, no `<style>`
Colors	Semantic only ( `primary` , `error` , `success` )
Types	Explicit, no implicit `any`
Backend Types	Generated only ( `types.gen.ts` )
Composables	`app/composables/use*.ts`
Shared State	`useState()` for SSR-safe state
Local State	`ref()` / `reactive()`
Forms	Valibot (not Zod)
Modals	`useOverlay()`

规则	要求
UI标签	德语（ `Speichern` 、 `Abbrechen` ）
代码/注释	英语
样式	仅使用TailwindCSS，禁止使用 `<style>` 标签
颜色	仅使用语义化颜色（ `primary` 、 `error` 、 `success` ）
类型	显式声明，禁止隐式 `any`
后端类型	仅使用生成的类型（ `types.gen.ts` ）
组合式函数	命名格式为 `app/composables/use*.ts`
共享状态	使用 `useState()` 确保SSR安全
本地状态	使用 `ref()` / `reactive()`
表单	使用Valibot（禁止使用Zod）
模态框	使用 `useOverlay()`

TDD for Frontend

前端TDD流程

1. Backend API must be complete (API tests pass)
2. Write E2E tests BEFORE implementing frontend
3. Implement components/pages until E2E tests pass
4. Debug with Chrome DevTools MCP

Complete E2E testing guide: reference/e2e-testing.md

1. 后端API必须开发完成（API测试通过）
2. 在实现前端前先编写端到端测试
3. 实现组件/页面直到端到端测试通过
4. 使用Chrome DevTools MCP调试

完整端到端测试指南：reference/e2e-testing.md

Reference Files

参考文件

Topic	File
Core Patterns	reference/patterns.md
Service Health Check	reference/service-health-check.md
Browser Testing	reference/browser-testing.md
TypeScript	reference/typescript.md
Components	reference/components.md
Composables	reference/composables.md
Forms	reference/forms.md
Modals	reference/modals.md
API	reference/api.md
Colors	reference/colors.md
Nuxt Patterns	reference/nuxt.md
Authentication	reference/authentication.md
E2E Testing	reference/e2e-testing.md
Troubleshooting	reference/troubleshooting.md
Security	reference/security.md

主题	文件
核心模式	reference/patterns.md
服务健康检查	reference/service-health-check.md
浏览器测试	reference/browser-testing.md
TypeScript	reference/typescript.md
组件	reference/components.md
组合式函数	reference/composables.md
表单	reference/forms.md
模态框	reference/modals.md
API	reference/api.md
颜色	reference/colors.md
Nuxt模式	reference/nuxt.md
身份验证	reference/authentication.md
端到端测试	reference/e2e-testing.md
故障排除	reference/troubleshooting.md
安全	reference/security.md

Pre-Commit Checklist

提交前检查清单

No placeholder data, no TODO comments for API
All API calls via
```
sdk.gen.ts
```
, all types from
```
types.gen.ts
```
Logic in composables, modals use
```
useOverlay
```
, forms use Valibot
TailwindCSS only, semantic colors only
German UI, English code, no implicit
```
any
```
Auth uses
```
useBetterAuth()
```
, protected routes use
```
middleware: 'auth'
```
No
```
v-html
```
with user content, tokens stored securely
Feature tested in browser (Chrome DevTools MCP), no console errors

无占位数据、无API相关的TODO注释
所有API调用通过
```
sdk.gen.ts
```
，所有类型来自
```
types.gen.ts
```
逻辑写在组合式函数中，模态框使用
```
useOverlay
```
，表单使用Valibot
仅使用TailwindCSS，仅使用语义化颜色
UI为德语，代码为英语，无隐式
```
any
```
身份验证使用
```
useBetterAuth()
```
，受保护路由使用
```
middleware: 'auth'
```
不使用
```
v-html
```
渲染用户内容，令牌安全存储
功能已在浏览器中测试（Chrome DevTools MCP），无控制台错误