How does it handle UI styling?

It enforces a TailwindCSS-only approach, avoiding custom blocks in favor of utility classes and Nuxt UI components.

Does this skill support NestJS backend development?

No, this skill is specifically for Nuxt 4 frontend development. For NestJS backend tasks, you should use the 'generating-nest-servers' skill.

How are backend API types managed?

The skill strictly uses generated types from 'types.gen.ts' and API calls from 'sdk.gen.ts' to ensure the frontend is always in sync with the backend.

Which validation library does this skill use for forms?

This skill utilizes Valibot for all form validation and type inference, following the preferred lenne.tech standard.

Is this compatible with older Nuxt 3 projects?

This skill is specifically optimized for Nuxt 4 patterns, including the 'app/' directory structure and specialized composable rules.

Nuxt 4 Frontend Development (lenne.tech)

Name: Nuxt 4 Frontend Development (lenne.tech)
Author: lenneTech

bylenneTech

0•

Design Tools

Develops production-ready Nuxt 4 frontend applications using strict TypeScript, Valibot forms, and automated API integration.

This skill streamlines frontend development within the lenne.tech ecosystem by enforcing Nuxt 4 patterns, strict TypeScript standards, and seamless backend integration through generated SDK types. It enables Claude to build components using Nuxt UI 4, manage state with SSR-safe composables, handle programmatic modals via useOverlay, and implement robust form validation with Valibot. By automating the boilerplate of API consumption and ensuring directory structure compliance, it significantly reduces development time and prevents architectural errors in full-stack monorepos.

Key Features

01Programmatic modal management via the useOverlay composable

02Type-safe form building with Valibot validation schemas

03Automated API integration using generated types and SDKs

04TailwindCSS-only styling for consistent UI development

05Nuxt 4 directory structure enforcement (app/ folder patterns)

060 GitHub stars

Use Cases

01Building complex data-driven dashboards with Nuxt UI 4

02Integrating frontend components with NestJS backend APIs

03Implementing multi-step forms with strict validation and error handling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lennetech/claude-code developing-lt-frontend

For use in Claude.ai and ChatGPT

Download Skill