---

name: new-page description: Scaffold a new Next.js page with proper patterns for the Colophony dashboard.

/new-page

Scaffold a new Next.js page with proper patterns for the Colophony dashboard.

What this skill does

1. Creates a new page file in apps/web/src/app/
2. Optionally creates an accompanying component
3. Sets up proper auth protection and organization context
4. Includes loading and error states

Usage

/new-page settings/privacy          # Create page at /settings/privacy
/new-page organizations             # Create page at /organizations
/new-page --auth reset-password     # Create auth page (no sidebar)
/new-page --with-component reports  # Create page + component

Options

• --auth - Create in (auth) route group (centered, no sidebar)
• --with-component - Also create a component file
• --editor - Require editor role
• --admin - Require admin role

Instructions for Claude

When the user invokes /new-page [options] <name>:

1. Determine the route group

• If --auth flag: Use apps/web/src/app/(auth)/<name>/page.tsx
• Otherwise: Use apps/web/src/app/(dashboard)/<name>/page.tsx

2. Create the page file

For dashboard pages:

'use client';

import { ProtectedRoute } from '@/components/auth/protected-route';
import { <Name>Content } from '@/components/<name>/<name>-content';

export default function <Name>Page() {
  return (
    <ProtectedRoute requireEditor={/* true if --editor */}>
      <<Name>Content />
    </ProtectedRoute>
  );
}

For auth pages:

import { <Name>Form } from '@/components/auth/<name>-form';

export default function <Name>Page() {
  return <<Name>Form />;
}

3. If --with-component, create the component

Dashboard component at apps/web/src/components/<name>/<name>-content.tsx:

'use client';

import { trpc } from '@/lib/trpc';
import { useAuth } from '@/hooks/use-auth';
import { useOrganization } from '@/hooks/use-organization';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

export function <Name>Content() {
  const { user } = useAuth();
  const { currentOrg } = useOrganization();

  // TODO: Add your tRPC query here
  // const { data, isLoading, error } = trpc.<router>.<method>.useQuery({...});

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold"><Name></h1>
        <p className="text-muted-foreground">
          TODO: Add description
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>TODO: Card Title</CardTitle>
        </CardHeader>
        <CardContent>
          {/* TODO: Add content */}
          <p>Content goes here</p>
        </CardContent>
      </Card>
    </div>
  );
}

Auth component at apps/web/src/components/auth/<name>-form.tsx:

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Alert, AlertDescription } from '@/components/ui/alert';

const formSchema = z.object({
  // TODO: Add form fields
});

type FormData = z.infer<typeof formSchema>;

export function <Name>Form() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {},
  });

  const onSubmit = async (data: FormData) => {
    setError(null);
    try {
      // TODO: Add form submission logic
      router.push('/');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred');
    }
  };

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>TODO: Title</CardTitle>
        <CardDescription>TODO: Description</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            {error && (
              <Alert variant="destructive">
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            {/* TODO: Add form fields */}

            <Button type="submit" className="w-full">
              Submit
            </Button>
          </form>
        </Form>
      </CardContent>
      <CardFooter>
        <Link href="/login" className="text-sm text-muted-foreground hover:underline">
          Back to login
        </Link>
      </CardFooter>
    </Card>
  );
}

4. Create directory if needed

Ensure the directory structure exists before creating files.

5. Summary

Inform the user:

• What files were created
• What TODOs need to be filled in
• Remind to add navigation links if needed (sidebar, header)