page-builder

Generate Next.js 16 App Router pages with route groups, layouts, metadata, and authentication.

3|Updated Dec 12, 2025
One-click install
npx skills add https://github.com/human-centric-engineering/sunrise --skill page-builder-human-centric-engineering
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: page-builder
Source: https://github.com/human-centric-engineering/sunrise/tree/main/.claude/skills/page-builder
Command: npx skills add https://github.com/human-centric-engineering/sunrise --skill page-builder-human-centric-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of new pages within the Sunrise Next.js 16 App Router project, ensuring adherence to established patterns for route groups, layouts, metadata, and authentication.

Core Features & Use Cases

  • Automated Page Generation: Creates new page files (page.tsx) within the correct route group structure.
  • Layout and Metadata Integration: Automatically includes necessary metadata and applies appropriate layouts based on the route group.
  • Authentication Handling: Implements authentication checks for protected routes.
  • Use Case: When you need to add a new "User Profile" page to the protected section of your application, this Skill will generate the app/(protected)/profile/page.tsx file with the correct boilerplate, including authentication checks and metadata.

Quick Start

Create a new public page for the 'about' section.

Frequently Asked Questions about page-builder

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

FAQPage Schema
How do I generate a new page in a Next.js App Router project?

To generate a new Next.js App Router page, use this Skill to automatically create the page.tsx file within the correct route group structure, complete with necessary layouts and metadata boilerplate.

How do I add authentication checks to protected Next.js routes?

Add authentication checks to protected Next.js routes by generating the page through this Skill, which automatically implements required auth validations for any route placed in the protected section of your application.

Does this page generator support creating new route groups with error boundaries?

Yes, this page generator supports creating new route groups with error boundaries, allowing you to establish organized route segments that include public, protected, and authentication-related pages.

How do I set up metadata and layouts for Next.js App Router pages?

Set up metadata and layouts for Next.js App Router pages by using this generation tool to automatically include the required metadata exports and apply the appropriate layout wrappers based on the target route group.

Can I generate public and protected pages using the same Next.js scaffolding process?

Yes, you can generate public and protected pages using the same Next.js scaffolding process, as the tool dynamically applies the correct structural conventions, authentication rules, and layout integrations for each page type.

What is the best way to structure Next.js App Router pages for different access levels?

The best way to structure Next.js App Router pages for different access levels is using route groups, which this Skill uses to separate public, protected, and authentication pages while applying the correct layouts and auth checks automatically.