Ui Page

Mobile Page Scaffolder

Create a new page: $0 Description: $ARGUMENTS

Instructions

1. Read the design system reference:

   • CLAUDE.md for file structure and conventions
   • components/patterns/page-shell.tsx for page layout
   • components/patterns/top-bar.tsx for header pattern
   • components/patterns/bottom-nav.tsx for navigation

2. Page structure template:

import { PageShell, PageContent } from "@/components/patterns/page-shell";
import { TopBar, TopBarAction } from "@/components/patterns/top-bar";
import { BottomNav } from "@/components/patterns/bottom-nav";

export default function PageName() {
  return (
    <PageShell>
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>{/* Page sections with space-y-6 */}</PageContent>
      <BottomNav
        items={
          [
            /* nav items */
          ]
        }
        activeIndex={0}
      />
    </PageShell>
  );
}