skills.rest
human-centric-engineering
human-centric-engineeringOFFICIAL
Explore all skills by this author →
WebsiteGitHub

page-builder

Creates Next.js 16 App Router pages following route group and auth conventions.

Updated Jul 28, 2026
Search Tags:#typescript#authentication#next.js#server components#app router#page creation#route groups
One-click install
npx skills add https://github.com/human-centric-engineering/resparkable --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/resparkable/tree/main/.claude/skills/page-builder
Command: npx skills add https://github.com/human-centric-engineering/resparkable --skill page-builder-human-centric-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating new pages in a Next.js 16 App Router project requires knowing where files belong, which auth checks to apply, and which patterns to follow. This Skill removes that guesswork by encoding the project's route group structure, auth conventions, and page templates into a repeatable workflow. ## Core Features & Use Cases - Route Group Decision Tree: Determines whether a page belongs in (auth), (protected), (public), or the admin/ folder based on its purpose and authentication needs. - Ready-to-Use Templates: Provides Server Component, protected page, form page with Suspense, layout, and error boundary templates using the project's actual imports (getServerSession, clearInvalidSession, shadcn/ui components). - Verification Checklist: Ensures metadata exports, auth checks, Suspense boundaries, and responsive spacing are in place before finishing. - Use Case: Ask for a new settings page and receive app/(protected)/settings/page.tsx with the correct async Server Component, session check, metadata, and card layout already wired up. ## Quick Start Ask the assistant to create a new page, for example: create a protected settings page for user preferences.

Frequently Asked Questions about page-builder

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

FAQPage Schema
How do I create a new page in Next.js App Router with route groups?▼

Place the page.tsx file inside the appropriate route group folder such as app/(protected)/settings/page.tsx. Route groups organize code without affecting URLs, so this page lives at /settings while inheriting the group's layout.

How to add authentication to a Next.js server component page?▼

Make the page an async Server Component and call getServerSession() at the top. If no session exists, call clearInvalidSession with the page path to redirect, otherwise destructure the user from the session and render the page.

What is the difference between route groups and regular folders in Next.js?▼

Route groups like (protected) organize files without changing URLs, while regular folders like admin/ create URL segments. A page at app/admin/orchestration/page.tsx is served at /admin/orchestration.

Why does useSearchParams need a Suspense boundary in Next.js?▼

Components calling useSearchParams() must be wrapped in a Suspense boundary to avoid de-opting the entire page into client-side rendering. Wrap the form component in Suspense with a loading fallback inside the page.

When should I create a new layout or error boundary for a route group?▼

Create a new layout.tsx only when a section needs a different structure from its existing route group. Add an error.tsx client component when creating a new route group so rendering errors show a recovery UI instead of crashing.

Related Skills

Explore More Software Engineering Skills→
onvoyage-aionvoyage-ai
1.3k

geo-content-planning

Converts research into a prioritized content architecture with a build order.

Official
Intermediate
ChatbotXIOChatbotXIO
601

feature-scaffold

Scaffold ChatbotX feature directories and implementation patterns following project conventions.

Official
Intermediate
KRISHNA0RKRISHNA0R
25

ui-pattern

Assemble reusable UI patterns from StyleSeed primitives with dynamic props.

Community
Intermediate
weiloon1234weiloon1234

admin-page

Create a non-datatable admin page scaffold with route, component, menu, and i18n wiring.

Community
Advanced