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.