Overview

Defines a React TEMPLATE for page-level layout composition without real data binding. It creates shell templates by exposing regions (header, sidebar, content, footer) that can be wired together via props or children.

How This Skill Works

Templates are built as functional components that expose slot-based regions (header, sidebar, content, footer). They avoid data fetching and domain logic, focusing on structure and composition, so other components (organisms) supply content at render time.

When to Use It

• Creating page shells and dashboards without binding to live data
• Prototyping list-detail layouts before data models exist
• Building reusable app chrome that can be composed in multiple pages
• Designing responsive layouts across breakpoints with semantic landmarks
• Sharing a consistent layout skeleton across teams and projects

Quick Start

1. Step 1: Create Template.tsx under src/templates/<TemplateName>/ implementing functional components and slot regions
2. Step 2: Expose regions via props/children (header, sidebar, content, footer) and keep data fetching out
3. Step 3: Add Template.stories.tsx to show multiple compositions and responsive behavior

Best Practices

• Define clear regions (header, sidebar, content, footer) using props or children
• Keep styling minimal and layout-driven; avoid domain logic
• Use slot-based design to avoid hard-coding copy or assumptions
• Prioritize accessibility with proper landmarks and semantic headings
• Provide multiple compositions in stories to demonstrate flexibility

Example Use Cases

• Admin dashboard shell with header, left navigation, main content, and footer
• Marketing site template with a header, content region, and responsive sidebar
• CRM list-detail page shell used by multiple records with slot-based regions
• Documentation site layout template with consistent header and content regions
• App-wide shell reusable across pages with swap-in content components

Frequently Asked Questions