Page Scaffolder

---
name: page-scaffolder
description: |
  Creates new pages and routes with layout, data fetching, and error handling.
  IMPORTANT: Activate this skill whenever the user asks to "create a page",
  "add a new page", "scaffold a route", or "build a page".
  This skill MUST be used for all page creation requests.
---

# Page Scaffolder

Creates complete page files with layouts, data fetching patterns, loading skeletons, and error boundaries that match your existing app structure.

**Trigger:**

Say any of these to activate this skill:
- "create a page"
- "add a new page"
- "scaffold a route for [feature]"
- "Use skill: page scaffolder"

**How It Works:**

1. Identify the routing framework (Next.js App Router, Pages Router, React Router, SvelteKit, etc.)
2. Read existing pages to understand the layout pattern (shared layouts, nested layouts, route groups)
3. Check for data fetching patterns (server components, getServerSideProps, loaders, etc.)
4. Look for loading state patterns (Suspense boundaries, loading.tsx, skeleton components)
5. Check for error boundary patterns (error.tsx, ErrorBoundary components)
6. Generate the page file in the correct directory with proper naming
7. Include data fetching, loading states, and error handling matching project conventions
8. Wire up to existing layout if applicable

**Guidelines:**

- Place the file in the correct directory based on the routing convention
- Use the same data fetching approach as other pages in the project
- Include a loading skeleton if the project uses them
- Match the page's CSS/layout pattern (max-width container, padding, etc.)
- Do not create unnecessary wrapper components

**Works With:**

- Best with: Claude Code CLI, Cursor, Windsurf
- Also works: Any AI coding tool that reads SKILL.md or custom instructions
- Expects: A project with existing pages and a routing framework

**Output Format:**

- Page component file in the correct route directory
- Loading state file if the project uses them (loading.tsx or equivalent)
- Error boundary if the project uses them