skills.rest
lenneTech
lenneTechOFFICIAL
Explore all skills by this author →
WebsiteGitHub

developing-lt-frontend

Develop lenne.tech Nuxt 4 frontends with TypeScript, Valibot forms, and generated API types.

Updated Dec 8, 2025
Search Tags:#frontend#composables#valibot#nuxt#sdk.gen.ts#nuxt4#types.gen.ts
One-click install
npx skills add https://github.com/lenneTech/claude-code --skill developing-lt-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: developing-lt-frontend
Source: https://github.com/lenneTech/claude-code/tree/main/plugins/lt-dev/skills/developing-lt-frontend
Command: npx skills add https://github.com/lenneTech/claude-code --skill developing-lt-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill codifies lenne.tech frontend development with Nuxt 4, Nuxt UI 4, strict TypeScript, Valibot forms, and generated backend API types (types.gen.ts, sdk.gen.ts). It enforces consistent project structure and clean integration between frontend and backend in monorepos.

Core Capabilities

  • Enforces Nuxt 4 patterns (app/ directory, useFetch, useState, SSR, hydration)
  • Uses generated backend types (types.gen.ts) and SDK (sdk.gen.ts) for API integration
  • Validates forms with Valibot (no Zod) and supports cross-field validation
  • Programmatic modals with useOverlay and per-backend composables; TailwindCSS-only styling
  • German UI conventions for labels and consistent documentation standards

Quick Start

Create or modify a Nuxt 4 project following the app/ structure and wire in generated API types and SDK, then use Valibot forms and programmatic modals.

Frequently Asked Questions about developing-lt-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate generated API types and SDK into a Nuxt 4 frontend?▼

Generated API types (types.gen.ts) and SDK (sdk.gen.ts) integrate directly into Nuxt 4 via useFetch and composables. Import generated types for strict TypeScript validation and use the SDK for API calls across your app/ directory structure, ensuring monorepo DTOs match backend contracts without manual duplication.

What's the best way to build forms with validation in Nuxt 4?▼

Use Valibot for form validation in Nuxt 4, not Zod. Valibot supports cross-field validation and integrates with TailwindCSS styling. Bind schemas to form inputs in your app/components and app/pages, leveraging strict TypeScript for type safety across frontend validation and generated backend types.

How do I create programmatic modals in Nuxt 4?▼

Create programmatic modals using the useOverlay composable in Nuxt 4. Build per-backend composables in app/composables to manage modal state and behavior, then invoke them from app/pages and app/components with TailwindCSS styling and full TypeScript support.

Can I use Nuxt 4 with generated backend types in a monorepo structure?▼

Yes. Nuxt 4 monorepos organize frontend code in app/interfaces, app/composables, app/components, and app/pages directories. Import and use generated types (types.gen.ts) and SDK (sdk.gen.ts) across these directories with useFetch, useState, and SSR hydration patterns for consistent type safety.

Why should I rely on generated DTOs instead of writing manual types?▼

Generated DTOs (types.gen.ts) automatically sync with backend API changes, eliminating manual type maintenance and mismatches. In Nuxt 4 monorepos, this ensures frontend validation, forms, and API calls always reflect the backend contract without manual duplication or version drift.

Does Nuxt 4 handle SSR and hydration with generated API types?▼

Yes. Nuxt 4 supports SSR and hydration with useFetch and useState patterns that work seamlessly with generated API types and SDK. Strict TypeScript ensures hydration-safe data flow, and generated types validate server and client payloads consistently across the app/ structure.

Related Skills

Explore More Software Engineering Skills→
phuetzphuetz
30

project-best-practices

Scaffold new TypeScript projects with conventional structure and tooling.

Community
Intermediate
huajian123huajian123
713

angular-ssr

Configure server-side rendering and hydration for Angular v20+ applications.

Community
Advanced
joncranglejoncrangle
8

lang-typescript

Generate type-safe TypeScript patterns with SolidJS and TanStack Start using Valibot validation.

Community
Advanced
michsindlingermichsindlinger
1

Interaction Designing

Design accessible user interactions with form validation and feedback patterns.

Community
Advanced