feat: Major update with validators, skills, dashboard, and docs reorganization

- Add validation framework (config, model, results, study validators)
- Add Claude Code skills (create-study, run-optimization, generate-report,
  troubleshoot, analyze-model)
- Add Atomizer Dashboard (React frontend + FastAPI backend)
- Reorganize docs into structured directories (00-09)
- Add neural surrogate modules and training infrastructure
- Add multi-objective optimization support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

atomizer-dashboard/frontend/src/components/layout/MainLayout.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import { Sidebar } from './Sidebar';
+
+export const MainLayout = () => {
+  return (
+    <div className="min-h-screen bg-dark-900 text-dark-50 font-sans">
+      <Sidebar />
+      <main className="ml-64 min-h-screen">
+        <div className="max-w-7xl mx-auto p-8">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+};

atomizer-dashboard/frontend/src/components/layout/Sidebar.tsx

@@ -0,0 +1,55 @@
+import { NavLink } from 'react-router-dom';
+import { LayoutDashboard, Settings, FileText, Activity } from 'lucide-react';
+import clsx from 'clsx';
+
+export const Sidebar = () => {
+  const navItems = [
+    { to: '/dashboard', icon: Activity, label: 'Live Dashboard' },
+    { to: '/configurator', icon: Settings, label: 'Configurator' },
+    { to: '/results', icon: FileText, label: 'Results Viewer' },
+  ];
+
+  return (
+    <aside className="w-64 bg-dark-800 border-r border-dark-600 flex flex-col h-screen fixed left-0 top-0">
+      <div className="p-6 border-b border-dark-600">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
+            <LayoutDashboard className="w-5 h-5 text-white" />
+          </div>
+          <h1 className="text-xl font-bold text-white tracking-tight">Atomizer</h1>
+        </div>
+        <p className="text-xs text-dark-300 mt-1 ml-11">Optimization Platform</p>
+      </div>
+
+      <nav className="flex-1 p-4 space-y-1">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            className={({ isActive }) =>
+              clsx(
+                'flex items-center gap-3 px-4 py-3 rounded-lg transition-colors duration-200',
+                isActive
+                  ? 'bg-primary-900/50 text-primary-100 border border-primary-700/50'
+                  : 'text-dark-300 hover:bg-dark-700 hover:text-white'
+              )
+            }
+          >
+            <item.icon className="w-5 h-5" />
+            <span className="font-medium">{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="p-4 border-t border-dark-600">
+        <div className="bg-dark-700 rounded-lg p-4">
+          <div className="text-xs font-medium text-dark-400 uppercase mb-2">System Status</div>
+          <div className="flex items-center gap-2 text-sm text-green-400">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+            Backend Online
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+};