ui-template

Reusable page templates define spatial layouts using placeholder props and slots, ensuring content remains decoupled. Pages supply actual data at render time, allowing the same layout skeleton to be reused across different routes with varying content.

A layout-only approach for frontend component libraries provides wireframe structures that dictate where organisms render without fetching data. It enforces clear slot and prop contracts to handle page-level layout orchestration and responsive grid systems independently of content.

You can share consistent page skeletons across multiple frontend routes by defining content-agnostic templates. A single template accepts different data via props to render varying content while maintaining identical spatial relationships and responsive breakpoints.

Yes, a content-agnostic template structure works for different product pages by accepting varying data via props. You instantiate a template with slot components like hero and product info, then supply the specific product data to render the final page.

No, a layout-only template does not handle data fetching. It strictly enforces a separation where the template manages page-level layout, responsive grids, and spatial relationships, while the actual page supplies and fetches the real data at render time.

Using layout-only templates solves the problem of coupling layout with content by making page wireframes reusable. This approach ensures consistent rendering across routes, enforces clear prop contracts, and allows pages to manage data fetching independently.