**Design System Enhancements:** Replace .md links with clean paths in /dev documentation. Migrate anchor tags (<a>) to Next.js <Link> components for internal navigation. Add dynamic [...slug] markdown route for rendering docs. Introduce MarkdownContent for styled markdown rendering with syntax highlighting. Perform general cleanup of unused imports and variables in design system files. Fix minor wording issues.

frontend/src/app/dev/forms/page.tsx

@@ -16,7 +16,6 @@ import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
@@ -30,7 +29,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Example, ExampleSection } from '@/components/dev/Example';
@@ -441,7 +439,7 @@ const { register, handleSubmit, formState: { errors } } = useForm({
                   </li>
                   <li className="flex items-start gap-2">
                     <CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5" />
-                    <span>Add <code className="text-xs">role="alert"</code> to error messages</span>
+                    <span>Add <code className="text-xs">role=&quot;alert&quot;</code> to error messages</span>
                   </li>
                   <li className="flex items-start gap-2">
                     <CheckCircle2 className="h-4 w-4 text-green-600 mt-0.5" />
@@ -575,14 +573,12 @@ const { register, handleSubmit, formState: { errors } } = useForm({
         <div className="container mx-auto px-4 text-center">
           <p className="text-sm text-muted-foreground">
             Learn more:{' '}
-            <a
-              href="/docs/design-system/06-forms.md"
-              target="_blank"
-              rel="noopener noreferrer"
+            <Link
+              href="/docs/design-system/06-forms"
               className="font-medium hover:text-foreground"
             >
               Forms Documentation
-            </a>
+            </Link>
           </p>
         </div>
       </footer>

frontend/src/app/dev/layouts/page.tsx

@@ -6,7 +6,7 @@
 
 import type { Metadata } from 'next';
 import Link from 'next/link';
-import { ArrowLeft, Grid3x3, LayoutDashboard } from 'lucide-react';
+import { ArrowLeft, Grid3x3 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -508,14 +508,12 @@ export default function LayoutsPage() {
         <div className="container mx-auto px-4 text-center">
           <p className="text-sm text-muted-foreground">
             Learn more:{' '}
-            <a
-              href="/docs/design-system/03-layouts.md"
-              target="_blank"
-              rel="noopener noreferrer"
+            <Link
+              href="/docs/design-system/03-layouts"
               className="font-medium hover:text-foreground"
             >
               Layout Documentation
-            </a>
+            </Link>
           </p>
         </div>
       </footer>

frontend/src/app/dev/page.tsx

@@ -70,22 +70,22 @@ const documentationLinks = [
   {
     title: 'Quick Start',
     description: '5-minute crash course',
-    href: '/docs/design-system/00-quick-start.md',
+    href: '/docs/design-system/00-quick-start',
   },
   {
     title: 'Complete Documentation',
     description: 'Full design system guide',
-    href: '/docs/design-system/README.md',
+    href: '/docs/design-system/README',
   },
   {
     title: 'AI Guidelines',
     description: 'Rules for AI code generation',
-    href: '/docs/design-system/08-ai-guidelines.md',
+    href: '/docs/design-system/08-ai-guidelines',
   },
   {
     title: 'Quick Reference',
     description: 'Cheat sheet for lookups',
-    href: '/docs/design-system/99-reference.md',
+    href: '/docs/design-system/99-reference',
   },
 ];
 
@@ -190,11 +190,9 @@ export default function DesignSystemHub() {
 
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
               {documentationLinks.map((link) => (
-                <a
+                <Link
                   key={link.href}
                   href={link.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
                   className="group"
                 >
                   <Card className="h-full transition-all hover:border-primary/50 hover:bg-accent/50">
@@ -207,7 +205,7 @@ export default function DesignSystemHub() {
                       </CardDescription>
                     </CardHeader>
                   </Card>
-                </a>
+                </Link>
               ))}
             </div>
           </section>

frontend/src/app/dev/spacing/page.tsx

@@ -374,7 +374,7 @@ export default function SpacingPage() {
                     <ul className="ml-6 space-y-1 text-sm text-muted-foreground list-disc">
                       <li>Exception case (one child needs different spacing)</li>
                       <li>Negative margin for overlap effects</li>
-                      <li>Can't modify parent (external component)</li>
+                      <li>Cannot modify parent (external component)</li>
                     </ul>
                     <div className="rounded-lg border bg-muted/30 p-3 font-mono text-xs">
                       mt-8 {/* exception */}
@@ -506,14 +506,12 @@ export default function SpacingPage() {
         <div className="container mx-auto px-4 text-center">
           <p className="text-sm text-muted-foreground">
             Learn more:{' '}
-            <a
-              href="/docs/design-system/04-spacing-philosophy.md"
-              target="_blank"
-              rel="noopener noreferrer"
+            <Link
+              href="/docs/design-system/04-spacing-philosophy"
               className="font-medium hover:text-foreground"
             >
               Spacing Philosophy Documentation
-            </a>
+            </Link>
           </p>
         </div>
       </footer>

frontend/src/app/docs/[...slug]/page.tsx

@@ -0,0 +1,122 @@
+/**
+ * Dynamic Documentation Route
+ * Renders markdown files from docs/ directory
+ * Access: /docs/design-system/01-foundations, etc.
+ */
+
+import { notFound } from 'next/navigation';
+import { promises as fs } from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import Link from 'next/link';
+import { ArrowLeft, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { MarkdownContent } from '@/components/docs/MarkdownContent';
+
+interface DocPageProps {
+  params: Promise<{ slug: string[] }>;
+}
+
+// Generate static params for all documentation files
+export async function generateStaticParams() {
+  const docsDir = path.join(process.cwd(), 'docs', 'design-system');
+
+  try {
+    const files = await fs.readdir(docsDir);
+    const mdFiles = files.filter(file => file.endsWith('.md'));
+
+    return mdFiles.map(file => ({
+      slug: ['design-system', file.replace(/\.md$/, '')],
+    }));
+  } catch {
+    return [];
+  }
+}
+
+// Get markdown file content
+async function getDocContent(slug: string[]) {
+  const filePath = path.join(process.cwd(), 'docs', ...slug) + '.md';
+
+  try {
+    const fileContent = await fs.readFile(filePath, 'utf-8');
+    const { data, content } = matter(fileContent);
+
+    return {
+      frontmatter: data,
+      content,
+      filePath: slug.join('/'),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export default async function DocPage({ params }: DocPageProps) {
+  const { slug } = await params;
+  const doc = await getDocContent(slug);
+
+  if (!doc) {
+    notFound();
+  }
+
+  // Extract title from first heading or use filename
+  const title = doc.content.match(/^#\s+(.+)$/m)?.[1] || slug[slug.length - 1];
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto flex h-16 items-center gap-4 px-4">
+          <Link href="/dev">
+            <Button variant="ghost" size="icon" aria-label="Back to design system">
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+          </Link>
+          <div className="flex items-center gap-2">
+            <FileText className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <h1 className="text-lg font-semibold">{title}</h1>
+              <p className="text-xs text-muted-foreground">
+                {doc.filePath}
+              </p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Content */}
+      <main className="container mx-auto px-4 py-8">
+        <div className="mx-auto max-w-4xl">
+          <MarkdownContent content={doc.content} />
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="mt-16 border-t py-6">
+        <div className="container mx-auto px-4">
+          <div className="mx-auto max-w-4xl">
+            <Separator className="mb-6" />
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <p className="text-sm text-muted-foreground">
+                FastNext Design System Documentation
+              </p>
+              <div className="flex gap-2">
+                <Link href="/dev">
+                  <Button variant="outline" size="sm">
+                    View Interactive Demos
+                  </Button>
+                </Link>
+                <Link href="/docs/design-system/README">
+                  <Button variant="outline" size="sm">
+                    Documentation Home
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}