new-page

Generate Next.js App Router page scaffolds with page.tsx, loading.tsx, and error.tsx.

3|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/martinacostadev/claude-react-agents --skill new-page
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-page
Source: https://github.com/martinacostadev/claude-react-agents/tree/main/templates/.claude/skills/web/new-page
Command: npx skills add https://github.com/martinacostadev/claude-react-agents --skill new-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly scaffold a new Next.js App Router page with correct structure and boilerplate components (page.tsx, loading.tsx, error.tsx), reducing setup time and ensuring best practices.

Core Features & Use Cases

  • Generates the essential App Router page files (page.tsx, loading.tsx, error.tsx) following Next.js conventions.
  • Creates a clean route structure with optional layout support for nested routes and dynamic segments.
  • Useful for bootstrapping new features or screens in Next.js apps with consistent architecture.

Quick Start

Create a Next.js App Router page at the specified route, generating the required files and components.

Frequently Asked Questions about new-page

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

FAQPage Schema
How do I scaffold a Next.js App Router page with the correct boilerplate?

To scaffold a Next.js App Router page, this generator creates the essential route files including page.tsx, loading.tsx, and error.tsx, reducing setup time and ensuring best practices for your web development workflow.

What files do I need to create a new route in Next.js App Router?

Creating a new route in Next.js App Router requires page.tsx for the UI, loading.tsx for the loading state, and error.tsx for error handling to ensure a clean, type-safe architecture across app directories.

Can I generate dynamic segments and nested layouts for my Next.js App Router pages?

Yes, you can generate dynamic segments and optional layouts for nested routes. The scaffolding process applies to creating new routes across app directories while maintaining Next.js App Router compatibility and type-safety.

Does this scaffolding generator support TypeScript for Next.js web development?

Yes, the scaffolding generator supports TypeScript by ensuring type-safety and clean architecture alignment when generating page.tsx, loading.tsx, and error.tsx templates for your Next.js App Router application.

What is the best way to bootstrap new features in a Next.js app with consistent architecture?

The best way to bootstrap new features in a Next.js app is using a scaffolding generator that produces ready-to-use App Router page templates with correct route structure, ensuring consistent architecture across all screens.