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

tests/unit/keyboard-navigation.test.tsx

@@ -3,16 +3,21 @@
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { useSession } from "next-auth/react";
 import { useParams } from "next/navigation";
 import UserManagementPage from "@/app/dashboard/users/page";
 import SessionViewPage from "@/app/dashboard/sessions/[id]/page";
 import ModernDonutChart from "@/components/charts/donut-chart";
 
+// Mock auth client
+const mockUseSession = vi.fn();
+vi.mock("@/lib/auth/client", () => ({
+  authClient: {
+    useSession: () => mockUseSession(),
+  },
+}));
+
 // Mock dependencies
-vi.mock("next-auth/react");
 vi.mock("next/navigation");
-const mockUseSession = vi.mocked(useSession);
 const mockUseParams = vi.mocked(useParams);
 
 // Mock fetch
@@ -22,8 +27,8 @@ describe("Keyboard Navigation Tests", () => {
   describe("User Management Page Keyboard Navigation", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -189,8 +194,8 @@ describe("Keyboard Navigation Tests", () => {
   describe("Session Details Page Keyboard Navigation", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       mockUseParams.mockReturnValue({
@@ -346,8 +351,8 @@ describe("Keyboard Navigation Tests", () => {
   describe("Focus Management", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -427,8 +432,8 @@ describe("Keyboard Navigation Tests", () => {
   describe("Screen Reader Support", () => {
     beforeEach(() => {
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({
@@ -456,7 +461,7 @@ describe("Keyboard Navigation Tests", () => {
       // Test loading state announcement
       mockUseSession.mockReturnValue({
         data: null,
-        status: "loading",
+        isPending: true,
       });
 
       render(<UserManagementPage />);
@@ -507,8 +512,8 @@ describe("Keyboard Navigation Tests", () => {
       });
 
       mockUseSession.mockReturnValue({
-        data: { user: { role: "ADMIN" } },
-        status: "authenticated",
+        data: { session: { id: "1" }, user: { email: "admin@example.com" } },
+        isPending: false,
       });
 
       (global.fetch as any).mockResolvedValue({