Introduce AuthLoadingSkeleton and HeaderSkeleton for smoother loading, replace spinner in AuthGuard, update ReactQueryDevtools toggle, enable Docker ports for local development.

frontend/src/components/layout/HeaderSkeleton.tsx

@@ -0,0 +1,32 @@
+/**
+ * Header Skeleton Component
+ * Loading placeholder for Header during authentication check
+ * Matches the structure of the actual Header component
+ */
+
+export function HeaderSkeleton() {
+  return (
+    <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 px-4">
+        {/* Logo skeleton */}
+        <div className="flex items-center space-x-8">
+          <div className="flex items-center space-x-2">
+            <div className="h-6 w-24 bg-muted animate-pulse rounded" />
+          </div>
+
+          {/* Navigation links skeleton */}
+          <nav className="hidden md:flex items-center space-x-1">
+            <div className="h-8 w-16 bg-muted animate-pulse rounded-md" />
+            <div className="h-8 w-16 bg-muted animate-pulse rounded-md" />
+          </nav>
+        </div>
+
+        {/* Right side - Theme toggle and user menu skeleton */}
+        <div className="ml-auto flex items-center space-x-2">
+          <div className="h-10 w-10 bg-muted animate-pulse rounded-md" />
+          <div className="h-10 w-10 bg-muted animate-pulse rounded-full" />
+        </div>
+      </div>
+    </header>
+  );
+}