// ✅ Standard container pattern
<div className="container max-w-6xl mx-auto px-4 py-12">
  {/* Page content */}
</div>

// ❌ Don't use inconsistent widths
<div className="container max-w-4xl mx-auto px-4 py-12">  // Wrong!

// ✅ Mobile-first responsive classes
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">

// ✅ Hide on mobile, show on desktop
<nav className="hidden md:flex items-center gap-1">

// ✅ Show on mobile, hide on desktop
<div className="md:hidden">

// ✅ Use <button> for interactions (not <div>)
<button
  type="button"
  onClick={handleClick}
  className="px-4 py-2 bg-primary text-white rounded"
>
  Click Me
</button>

// ❌ Don't use divs for clickable elements
<div onClick={handleClick}>Click Me</div>

<span className="sr-only">Hidden from visual but read by screen readers</span>

<Button variant="ghost" size="icon">
  <Menu className="h-5 w-5" />
  <span className="sr-only">Open menu</span>
</Button>

<SheetContent>
  <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
  <SheetDescription className="sr-only">
    Navigate to different pages
  </SheetDescription>
  {/* Visible content */}
</SheetContent>

// ✅ Always provide alt text
<img src="/logo.png" alt="Company logo" />

// ❌ Never empty alt
<img src="/logo.png" alt="" />  // Unless purely decorative

// Headings
<h1 className="text-4xl md:text-5xl font-bold">  // Page title
<h2 className="text-2xl font-semibold">          // Section title
<h3 className="text-lg font-medium">             // Subsection

// Body text
<p className="text-muted-foreground">            // Secondary text
<p className="text-sm text-muted-foreground">    // Small secondary text

function MyPage() {
  return (
    <Layout>
      <div className="container max-w-6xl mx-auto px-4 py-12">
        {/* Hero Section */}
        <section className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">Title</h1>
          <p className="text-lg text-muted-foreground">Description</p>
        </section>

        {/* Content Section */}
        <section className="mb-16">
          <h2 className="text-2xl font-semibold text-center mb-6">Section</h2>
          <div className="grid md:grid-cols-2 gap-6">
            {/* Grid items */}
          </div>
        </section>
      </div>
    </Layout>
  )
}

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map(item => (
    <Card key={item.id}>
      <CardHeader>
        <CardTitle>{item.title}</CardTitle>
      </CardHeader>
      <CardContent>
        {item.content}
      </CardContent>
    </Card>
  ))}
</div>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="ghost" size="icon">
      <Menu className="h-5 w-5" />
      <span className="sr-only">Toggle menu</span>
    </Button>
  </SheetTrigger>
  <SheetContent side="right" className="w-[280px]">
    <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
    {/* Menu content */}
  </SheetContent>
</Sheet>