Generate a new page/route following modern best practices.
Page Specification
$ARGUMENTS
Modern Page/Route Standards
1. Framework Structure
- Follow your framework's routing conventions
- Use appropriate file naming and organization
- Server-side rendering where beneficial
- Client-side routing where appropriate
2. Type Safety
- Strict typing where available (TypeScript, Python type hints, etc.)
- Type definitions for route parameters
- Type-safe data fetching
- NO
any/untyped data structures
3. Page Patterns
Server-Side Rendered Pages (Next.js, SvelteKit, etc.)
// Next.js App Router example
interface PageProps {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export default async function Page({ params, searchParams }: PageProps) {
// Fetch data
const data = await fetchData(params.id)
return (
<div>
{/* Page content */}
</div>
)
}
Client-Side Rendered Pages (React Router, Vue Router, etc.)
// React Router example
import { useParams } from 'react-router-dom'
export function Page() {
const { id } = useParams<{ id: string }>()
// Component logic
return <div>{/* Page content */}</div>
}
Static Pages (Gatsby, Next.js static, etc.)
- Pre-render at build time
- Optimize for performance
- Use appropriate data fetching methods
4. Data Fetching
- Server-side: Direct database/API calls (Next.js, SvelteKit)
- Client-side: Use appropriate data fetching libraries
- Implement caching strategies
- Handle loading and error states
5. SEO and Metadata
- Set appropriate meta tags
- Open Graph tags (if applicable)
- Structured data (if applicable)
- Proper heading hierarchy
6. Performance
- Code splitting by route
- Lazy load below-the-fold content
- Optimize images and assets
- Minimize JavaScript bundle size
What to Generate
- Page File - Main page component with proper typing
- Route Configuration - If needed by framework
- Data Fetching Logic - Server/client data fetching
- Metadata - SEO and meta tags
- Example Usage - How the page is accessed
Code Quality Standards
Structure
- Follow framework conventions for file organization
- Co-locate related files (components, utilities)
- Clear file naming conventions
- Proper folder structure
Type Safety (where applicable)
- Type route parameters
- Type search/query parameters
- Type data fetching responses
- Use proper error types
Data Fetching
- Handle loading states
- Handle error states
- Implement proper error boundaries
- Use appropriate caching
SEO
- Semantic HTML
- Proper heading hierarchy
- Meta descriptions
- Alt text for images
- Proper link structure
Accessibility
- Keyboard navigation
- Screen reader support
- Focus management
- ARIA labels where needed
Performance
- Code splitting
- Image optimization
- Font optimization
- Minimize render blocking resources
Framework-Specific Considerations
Next.js
- Use App Router or Pages Router conventions
- Server Components for data fetching
- Client Components for interactivity
- Metadata API for SEO
SvelteKit
- Use
+page.svelte for pages
+page.server.ts for server logic
+page.ts for shared load functions
- Proper error handling with
+error.svelte
React Router
- Use route components
- Proper route configuration
- Data loaders (v6.4+)
- Error boundaries
Vue Router
- Use route components
- Navigation guards
- Route meta fields
- Proper component structure
Remix
- Use route modules
- Loader functions
- Action functions
- Error boundaries
Generate production-ready pages that follow your framework's conventions, with proper SEO, accessibility, and performance optimizations.