Prompt file imported from vishnumsvp/react-fe-dev-template (.github/prompts/create-page.prompt.md). Copyright stays with the author.

Create Page

Scaffold a complete page — a route-bound component that owns data fetching and composes organisms/molecules.

What to ask first

Ask the user for:

1. Page name (PascalCase ending in Page, e.g. ProductsPage, OrderDetailPage)
2. Route path (e.g. /products, /orders/:id)
3. Is the route protected? (requires auth — default: yes for most app pages)
4. Which layout template to use — DashboardLayout (default for authenticated pages) or AuthLayout (for login/signup pages)
5. Does it belong to a feature? If yes: features/<name>/pages/. If no: components/pages/.
6. What data does it need? List the React Query hooks or static data.

Files to create

Page component — src/components/pages/{Name}/{Name}.tsx OR src/features/<featureName>/pages/{Name}.tsx

import React from 'react';
import { DashboardLayout } from '@components/templates/DashboardLayout/DashboardLayout';
// or: import { AuthLayout } from '@components/templates/AuthLayout/AuthLayout';
import { Spinner } from '@components/atoms/Spinner/Spinner';
import { useMyData } from '@features/myFeature/hooks/useMyData';
// ...other imports
import styles from './{Name}.module.scss';

const {Name}: React.FC = () => {
  const { data, isLoading, isError } = useMyData();

  if (isLoading) {
    return (
      <DashboardLayout>
        <div className={styles.centered}>
          <Spinner size="large" />
        </div>
      </DashboardLayout>
    );
  }

  if (isError) {
    return (
      <DashboardLayout>
        <p className={styles.error} role="alert">
          Failed to load data. Please try again.
        </p>
      </DashboardLayout>
    );
  }

  return (
    <DashboardLayout>
      <div className={styles.page}>
        <h1 className={styles.heading}>{/* Page title */}</h1>
        {/* Organisms / content here */}
      </div>
    </DashboardLayout>
  );
};

export default {Name};

Page SCSS — {Name}.module.scss

.page {
  padding: 1.6rem 0;
}

.heading {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2.4rem;
}

.centered {
  display: flex;
  justify-content: center;
  padding: 4rem;
}

.error {
  color: var(--color-danger);
  text-align: center;
  padding: 3.2rem;
}

Update routing

Edit src/routes/AppRoutes.tsx to add the new page:

// 1. Add lazy import near the top:
const {Name} = lazy(() => import('@components/pages/{Name}/{Name}'));
// or: const {Name} = lazy(() => import('@features/<feature>/pages/{Name}'));

// 2. Add route inside the correct group:
<Route element={<PrivateRoute />}>
  <Route path="/your-path" element={<{Name} />} />
</Route>

After creating the files

Remind the user to:

1. Add any React Query hooks via #create-hook.
2. Add a navigation link in Header.tsx or the Sidebar if the page is part of the main nav.
3. Generate tests via #create-tests.