메뉴
Create a custom (non-CRUD) Inertia page controller and React component with i18n. Use for dashboards, analytics, reports, or any page that doesn't follow the standard CRUD pattern.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Create a broadcast notification system that sends notifications and messages to eligible users based on entity-specific criteria. Use when adding a new entity type that needs to notify users when records are created, updated, or published.
Guide for building non-CRUD pages with consistent design. Use when creating portal pages, custom views, detail modals, sidebar widgets, notification drawers, or any page that is not a standard CRUD table. Covers fullscreen modals, minimal text patterns, calendar widgets, doorbell notifications, optimistic updates, and CrudPage read-only integration.
Guide for building dashboards, charts, KPI cards, and data visualizations. Use when creating dashboard pages, adding charts to features, building stat displays, aggregating data for visual presentation, or implementing export (CSV/PNG/fullscreen) for charts. Based on the Books dashboard implementation using Recharts and shadcn/ui chart components.
Deploy the application to staging or production. Validates, builds, pushes Docker image, deploys via Helm, and runs smoke tests.
Run a comprehensive E2E browser test suite for a newly scaffolded Goravel entity. Tests navigation, CRUD operations, search, filters, row actions, form validation, FK dropdowns, and cross-entity integration using Playwright MCP.
Create a Go database seeder for a Goravel entity with 25+ realistic records. Covers all status/enum values, diverse data for sorting/pagination testing, and proper nullable field handling.
| name | inertia-custom-page |
| description | Create a custom (non-CRUD) Inertia page controller and React component with i18n. Use for dashboards, analytics, reports, or any page that doesn't follow the standard CRUD pattern. |
| argument-hint | [PageName] |
| allowed-tools | Bash, Read, Write, Edit, Grep, Glob |
Create custom page for $ARGUMENTS.
Use this for pages that don't follow the standard CRUD pattern:
Create app/http/controllers/<page_name>/<page_name>_controller.go:
package pagename
import (
"github.com/goravel/framework/contracts/http"
inertiaHelper "books-database/app/http/inertia"
"books-database/app/services"
)
type PageNameController struct {
serviceA *services.ServiceA
serviceB *services.ServiceB
}
func NewPageNameController() *PageNameController {
return &PageNameController{
serviceA: services.NewServiceA(),
serviceB: services.NewServiceB(),
}
}
func (c *PageNameController) Show(ctx http.Context) http.Response {
dataA, _ := c.serviceA.GetSummary()
dataB, _ := c.serviceB.GetRecentItems()
return inertiaHelper.Render(ctx, "PageName/Index", map[string]interface{}{
"summary": dataA,
"recentItems": dataB,
"version": "1.0",
})
}
In routes/web.go:
pageNameController := pagename.NewPageNameController()
// Inside authenticated group:
router.Get("/page-name", pageNameController.Show)
Create resources/js/locales/en/<page_name>.json:
{
"page": {
"title": "Page Name",
"headTitle": "Page Name - Admin"
},
"sections": {
"summary": "Summary",
"recentItems": "Recent Items"
},
"stats": {
"totalCount": "Total",
"activeCount": "Active",
"revenue": "Revenue"
},
"labels": {
"notSpecified": "Not specified"
}
}
Register in resources/js/locales/index.ts:
import pageName from './en/page_name.json';
// Add to ns array and resources.en
ns: [..., 'pageName'],
resources: { en: { ..., pageName } },
Create resources/js/types/page_name.ts:
export interface Summary {
totalCount: number;
activeCount: number;
revenue: number;
}
export interface RecentItem {
id: number;
title: string;
createdAt: string;
}
export interface PageNameProps {
summary: Summary;
recentItems: RecentItem[];
}
Create resources/js/pages/PageName/Index.tsx:
import React from 'react';
import { Head } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import Admin from '@/layouts/Admin';
import { PageNameProps } from '@/types/page_name';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
export default function PageNameIndex({ summary, recentItems }: PageNameProps) {
const { t } = useTranslation('pageName');
return (
<Admin title={t('page.title')}>
<Head title={t('page.headTitle')} />
<div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 px-4">
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
{t('stats.totalCount')}
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{summary.totalCount}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
{t('stats.activeCount')}
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{summary.activeCount}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">
{t('stats.revenue')}
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(summary.revenue)}
</div>
</CardContent>
</Card>
</div>
{/* Content Section */}
<div className="px-4">
<Card>
<CardHeader>
<CardTitle>{t('sections.recentItems')}</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{recentItems.map((item) => (
<div key={item.id} className="flex justify-between items-center p-3 rounded-lg bg-muted/50">
<div>
<p className="font-medium">{item.title}</p>
<p className="text-sm text-muted-foreground">
{new Date(item.createdAt).toLocaleDateString()}
</p>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
</div>
</Admin>
);
}
Custom pages use useTranslation directly (like forms, not like config functions):
const { t } = useTranslation('pageName');
// Page titles
<Admin title={t('page.title')}>
<Head title={t('page.headTitle')} />
// Section headers
<CardTitle>{t('sections.recentItems')}</CardTitle>
// Stats labels
<CardTitle>{t('stats.totalCount')}</CardTitle>
import axios from 'axios';
import { useTranslation } from 'react-i18next';
import { useEffect, useState } from 'react';
const { t } = useTranslation('pageName');
const [data, setData] = useState<DataType[]>([]);
useEffect(() => {
axios.get<DataType[]>('/api/endpoint')
.then(({ data }) => setData(data))
.catch(console.error);
}, []);
Admin layout with i18n-translated Head titleCard components for sectionsgrid-cols-1 md:grid-cols-3t() — no hardcoded textAfter creating the custom page:
# Backend compiles
go build ./...
# Frontend compiles
npx tsc --noEmit
# Lint the new page
npx eslint "resources/js/pages/<PageName>/**/*.tsx" --max-warnings=0
See app/http/controllers/dashboard_controller.go and resources/js/pages/dashboard/Index.tsx for the dashboard pattern.