new-page

Creates a new website page with the standard layout shell and full navigation registration.

1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/robritacca-dotcom/design-system --skill new-page-robritacca-dotcom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-page
Source: https://github.com/robritacca-dotcom/design-system/tree/main/.claude/skills/new-page
Command: npx skills add https://github.com/robritacca-dotcom/design-system --skill new-page-robritacca-dotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a page to a Next.js site is easy, but wiring it into every place the site tracks pages is not: sidebars, breadcrumbs, sitemap, footer, command palette, AI chat corpus, and page-summary panels all need consistent registration, and missing one fails silently or breaks the build. This Skill walks through the complete checklist so a new route is never orphaned. ## Core Features & Use Cases - Exemplar-mirrored page creation: Copies the live exemplar pages' layout shell (page.tsx, page.module.css, layout.tsx) instead of improvising structure, enforcing design-token and composition rules. - Complete registration wiring: Covers sidebar arrays, breadcrumbs, sitemap, footer links, command palette, page summaries, case-study registries, and blueprint sync scripts, including the exceptions for work, blueprint, standalone, and hidden pages. - Build-gate awareness: Documents which validators enforce each registration (validate-page-summaries, validate-case-studies, validate-website-surfaces) and which fail silently, so nothing is skipped. - Use Case: When asked to "add a page for our pricing philosophy", the Skill gathers the path and copy, mirrors the exemplar shell, registers the route in navigation.ts and page-summaries.json, and verifies sidebar highlighting and breadcrumbs in both themes. ## Quick Start Ask the AI to add a new page to the website for a given topic and section, and it will create the route files and wire up all navigation registrations.

Frequently Asked Questions about new-page

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

FAQPage Schema
How do I add a new page to a Next.js website with navigation?

Create the route directory with page.tsx, page.module.css, and layout.tsx mirroring an existing exemplar page, then register the route in the navigation config's sidebar array. The sitemap and breadcrumbs derive automatically from that sidebar entry.

How do I register a new page in the sitemap and breadcrumbs?

For sidebar-registered pages, the sitemap derives automatically from the sidebar configs and breadcrumbs resolve from the sidebar entry. Standalone pages need a literal entry in sitemap.ts, and new sections need a breadcrumbSections entry in navigation.ts.

What is the difference between a component page and a regular content page?

Component documentation pages are registered through the component registry rather than sidebar arrays and are build-enforced by validate-page-titles.mjs. Regular content pages use the shared pageMetadata helper by convention and follow the standard sidebar registration flow.

Why does the build fail after adding a new page?

Common causes are a missing entry in page-summaries.json, an unregistered case-study folder, a blueprint page without a synced spec file, or the chat corpus exceeding its token budget. Each has a dedicated validator script that fails the build.

Can a page be hidden from search engines but still linked in navigation?

Yes. Set robots noindex and skip the canonical and sitemap in layout.tsx while keeping normal nav entries, as the /canvas page does. A fully hidden page registers nowhere and needs an EXCLUDED_ROUTES entry in the corpus generator.