page-layout-builder
Page Layout Builder creates complete, responsive page structures for common application patterns including dashboards, authentication flows, settings panels, and CRUD interfaces. Each layout includes routing setup, navigation components, and state management scaffolding ready for your business logic.
Page Layout Builder generates production-ready page layouts with integrated routing and navigation for standard application patterns.
AI-generated summary based on this skill's SKILL.md
Install
patricio0312rev/skills/page-layout-builder
git clone https://github.com/patricio0312rev/skills
cp -r skills/frontend/page-layout-builder ~/.claude/skills/page-layout-buildernpx skillfed install patricio0312rev/skills/page-layout-builderFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does page-layout-builder generate dashboard layout templates?
Page Layout Builder creates complete, responsive page structures for common application patterns. For dashboards, it generates a full layout with header navigation, sidebar menu, responsive grid for dashboard cards, and routing setup. Each template includes navigation components, state management scaffolding, and loading state placeholders ready for your business logic.
Can page-layout-builder build authentication pages like login and signup?
Yes. Page Layout Builder provides production-ready templates for authentication pages including login and signup flows. These templates include form layouts, error handling, loading states, and routing configuration. The templates are designed as responsive, mobile-first structures that integrate with your authentication logic.
What does page-layout-builder include for CRUD page layouts?
Page Layout Builder offers complete CRUD page templates with table list layouts featuring filters, modal dialogs for create forms, and responsive design patterns. Each template includes routing, navigation setup, loading state placeholders, and component scaffolding to connect your data management logic quickly.
How does page-layout-builder handle responsive mobile-first design?
Page Layout Builder creates responsive layouts with mobile-first breakpoints built in. Templates include responsive sidebar navigation, grid systems for dashboard cards, and adaptive layouts that work across devices. All structures follow mobile-first design patterns to ensure optimal performance on smaller screens first.
What navigation and layout patterns does page-layout-builder establish?
Page Layout Builder provides consistent navigation and layout component patterns including header with user menu components, breadcrumb navigation setup, and responsive sidebar navigation. These patterns establish a cohesive foundation across your application with route group organization and standardized component structures.
Does page-layout-builder support Next.js app router page templates?
Yes. Page Layout Builder generates page templates optimized for Next.js app router with route group organization, suspense boundary data fetching setup, and error boundary patterns. Templates include landing page shells, settings profile pages, and other common structures configured for modern Next.js routing.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```typescript // app/dashboard/layout.tsx import { Sidebar } from "@/components/Sidebar"; import { Header } from "@/components/Header";
export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { return ( <div
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
frontend/page-layout-builder/SKILL.md