developing-lt-frontend（开发 lt 前端）

lenne.tech Frontend Development

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

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)

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 pnpm 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

Skill Boundaries

Related Skills

Works closely with:

• generating-nest-servers - For NestJS backend development (projects/api/)
• using-lt-cli - For Git operations and Fullstack initialization
• building-stories-with-tdd - For complete TDD workflow (Backend + Frontend)
• /lt-dev:frontend:env-migrate - Migrate env variables to NUXT_ prefix convention

In monorepo projects:

• projects/app/ or packages/app/ → This skill
• projects/api/ or packages/api/ → generating-nest-servers skill

Nuxt 4 Directory Structure

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

Type Rules

Standards

TDD for Frontend

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

Reference Files

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
• Security review passed (/lt-dev:review for general scan)
• Feature tested in browser (Chrome DevTools MCP), no console errors