diff --git a/docs/testing-framework.md b/docs/testing-framework.md
index 4c91385..b0f9868 100644
--- a/docs/testing-framework.md
+++ b/docs/testing-framework.md
@@ -191,7 +191,7 @@ test("components work together", () => {
       <Header />
       <MainContent />
       <Footer />
-    </div>
+    </div>,
   );
 
   // Test that components complement each other
diff --git a/tests/accessibility/unit/components.test.jsx b/tests/accessibility/unit/components.test.jsx
index 43136c1..84dae17 100644
--- a/tests/accessibility/unit/components.test.jsx
+++ b/tests/accessibility/unit/components.test.jsx
@@ -155,7 +155,7 @@ describe("Accessibility - Component Level", () => {
     }
 
     const headingLevels = headings.map((heading) =>
-      parseInt(heading.tagName.charAt(1))
+      parseInt(heading.tagName.charAt(1)),
     );
 
     // Check that heading levels are sequential (no skipping levels)
diff --git a/tests/e2e/visual-regression.spec.ts b/tests/e2e/visual-regression.spec.ts
index e41d19c..0bc34b2 100644
--- a/tests/e2e/visual-regression.spec.ts
+++ b/tests/e2e/visual-regression.spec.ts
@@ -413,7 +413,7 @@ test.describe("Visual Regression Tests", () => {
     await page.evaluate(() => {
       document.documentElement.style.setProperty(
         "--prefers-reduced-motion",
-        "reduce"
+        "reduce",
       );
     });
 
diff --git a/tests/unit/Button.test.jsx b/tests/unit/Button.test.jsx
index 27b2d08..2e1e487 100644
--- a/tests/unit/Button.test.jsx
+++ b/tests/unit/Button.test.jsx
@@ -81,7 +81,7 @@ describe("Button Component", () => {
     expect(button).toBeDisabled();
     expect(button).toHaveClass(
       "disabled:opacity-50",
-      "disabled:cursor-not-allowed"
+      "disabled:cursor-not-allowed",
     );
     expect(button).toHaveAttribute("aria-disabled", "true");
     expect(button).toHaveAttribute("tabIndex", "-1");
@@ -119,7 +119,7 @@ describe("Button Component", () => {
     render(
       <Button href="/test" target="_blank" rel="noopener">
         External Link
-      </Button>
+      </Button>,
     );
 
     const link = screen.getByRole("link");
diff --git a/tests/unit/Logo.test.jsx b/tests/unit/Logo.test.jsx
index 4d31d89..196717e 100644
--- a/tests/unit/Logo.test.jsx
+++ b/tests/unit/Logo.test.jsx
@@ -52,13 +52,13 @@ describe("Logo Component", () => {
     const { rerender } = render(<Logo size="homeHeaderMd" />);
     let textElement = screen.getByText("CommunityRule");
     expect(textElement).toHaveClass(
-      "text-[var(--color-content-inverse-primary)]"
+      "text-[var(--color-content-inverse-primary)]",
     );
 
     rerender(<Logo size="header" />);
     textElement = screen.getByText("CommunityRule");
     expect(textElement).toHaveClass(
-      "text-[var(--color-content-default-primary)]"
+      "text-[var(--color-content-default-primary)]",
     );
   });
 
diff --git a/tests/unit/NumberedCard.test.jsx b/tests/unit/NumberedCard.test.jsx
index 9d1dd9b..8623454 100644
--- a/tests/unit/NumberedCard.test.jsx
+++ b/tests/unit/NumberedCard.test.jsx
@@ -25,7 +25,7 @@ describe("NumberedCard Component", () => {
 
   it("renders with different text content", () => {
     const { rerender } = render(
-      <NumberedCard {...defaultProps} text="Different Text" />
+      <NumberedCard {...defaultProps} text="Different Text" />,
     );
     expect(screen.getByText("Different Text")).toBeInTheDocument();
 
@@ -77,7 +77,7 @@ describe("NumberedCard Component", () => {
       .closest("div").parentElement;
     expect(card).toHaveClass(
       "bg-[var(--color-surface-inverse-primary)]",
-      "shadow-lg"
+      "shadow-lg",
     );
   });
 
@@ -103,7 +103,7 @@ describe("NumberedCard Component", () => {
       "inset-0",
       "flex",
       "items-center",
-      "justify-center"
+      "justify-center",
     );
   });
 
@@ -120,7 +120,7 @@ describe("NumberedCard Component", () => {
       "lg:absolute",
       "lg:bottom-8",
       "lg:left-8",
-      "lg:right-16"
+      "lg:right-16",
     );
   });
 
@@ -139,7 +139,7 @@ describe("NumberedCard Component", () => {
       "text-[24px]",
       "sm:text-[24px]",
       "lg:text-[24px]",
-      "xl:text-[32px]"
+      "xl:text-[32px]",
     );
   });
 
@@ -173,7 +173,7 @@ describe("NumberedCard Component", () => {
       "sm:flex-row",
       "sm:gap-8",
       "sm:p-8",
-      "sm:items-center"
+      "sm:items-center",
     );
 
     // Large breakpoint
@@ -182,7 +182,7 @@ describe("NumberedCard Component", () => {
       "lg:gap-0",
       "lg:p-8",
       "lg:items-stretch",
-      "lg:relative"
+      "lg:relative",
     );
   });
 
diff --git a/tests/unit/RuleCard.test.jsx b/tests/unit/RuleCard.test.jsx
index 7a19e4a..4638da6 100644
--- a/tests/unit/RuleCard.test.jsx
+++ b/tests/unit/RuleCard.test.jsx
@@ -13,7 +13,7 @@ describe("RuleCard Component", () => {
 
     expect(screen.getByText("Test Rule")).toBeInTheDocument();
     expect(
-      screen.getByText("This is a test rule description")
+      screen.getByText("This is a test rule description"),
     ).toBeInTheDocument();
   });
 
@@ -79,7 +79,7 @@ describe("RuleCard Component", () => {
     expect(card).toHaveClass(
       "hover:shadow-xl",
       "hover:scale-[1.02]",
-      "transition-all"
+      "transition-all",
     );
   });
 
@@ -89,7 +89,7 @@ describe("RuleCard Component", () => {
     const card = screen.getByRole("button");
     expect(card).toHaveAttribute(
       "aria-label",
-      "Learn more about Test Rule governance pattern"
+      "Learn more about Test Rule governance pattern",
     );
     expect(card).toHaveAttribute("tabIndex", "0");
   });
@@ -99,7 +99,7 @@ describe("RuleCard Component", () => {
 
     expect(screen.getByText("Test Rule")).toBeInTheDocument();
     expect(
-      screen.queryByText("This is a test rule description")
+      screen.queryByText("This is a test rule description"),
     ).not.toBeInTheDocument();
   });
 
diff --git a/tests/unit/SectionHeader.test.jsx b/tests/unit/SectionHeader.test.jsx
index e381d76..0df73ce 100644
--- a/tests/unit/SectionHeader.test.jsx
+++ b/tests/unit/SectionHeader.test.jsx
@@ -29,21 +29,21 @@ describe("SectionHeader Component", () => {
 
   it("applies variant classes correctly", () => {
     const { rerender } = render(
-      <SectionHeader title="Default Header" variant="default" />
+      <SectionHeader title="Default Header" variant="default" />,
     );
     let titleContainer = screen
       .getByRole("heading", { level: 2 })
       .closest("div");
     expect(titleContainer).toHaveClass(
       "lg:w-[369px]",
-      "lg:h-[var(--spacing-scale-120)]"
+      "lg:h-[var(--spacing-scale-120)]",
     );
 
     rerender(<SectionHeader title="Multi-line Header" variant="multi-line" />);
     titleContainer = screen.getByRole("heading", { level: 2 }).closest("div");
     expect(titleContainer).toHaveClass(
       "lg:w-[50%]",
-      "lg:h-[var(--spacing-scale-120)]"
+      "lg:h-[var(--spacing-scale-120)]",
     );
   });
 
@@ -100,7 +100,7 @@ describe("SectionHeader Component", () => {
       "flex",
       "flex-col",
       "lg:flex-row",
-      "lg:justify-between"
+      "lg:justify-between",
     );
   });
 
@@ -139,7 +139,7 @@ describe("SectionHeader Component", () => {
       "text-[28px]",
       "sm:text-[32px]",
       "lg:text-[32px]",
-      "xl:text-[40px]"
+      "xl:text-[40px]",
     );
   });
 
@@ -151,7 +151,7 @@ describe("SectionHeader Component", () => {
       "leading-[36px]",
       "sm:leading-[40px]",
       "lg:leading-[40px]",
-      "xl:leading-[52px]"
+      "xl:leading-[52px]",
     );
   });
 
@@ -179,7 +179,7 @@ describe("SectionHeader Component", () => {
       "text-[18px]",
       "sm:text-[18px]",
       "lg:text-[24px]",
-      "xl:text-[32px]"
+      "xl:text-[32px]",
     );
   });
 
@@ -192,7 +192,7 @@ describe("SectionHeader Component", () => {
       "text-[#484848]",
       "sm:text-[var(--color-content-default-tertiary)]",
       "lg:text-[var(--color-content-default-tertiary)]",
-      "xl:text-[var(--color-content-default-tertiary)]"
+      "xl:text-[var(--color-content-default-tertiary)]",
     );
   });
 });