skills.rest
moking55
moking55COMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-frontend-page

Create Next.js App Router pages with containers, components, and useImmer state.

Updated Apr 29, 2026
Search Tags:#typescript#frontend#react#components#containers#nextjs#app router
One-click install
npx skills add https://github.com/moking55/next-nest-monorepo-boilerplate --skill create-frontend-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-frontend-page
Source: https://github.com/moking55/next-nest-monorepo-boilerplate/tree/main/.agents/skills/create-frontend-page
Command: npx skills add https://github.com/moking55/next-nest-monorepo-boilerplate --skill create-frontend-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers create consistent frontend page structures by providing a repeatable architecture for Next.js pages, containers, components, and hooks.

Core Features & Use Cases

  • Page Architecture Setup: Creates Server Component pages that connect cleanly to dedicated containers following the Page → Container → Component pattern.
  • Container and Component Guidance: Defines file structures, state management with useImmer, explicit exports, and reusable component organization.
  • Use Case: Build a new authenticated product page in a Next.js application while maintaining the project's established frontend conventions.

Quick Start

Use the create-frontend-page skill to create a new frontend page for the specified module following the project's architecture rules.

Frequently Asked Questions about create-frontend-page

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

FAQPage Schema
How do I structure a Next.js App Router page with separated containers and components?▼

You can structure Next.js App Router pages by applying a Page → Container → Component pattern, building Server Component pages that connect to dedicated containers and reusable UI components.

What is the best way to manage state in Next.js frontend containers?▼

The best way to manage state in frontend containers is using useImmer, which enables immutable state updates while maintaining explicit type exports and consistent component organization.

Do I need TypeScript to build frontend pages with separated components and hooks?▼

Yes, TypeScript is required to build these structured frontend pages, enforcing explicit type exports and named component functions to maintain consistent frontend conventions.

Can I use this approach to create an authenticated product page in a Next.js application?▼

Yes, you can use this architecture to build a new authenticated product page in a Next.js application while maintaining the project's established frontend conventions and folder organization.

Why does my Next.js frontend page structure need dedicated containers and custom hooks?▼

Your Next.js frontend page needs dedicated containers and custom hooks to separate server components from stateful logic, ensuring reusable component organization and explicit exports.

Related Skills

Explore More Software Engineering Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

Initialize and structure Next.js projects with TypeScript, Tailwind, and App Router.

Community
Intermediate
cheetah-alocheetah-alo

frontend-web

Design reusable frontend UI patterns for component layout and state handling.

Community
Basic
baoxukang123baoxukang123

nextjs-expert

Provide expert guidance for building Next.js 14/15 App Router applications.

Community
Advanced
Nikhil-Chopra-7Nikhil-Chopra-7
1

page-architecture

Organize Next.js Pages Router code with atomic design and Redux integration.

Community
Advanced