frontend-page

Creates Next.js frontend pages following a four-layer Page-Container-Hook-Component architecture.

Updated Jul 3, 2026

Search Tags:#typescript #frontend architecture #react #next.js #custom hooks #page scaffolding #container pattern

Ready to run

npx skills add https://github.com/moking55/migrate-plus --skill frontend-page-moking55

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-page
Source: https://github.com/moking55/migrate-plus/tree/main/.agents/skills/define-frontend-container
Command: npx skills add https://github.com/moking55/migrate-plus --skill frontend-page-moking55

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building new frontend pages often leads to inconsistent structure, mixed concerns, and logic tangled inside UI components. This Skill enforces a strict 4-layer architecture (Page, Container, Hook, Component) so every new page in a Next.js 16 + React 19 app follows the same predictable, maintainable pattern. ## Core Features & Use Cases - Layered Page Scaffolding: Guides creation of the server Page, smart Container, logic Hook, and presentational Component with correct file locations and naming. - Type-Safe Patterns: Provides templates for `types.ts`, `use-[feature].ts` with `useImmer` state, and memoized view components using absolute `@/` imports. - Golden Rules Enforcement: Bans `export *`, mandates named function components, kebab-case files, and strict typing with no `any`. - Use Case: You need a new "orders" page in your monorepo. The Skill walks you through creating `app/(screens)/(authenticated)/orders/page.tsx`, the `src/containers/orders/` container with its hook and types, and optional shared hooks under `src/hooks/`. ## Quick Start Ask the AI to create a new frontend page for a feature, for example: create an orders page following the frontend container architecture.

Frequently Asked Questions about frontend-page

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

FAQPage Schema

How do I structure a new page in Next.js App Router with containers?▼

Create a server page component in the app directory that renders a smart container from src/containers. The container splits into a logic hook (use-[feature].ts) holding state and handlers, and a memoized view component that only renders UI.

How to separate logic from UI in React components?▼

Move all state, effects, and event handlers into a dedicated custom hook that returns a state and handlers object. The view component then calls the hook and focuses purely on rendering, making both parts easier to test and reuse.

Should I use useState or useImmer for complex React state?▼

Use useImmer whenever state contains objects or arrays, as it allows mutable-style updates while preserving immutability. This Skill mandates useImmer for complex container state to keep update logic readable and safe.

Why avoid export star in TypeScript index files?▼

export * pollutes the namespace, obscures where types originate, and can cause circular dependency issues. Explicit re-exports like export type { Props } from './types' keep the public API clear and improve IDE autocomplete.

Can I use arrow functions for React components in this architecture?▼

No, the convention requires named function declarations such as function UserProfileContainer() for all components. Named functions improve stack traces, debugging, and consistency across the codebase.