ワンクリックで
create-dashboard-page
Create a new dashboard page following Next.js 15 App Router conventions
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
メニュー
Create a new dashboard page following Next.js 15 App Router conventions
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | create-dashboard-page |
| description | Create a new dashboard page following Next.js 15 App Router conventions |
When creating a new dashboard page in this Next.js 15 application:
Create the page file in src/app/[route-name]/page.tsx:
page.tsxPage component structure:
export default function PageName() {
return (
<div className="space-y-6">
{/* Page header */}
<div className="space-y-2">
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
Page Title
</h1>
<p className="text-sm text-muted-foreground sm:text-base">
Page description
</p>
</div>
{/* Page content */}
{/* ... */}
</div>
);
}
Use client directive when needed:
"use client"; at the top if using React hooks (useState, useEffect)"use client"; if using interactive componentsAdd metadata for SEO (server components only):
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Page Title - Modern Dashboard",
description: "Page description",
};
Layout and styling:
LayoutWrapper from layout.tsxtext-sm sm:text-base md:text-lggrid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6space-y-6 for vertical spacing between sectionsReuse dashboard components:
import { DashboardCard, DashboardStatCard } from "@/components/DashboardCards"import { DashboardCharts } from "@/components/DashboardCharts"import { Card } from "@/components/ui/card"Navigation (if needed):
AppSidebar.tsx for navigation menunext/link for client-side navigation:
import Link from "next/link";
<Link href="/your-route">Link Text</Link>
// src/app/analytics/page.tsx
import type { Metadata } from "next";
import { DashboardCharts } from "@/components/DashboardCharts";
export const metadata: Metadata = {
title: "Analytics - Modern Dashboard",
description: "View your analytics and insights",
};
export default function AnalyticsPage() {
return (
<div className="space-y-6">
<div className="space-y-2">
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
Analytics
</h1>
<p className="text-sm text-muted-foreground sm:text-base">
Track your performance metrics and insights
</p>
</div>
<DashboardCharts />
</div>
);
}
// src/app/settings/page.tsx
"use client";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
export default function SettingsPage() {
const [setting, setSetting] = useState(false);
return (
<div className="space-y-6">
<div className="space-y-2">
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
Settings
</h1>
<p className="text-sm text-muted-foreground sm:text-base">
Manage your application settings
</p>
</div>
<Card>
<CardHeader>
<CardTitle>General Settings</CardTitle>
</CardHeader>
<CardContent>
<Button onClick={() => setSetting(!setting)}>
Toggle Setting
</Button>
</CardContent>
</Card>
</div>
);
}
src/app/layout.tsxsrc/app/dashboard/page.tsxsrc/components/LayoutWrapper.tsxsrc/components/AppSidebar.tsxadd-dashboard-cardadd-chartadd-shadcn-componentAdd a new Recharts visualization with theme-aware styling to the dashboard
Add a new metric card to the dashboard with proper styling and components
Add Lucide React icons to components following project conventions
Add responsive layouts following mobile-first design principles with Tailwind CSS
Add a new shadcn/ui component to the project following the New York style variant
Add or customize theme colors in the CSS custom properties system