<h1 className={styles.title}>{title}</h1>

      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}

      {/* Author & Meta */}
      <div className={styles.meta}>
        <div className={styles.author}>
          <Avatar
            src={author.avatar}
            alt={author.name}
            initials={author.name.slice(0, 2).toUpperCase()}
            size="md"
          />
          <div className={styles.authorInfo}>
            <Text weight="semibold">{author.name}</Text>
            <Text size="sm" color="muted">
              {formattedDate}
              {readingTime && ` · ${readingTime}`}
            </Text>
          </div>
        </div>

        {shareButtons && (
          <div className={styles.share}>{shareButtons}</div>
        )}
      </div>
    </header>

    {/* Featured Image */}
    {featuredImage && (
      <figure className={styles.featuredImage}>
        <img src={featuredImage} alt={title} />
      </figure>
    )}

    {/* Content with Optional TOC */}
    <div className={styles.contentWrapper}>
      {/* Table of Contents (Desktop) */}
      {tableOfContents && (
        <aside className={styles.toc}>
          <div className={styles.tocContent}>{tableOfContents}</div>
        </aside>
      )}

      {/* Main Content */}
      <div className={styles.content}>{children}</div>
    </div>

    {/* Author Bio */}
    {showAuthorBio && (
      <footer className={styles.authorBio}>
        <Avatar
          src={author.avatar}
          alt={author.name}
          initials={author.name.slice(0, 2).toUpperCase()}
          size="lg"
        />
        <div>
          <Text weight="semibold" size="lg">
            {author.name}
          </Text>
          {author.bio && <Text color="muted">{author.bio}</Text>}
        </div>
      </footer>
    )}

    {/* Share (Bottom) */}
    {shareButtons && (
      <div className={styles.bottomShare}>{shareButtons}</div>
    )}
  </article>

  {/* Related Posts */}
  {relatedPosts && (
    <section className={styles.relatedPosts}>
      <h2>Related Posts</h2>
      {relatedPosts}
    </section>
  )}

  {/* Comments */}
  {comments && (
    <section className={styles.comments}>{comments}</section>
  )}
</MainLayout>

); };

BlogPostLayout.displayName = 'BlogPostLayout';

TwoColumnLayout Template Example // templates/TwoColumnLayout/TwoColumnLayout.tsx import React from 'react'; import styles from './TwoColumnLayout.module.css';

export interface TwoColumnLayoutProps { / Left column (usually main content) */ main: React.ReactNode; / Right column (usually sidebar) / sidebar: React.ReactNode; / Sidebar position / sidebarPosition?: 'left' | 'right'; / Sidebar width */ sidebarWidth?: 'narrow' | 'medium' | 'wide'; / Sticky sidebar / stickySidebar?: boolean; / Reverse on mobile (show sidebar first) / reverseMobile?: boolean; /* Gap between columns / gap?: 'sm' | 'md' | 'lg'; }

export const TwoColumnLayout: React.FC = ({ main, sidebar, sidebarPosition = 'right', sidebarWidth = 'medium', stickySidebar = false, reverseMobile = false, gap = 'md', }) => { const layoutClass = [ styles.layout, styles[sidebar-${sidebarPosition}], styles[width-${sidebarWidth}], styles[gap-${gap}], reverseMobile && styles.reverseMobile, ] .filter(Boolean) .join(' ');

const sidebarClass = [ styles.sidebar, stickySidebar && styles.sticky, ] .filter(Boolean) .join(' ');

return (

TwoColumnLayout.displayName = 'TwoColumnLayout';

Best Practices 1. Use Placeholder Content // GOOD: Template with placeholder content slots const ProductDetailLayout = ({ productGallery, // Placeholder for gallery component productInfo, // Placeholder for product details productTabs, // Placeholder for tabs relatedProducts, // Placeholder for recommendations }) => (

);

// BAD: Template with hardcoded content const ProductDetailLayout = ({ product }) => (

);

1. Define Clear Content Areas // GOOD: Clear, named content slots interface PageTemplateProps { header: React.ReactNode; hero?: React.ReactNode; main: React.ReactNode; sidebar?: React.ReactNode; footer: React.ReactNode; }

// BAD: Generic children only interface PageTemplateProps { children: React.ReactNode; }

1. Handle Responsive Layouts // GOOD: Responsive considerations built-in const DashboardLayout = ({ sidebar, main }) => (
   
   {main}

);

// CSS handles responsive behavior // .sidebar { @media (max-width: 768px) { display: none; } }

1. Keep Templates Thin // GOOD: Template just arranges organisms const MainLayout = ({ header, main, footer }) => (
   
   {header}

   {main}

   {footer}

);

// BAD: Template with business logic const MainLayout = ({ userId }) => { const user = useUser(userId); // Fetching data const isAdmin = user?.role === 'admin'; // Business logic

return (

Anti-Patterns to Avoid 1. Templates with Real Content // BAD: Hardcoded real content const HomepageLayout = () => (

);

// GOOD: Content passed as props/children const HomepageLayout = ({ heroTitle, heroDescription }) => (

);

1. Over-Nested Templates // BAD: Templates containing templates const AppLayout = () => ( {/ Too much nesting /} );

// GOOD: Choose appropriate template directly const AppPage = () => ( {/ Content /} );

1. Templates with Too Many Props // BAD: Too many configuration options interface LayoutProps { showHeader: boolean; showFooter: boolean; showSidebar: boolean; sidebarPosition: 'left' | 'right'; headerVariant: 'default' | 'minimal' | 'transparent'; footerVariant: 'default' | 'minimal'; maxWidth: 'sm' | 'md' | 'lg' | 'xl'; // ... 20 more props }

// GOOD: Create separate templates const FullPageLayout = ({ ... }) => { ... }; const MinimalLayout = ({ ... }) => { ... }; const SidebarLayout = ({ ... }) => { ... };

Template Composition Patterns Nested Layouts // Base layout for all pages const BaseLayout = ({ children }) => (

);

// Marketing layout extending base const MarketingLayout = ({ children }) => (