nextjs-feature

Scaffold domain-organized frontend feature modules for Next.js 15 App Router TypeScript projects.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/lety-ai/lety-skill-hub --skill nextjs-feature
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-feature
Source: https://github.com/lety-ai/lety-skill-hub/tree/main/plugins/nextjs-feature/skills/nextjs-feature
Command: npx skills add https://github.com/lety-ai/lety-skill-hub --skill nextjs-feature

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a repeatable, opinionated generator to eliminate inconsistent file layouts and boilerplate when adding new frontend features to a Next.js 15 App Router TypeScript project, enforcing domain-first organization and project conventions.

Core Features & Use Cases

  • Domain-first scaffolding: Creates app routes, feature folders, views, components, services, models, and logic following Screaming Architecture and Atomic Design.
  • Integration-ready artifacts: Produces thin app/page routes, TypeScript interfaces/enums/consts, TanStack Query service hooks, optional Zod schemas for forms, and Zustand stores for state.
  • Guided optional features: Adds list pagination, create/edit forms, CASL permission checks, and Socket.io hooks when requested, while urging use of OpenAPI types as source of truth.

Quick Start

Generate a new feature named billing with a list view, create/edit forms, and permissions enabled following the project's architecture guide.

Frequently Asked Questions about nextjs-feature

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

FAQPage Schema
How do I scaffold a new feature module in a Next.js 15 App Router project?

To scaffold a Next.js 15 feature, use a generator that creates app routes, feature folders, views, components, services, and models following domain-first organization and Atomic Design. This enforces a consistent folder structure and thin app routes.

What is the best way to organize Next.js feature folders to avoid inconsistent file layouts?

The best way to organize Next.js feature folders is using a domain-first approach, applying Screaming Architecture to separate views, components, services, and models. This eliminates boilerplate and enforces project conventions when adding new frontend features.

How do I generate TanStack Query service hooks and Zustand stores for a new Next.js feature?

You can generate TanStack Query service hooks and Zustand stores by using a guided scaffolding tool that produces integration-ready artifacts alongside TypeScript interfaces, enums, and optional Zod schemas for forms during feature creation.

Does the Next.js feature scaffolding approach support CASL permission checks and Socket.io hooks?

Yes, the Next.js feature scaffolding approach supports adding CASL permission checks and Socket.io hooks as guided optional features. It also includes list pagination and create/edit forms while urging the use of OpenAPI types as the source of truth.

Can I use this scaffolding generator for Next.js projects without TypeScript?

No, this scaffolding generator is specifically designed for Next.js 15 App Router TypeScript projects. It enforces thin app routes, TypeScript interfaces, and OpenAPI type usage to maintain strict project conventions and architecture.

Why should I use a generator for Next.js frontend features instead of creating files manually?

You should use a generator to eliminate boilerplate and enforce domain-first organization when adding frontend features. It provides a repeatable, opinionated structure that ensures consistent file layouts, naming rules, and integration-ready artifacts like Zod schemas and Zustand stores.