page-layout-builder

仓库: patricio0312rev/skills
安装量: 49
排名: #15177

安装

npx skills add https://github.com/patricio0312rev/skills --skill page-layout-builder

Page Layout Builder

Generate production-ready page layouts with routing, navigation, and state patterns.

Core Workflow Choose page type: Dashboard, auth, settings, CRUD, landing, etc. Setup routing: Create route files with proper structure Build layout: Header, sidebar, main content, footer Add navigation: Nav menus, breadcrumbs, tabs State placeholders: Data fetching, forms, modals Responsive design: Mobile-first with breakpoints Loading states: Skeletons and suspense boundaries Common Page Patterns Dashboard Layout // app/dashboard/layout.tsx import { Sidebar } from "@/components/Sidebar"; import { Header } from "@/components/Header";

export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { return (

{/ Sidebar - Hidden on mobile, shown on desktop /} 

  {/* Main Content Area */}
  <div className="flex flex-1 flex-col overflow-hidden">
    {/* Header */}
    <Header />

    {/* Page Content */}
    <main className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
      {children}
    </main>
  </div>
</div>

); }

// app/dashboard/page.tsx import { StatsCard } from "@/components/dashboard/StatsCard"; import { RecentActivity } from "@/components/dashboard/RecentActivity"; import { Chart } from "@/components/dashboard/Chart";

export default function DashboardPage() { return (

Dashboard

Welcome back! Here's your overview.

  {/* Stats Grid */}
  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
    <StatsCard title="Total Users" value="2,543" change="+12%" trend="up" />
    <StatsCard title="Revenue" value="$45,231" change="+8%" trend="up" />
    <StatsCard
      title="Active Sessions"
      value="431"
      change="-3%"
      trend="down"
    />
    <StatsCard
      title="Conversion Rate"
      value="3.2%"
      change="+0.5%"
      trend="up"
    />
  </div>

  {/* Charts and Activity */}
  <div className="grid gap-6 md:grid-cols-2">
    <Chart title="Revenue Over Time" />
    <RecentActivity title="Recent Activity" />
  </div>
</div>

); }

Authentication Pages // app/(auth)/layout.tsx export default function AuthLayout({ children, }: { children: React.ReactNode; }) { return (

{/ Left side - Branding (hidden on mobile) /}

Welcome to AppName

The best platform for managing your workflow 

  {/* Right side - Auth form */}
  <div className="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:px-20 xl:px-24">
    <div className="mx-auto w-full max-w-sm">{children}</div>
  </div>
</div>

); }

// app/(auth)/login/page.tsx "use client";

import { useState } from "react"; import { useRouter } from "next/navigation"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import Link from "next/link";

export default function LoginPage() { const router = useRouter(); const [isLoading, setIsLoading] = useState(false);

const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true);

// TODO: Implement authentication logic
try {
  // await signIn(formData);
  router.push("/dashboard");
} catch (error) {
  console.error("Login failed:", error);
} finally {
  setIsLoading(false);
}

};

return (

Sign In

Enter your credentials to access your account 

  <form onSubmit={handleSubmit} className="space-y-4">
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input
        id="email"
        type="email"
        placeholder="you@example.com"
        required
      />
    </div>

    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <Label htmlFor="password">Password</Label>
        <Link
          href="/forgot-password"
          className="text-sm text-primary-600 hover:underline"
        >
          Forgot password?
        </Link>
      </div>
      <Input
        id="password"
        type="password"
        placeholder="••••••••"
        required
      />
    </div>

    <Button type="submit" className="w-full" isLoading={isLoading}>
      Sign In
    </Button>
  </form>

  <div className="text-center text-sm">
    Don't have an account?{" "}
    <Link href="/register" className="text-primary-600 hover:underline">
      Sign up
    </Link>
  </div>
</div>

); }

Settings/Profile Page // app/settings/layout.tsx import { SettingsSidebar } from "@/components/settings/SettingsSidebar";

export default function SettingsLayout({ children, }: { children: React.ReactNode; }) { return (

Settings

Manage your account settings and preferences 

  <div className="flex flex-col gap-6 lg:flex-row">
    <SettingsSidebar className="lg:w-64" />
    <div className="flex-1">{children}</div>
  </div>
</div>

); }

// app/settings/profile/page.tsx "use client";

import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Card } from "@/components/ui/card";

export default function ProfileSettingsPage() { const [isSaving, setIsSaving] = useState(false);

const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsSaving(true);

// TODO: Save profile changes

setIsSaving(false);

};

return (

Profile Information

Update your account's profile information and email address 

      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Name</Label>
          <Input id="name" placeholder="Your name" />
        </div>

        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="you@example.com" />
        </div>

        <div className="space-y-2">
          <Label htmlFor="bio">Bio</Label>
          <textarea
            id="bio"
            rows={4}
            className="w-full rounded-md border border-gray-300 p-3"
            placeholder="Tell us about yourself"
          />
        </div>
      </div>

      <div className="flex justify-end">
        <Button type="submit" isLoading={isSaving}>
          Save Changes
        </Button>
      </div>
    </form>
  </Card>
</div>

); }

CRUD Page (List/Create/Edit/Delete) // app/users/page.tsx "use client";

import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Table } from "@/components/ui/table"; import { CreateUserModal } from "@/components/users/CreateUserModal"; import { DeleteConfirmDialog } from "@/components/ui/DeleteConfirmDialog";

export default function UsersPage() { const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [searchQuery, setSearchQuery] = useState("");

return (

{/ Header /}

Users

Manage your team members

  {/* Filters */}
  <div className="flex gap-4">
    <Input
      placeholder="Search users..."
      value={searchQuery}
      onChange={(e) => setSearchQuery(e.target.value)}
      className="max-w-sm"
    />
  </div>

  {/* Table */}
  <div className="rounded-lg border">
    {/* TODO: Implement table with data */}
  </div>

  {/* Modals */}
  <CreateUserModal
    isOpen={isCreateModalOpen}
    onClose={() => setIsCreateModalOpen(false)}
  />
</div>

); }

Navigation Components Sidebar Navigation // components/Sidebar.tsx "use client";

import Link from "next/link"; import { usePathname } from "next/navigation"; import { cn } from "@/lib/utils"; import { HomeIcon, UsersIcon, SettingsIcon, ChartBarIcon, } from "@/components/icons";

const navigation = [ { name: "Dashboard", href: "/dashboard", icon: HomeIcon }, { name: "Users", href: "/users", icon: UsersIcon }, { name: "Analytics", href: "/analytics", icon: ChartBarIcon }, { name: "Settings", href: "/settings", icon: SettingsIcon }, ];

export function Sidebar({ className }: { className?: string }) { const pathname = usePathname();

return (

← 返回排行榜