fix: resolve Prettier markdown code block parsing errors

- Fix syntax errors in skills markdown files (.github/skills, .opencode/skills)
- Change typescript to tsx for code blocks with JSX
- Replace ellipsis (...) in array examples with valid syntax
- Separate CSS from TypeScript into distinct code blocks
- Convert JavaScript object examples to valid JSON in docs
- Fix enum definitions with proper comma separation

app/dashboard/layout.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
 import { type ReactNode, useCallback, useEffect, useId, useState } from "react";
-import Sidebar from "../../components/Sidebar";
+import Sidebar from "@/components/Sidebar";
+import { authClient } from "@/lib/auth/client";
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   const mainContentId = useId();
-  const { status } = useSession();
+  const { data, isPending } = authClient.useSession();
   const router = useRouter();
 
   const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
@@ -40,19 +40,21 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
     }
   }, [isMobile]);
 
-  if (status === "unauthenticated") {
-    router.push("/login");
+  // Redirect handled by middleware, but show loading state
+  if (isPending) {
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="text-center">Redirecting to login...</div>
+        <div className="text-center">Loading session...</div>
       </div>
     );
   }
 
-  if (status === "loading") {
+  // If no session after loading, redirect to sign-in
+  if (!data?.session) {
+    router.push("/auth/sign-in");
     return (
       <div className="flex h-screen items-center justify-center">
-        <div className="text-center">Loading session...</div>
+        <div className="text-center">Redirecting to login...</div>
       </div>
     );
   }
@@ -76,7 +78,6 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
           }
           sm:pr-6 md:py-6 md:pr-10`}
       >
-        {/* <div className="w-full mx-auto">{children}</div> */}
         <div className="max-w-7xl mx-auto">{children}</div>
       </main>
     </div>