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/users/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { AlertCircle, Eye, Shield, UserPlus, Users } from "lucide-react";
-import { useSession } from "next-auth/react";
+import { AlertCircle, Shield, UserPlus, Users } from "lucide-react";
 import { useCallback, useEffect, useId, useState } from "react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
@@ -24,6 +23,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { authClient } from "@/lib/auth/client";
 
 interface UserItem {
   id: string;
@@ -32,10 +32,10 @@ interface UserItem {
 }
 
 export default function UserManagementPage() {
-  const { data: session, status } = useSession();
+  const { data, isPending } = authClient.useSession();
   const [users, setUsers] = useState<UserItem[]>([]);
   const [email, setEmail] = useState<string>("");
-  const [role, setRole] = useState<string>("USER");
+  const [role, setRole] = useState<string>("user");
   const [message, setMessage] = useState<string>("");
   const [loading, setLoading] = useState(true);
   const emailId = useId();
@@ -55,16 +55,16 @@ export default function UserManagementPage() {
   }, []);
 
   useEffect(() => {
-    if (status === "authenticated") {
-      if (session?.user?.role === "ADMIN") {
+    if (!isPending && data?.session) {
+      if (data?.user?.role === "admin") {
         fetchUsers();
       } else {
         setLoading(false); // Stop loading for non-admin users
       }
-    } else if (status === "unauthenticated") {
+    } else if (!isPending && !data?.session) {
       setLoading(false);
     }
-  }, [status, session?.user?.role, fetchUsers]);
+  }, [isPending, data, fetchUsers]);
 
   async function inviteUser() {
     setMessage("");
@@ -108,7 +108,7 @@ export default function UserManagementPage() {
   }
 
   // Check for admin access
-  if (session?.user?.role !== "ADMIN") {
+  if (data?.user?.role !== "admin") {
     return (
       <div className="space-y-6">
         <Card>
@@ -185,9 +185,8 @@ export default function UserManagementPage() {
                   <SelectValue placeholder="Select role" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="USER">User</SelectItem>
-                  <SelectItem value="ADMIN">Admin</SelectItem>
-                  <SelectItem value="AUDITOR">Auditor</SelectItem>
+                  <SelectItem value="user">User</SelectItem>
+                  <SelectItem value="admin">Admin</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -237,21 +236,14 @@ export default function UserManagementPage() {
                       <TableCell>
                         <Badge
                           variant={
-                            user.role === "ADMIN"
-                              ? "default"
-                              : user.role === "AUDITOR"
-                                ? "secondary"
-                                : "outline"
+                            user.role === "admin" ? "default" : "outline"
                           }
                           className="gap-1"
                           data-testid="role-badge"
                         >
-                          {user.role === "ADMIN" && (
+                          {user.role === "admin" && (
                             <Shield className="h-3 w-3" />
                           )}
-                          {user.role === "AUDITOR" && (
-                            <Eye className="h-3 w-3" />
-                          )}
                           {user.role}
                         </Badge>
                       </TableCell>