a11y: skip-to-main link in layout shell (#34)

src/app/docs/agents-md/page.tsx

@@ -13,7 +13,7 @@ export const metadata = {
 export default function AgentsMdPage() {
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-background/80 relative overflow-hidden">
           <div className="absolute inset-0 z-0 opacity-50">
             <AnimatedGradient />
@@ -201,7 +201,7 @@ Humans: stop reading—go to CONTRIBUTING.md + docs/.
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }

src/app/docs/layout.tsx

@@ -7,12 +7,12 @@ export default function DocsLayout({ children }: { children: ReactNode }) {
   return (
     <div className="flex flex-1 min-h-0">
       <DocsSidebar />
-      <main className="flex-1 min-w-0 overflow-auto">
+      <div className="flex-1 min-w-0 overflow-auto">
         <div className="container pt-6 pb-0">
           <DocsBreadcrumb />
         </div>
         {children}
-      </main>
+      </div>
     </div>
   );
 }

src/app/extensions/ExtensionsPageClient.tsx

@@ -80,7 +80,7 @@ export function ExtensionsPageClient() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <div className="w-full bg-gradient-to-r from-violet-600 via-violet-500 to-cyan-500 text-white py-3 relative">
           <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden>
             <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))] animate-pulse" />
@@ -209,7 +209,7 @@ export function ExtensionsPageClient() {
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }

src/app/extensions/[slug]/page.tsx

@@ -54,7 +54,7 @@ export default async function ExtensionPage({ params }: ExtensionPageProps) {
   const softwareJsonLd = extensionSoftwareJsonLd(extension);
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <script
           type="application/ld+json"
           // biome-ignore lint/security/noDangerouslySetInnerHtml: data controlado
@@ -66,7 +66,7 @@ export default async function ExtensionPage({ params }: ExtensionPageProps) {
           dangerouslySetInnerHTML={{ __html: jsonLdScript(softwareJsonLd) }}
         />
         <ExtensionDetailsClient extension={extension} compatibleTemplates={compatibleTemplates} />
-      </main>
+      </div>
     </div>
   );
 }

src/app/page.tsx

@@ -32,7 +32,7 @@ export default async function Home() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <AnnouncementBanner
           icon={<CommunityLogo size={20} className="shrink-0 rounded" />}
           label="NEW"
@@ -247,7 +247,7 @@ export default async function Home() {
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }

src/app/templates/TemplatesPageClient.tsx

@@ -83,7 +83,7 @@ export function TemplatesPageClient() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <AnnouncementBanner
           message={
             <>
@@ -197,7 +197,7 @@ export function TemplatesPageClient() {
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }

src/app/templates/[slug]/extensions/[extensionSlug]/page.tsx

@@ -73,7 +73,7 @@ export default function TemplateExtensionPage({
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-background/80 relative overflow-hidden">
           <div className="absolute inset-0 z-0 opacity-50">
             <AnimatedGradient />
@@ -416,7 +416,7 @@ export default function TemplateExtensionPage({
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }

src/app/templates/[slug]/page.tsx

@@ -69,7 +69,7 @@ export default async function TemplatePage({ params }: TemplatePageProps) {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <script
           type="application/ld+json"
           // biome-ignore lint/security/noDangerouslySetInnerHtml: data controlado
@@ -81,7 +81,7 @@ export default async function TemplatePage({ params }: TemplatePageProps) {
           dangerouslySetInnerHTML={{ __html: jsonLdScript(softwareJsonLd) }}
         />
         <TemplateDetailsClient template={template} compatibleExtensions={compatibleExtensions} />
-      </main>
+      </div>
     </div>
   );
 }

src/components/layout-shell.tsx

@@ -14,9 +14,17 @@ export function LayoutShell({ children }: { children: ReactNode }) {
     <PerformanceProvider>
       <ThemeProvider defaultTheme="dark">
         <div className="flex min-h-screen flex-col">
+          <a
+            href="#main-content"
+            className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-primary-foreground"
+          >
+            Skip to main content
+          </a>
           <SiteHeader onOpenCommand={() => setOpen(true)} />
           <CommandMenu open={open} onOpenChange={setOpen} />
-          {children}
+          <main id="main-content" className="flex-1" tabIndex={-1}>
+            {children}
+          </main>
           <footer className="w-full border-t mt-16">
             {/* Stats row */}
             <div className="border-b border-border/50">