Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From web-dev
Adds a new page to a web application, including routing, data fetching, and SEO metadata setup. Follows project patterns for layout and navigation.
How this command is triggered — by the user, by Claude, or both
Slash command
/web-dev:add-pageThe summary Claude sees in its command listing — used to decide when to auto-load this command
Add a new page to a web application with routing, data fetching, and SEO metadata. ## Steps 1. Determine the page requirements: 2. Create the page component: 3. Implement data fetching: 4. Build the page layout: 5. Add SEO metadata: 6. Handle edge cases: 7. Test the page with different data scenarios. ## Format ## Rules - Every page must have proper SEO metadata. - Handle loading, error, and empty states. - Use the project's existing layout and navigation patterns.
Add a new page to a web application with routing, data fetching, and SEO metadata.
Page: <name>
Route: <URL path>
Data: <API endpoints used>
SEO: <title, description>
npx claudepluginhub samuelj90/awesome-claude-code-toolkit --plugin web-dev/add-pageAdds a new page to a web application, including routing, data fetching, and SEO metadata setup. Follows project patterns for layout and navigation.
/nextjs-pageCreate a new Next.js App Router page with proper structure, including TypeScript types, loading/error states, metadata, generateStaticParams, and data fetching for dynamic routes.
/create-pageGenerates a new Next.js page with SSR, SSG, or ISR rendering strategy, including TypeScript types and directory boilerplate for App or Pages Router.
/scaffoldScaffolds Next.js App Router components — pages, layouts, server/client components, API routes, and server actions — following project conventions and best practices.
/structured-dataGenerates JSON-LD structured data for a page path with auto-detected schema type. Supports multiple Schema.org types and outputs Next.js App Router and Pages Router implementation code.
/f5-webGenerates frontend pages, components, hooks, API routes, contexts, and more for auto-detected stack (Next.js default; also React/Vite, Nuxt/Vue 3, Vue 3/Vite, Angular). Usage: <type> <name/path> e.g. page dashboard.