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/dashboard/StudyCard.tsx

@@ -0,0 +1,59 @@
+import { Study } from '../../types';
+import clsx from 'clsx';
+import { Play, CheckCircle, Clock } from 'lucide-react';
+
+interface StudyCardProps {
+  study: Study;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+export const StudyCard = ({ study, isActive, onClick }: StudyCardProps) => {
+  const getStatusIcon = () => {
+    switch (study.status) {
+      case 'running':
+        return <Play className="w-4 h-4 text-green-400 animate-pulse" />;
+      case 'completed':
+        return <CheckCircle className="w-4 h-4 text-blue-400" />;
+      default:
+        return <Clock className="w-4 h-4 text-dark-400" />;
+    }
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={clsx(
+        'p-4 rounded-lg border cursor-pointer transition-all duration-200',
+        isActive
+          ? 'bg-primary-900/20 border-primary-500/50 shadow-md'
+          : 'bg-dark-800 border-dark-600 hover:bg-dark-700 hover:border-dark-500'
+      )}
+    >
+      <div className="flex items-start justify-between mb-2">
+        <h4 className={clsx('font-medium truncate pr-2', isActive ? 'text-primary-100' : 'text-dark-100')}>
+          {study.name}
+        </h4>
+        {getStatusIcon()}
+      </div>
+      
+      <div className="flex items-center justify-between text-xs text-dark-300">
+        <span>{study.status}</span>
+        <span>
+          {study.progress.current} / {study.progress.total} trials
+        </span>
+      </div>
+      
+      {/* Progress Bar */}
+      <div className="mt-3 h-1.5 w-full bg-dark-700 rounded-full overflow-hidden">
+        <div 
+          className={clsx(
+            "h-full rounded-full transition-all duration-500",
+            study.status === 'completed' ? 'bg-blue-500' : 'bg-green-500'
+          )}
+          style={{ width: `${(study.progress.current / study.progress.total) * 100}%` }}
+        />
+      </div>
+    </div>
+  );
+};