Update optimization documentation

stories/ErrorBoundary.stories.js

@@ -0,0 +1,23 @@
+import ErrorBoundary from "../app/components/ErrorBoundary";
+
+export default {
+  title: "Components/ErrorBoundary",
+  component: ErrorBoundary,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An error boundary component that catches JavaScript errors in its child component tree. Displays a fallback UI when errors occur and logs error information for debugging.",
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      control: { type: "text" },
+      description: "Child components to wrap with error boundary",
+    },
+  },
+};
+
+export default ErrorBoundary;

stories/WebVitalsDashboard.stories.js

@@ -0,0 +1,39 @@
+import WebVitalsDashboard from "../app/components/WebVitalsDashboard";
+
+export default {
+  title: "Components/WebVitalsDashboard",
+  component: WebVitalsDashboard,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A comprehensive dashboard component that displays real-time and historical Web Vitals data. Shows Core Web Vitals metrics, performance ratings, and optimization recommendations.",
+      },
+    },
+  },
+  argTypes: {},
+};
+
+export const Default = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The default Web Vitals dashboard showing real-time performance metrics and historical data.",
+      },
+    },
+  },
+};
+
+export const Loading = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: "The dashboard in loading state while fetching Web Vitals data.",
+      },
+    },
+  },
+};