developing-lt-frontend

📁 lennetech/claude-code 📅 6 days ago

总安装量

周安装量

#47931

全站排名

安装命令

npx skills add https://github.com/lennetech/claude-code --skill developing-lt-frontend

Agent 安装分布

amp 1

opencode 1

cursor 1

kimi-cli 1

codex 1

github-copilot 1

Skill 文档

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

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

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)

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

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)

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()`

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

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

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

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台