From 13b2e874f6b74895e6d317687819e60e43bd6e64 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 14 May 2026 14:46:48 +0530
Subject: [PATCH] refactor: replace button elements with Button component

---
 .../browser-apis/iframes.md                   |  2 +-
 .../playwright-testing/core/locators.md       |  2 +-
 .../vercel-react-best-practices/AGENTS.md     | 25 +++++++++++++------
 .../rules/bundle-preload.md                   |  6 +++--
 .../rules/client-swr-dedup.md                 |  3 ++-
 .../rules/rerender-defer-reads.md             |  8 ++++--
 .../rules/rerender-move-effect-to-event.md    |  8 ++++--
 7 files changed, 38 insertions(+), 16 deletions(-)
diff --git a/.cursor/skills/playwright-testing/browser-apis/iframes.md b/.cursor/skills/playwright-testing/browser-apis/iframes.md
index 145e050ff..155cc1c1b 100644
--- a/.cursor/skills/playwright-testing/browser-apis/iframes.md
+++ b/.cursor/skills/playwright-testing/browser-apis/iframes.md
@@ -372,7 +372,7 @@ test("mock iframe response", async ({ page }) => {
         <html>
           <body>
             <h1>Mocked Widget</h1>
-            <button>Mocked Button</button>
+            <p>Mocked widget content</p>
           </body>
         </html>
       `,
diff --git a/.cursor/skills/playwright-testing/core/locators.md b/.cursor/skills/playwright-testing/core/locators.md
index f806635d6..afe3af361 100644
--- a/.cursor/skills/playwright-testing/core/locators.md
+++ b/.cursor/skills/playwright-testing/core/locators.md
@@ -100,7 +100,7 @@ use: {
 Usage:
 
 ```typescript
-// HTML: <button data-testid="submit-btn">Submit</button>
+// React: <Button data-testid="submit-btn">Submit</Button>
 page.getByTestId("submit-btn");
 ```
 
diff --git a/.cursor/skills/vercel-react-best-practices/AGENTS.md b/.cursor/skills/vercel-react-best-practices/AGENTS.md
index 94c3c8441..2b839ab51 100644
--- a/.cursor/skills/vercel-react-best-practices/AGENTS.md
+++ b/.cursor/skills/vercel-react-best-practices/AGENTS.md
@@ -549,6 +549,8 @@ Preload heavy bundles before they're needed to reduce perceived latency.
 **Example: preload on hover/focus**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function EditorButton({ onClick }: { onClick: () => void }) {
   const preload = () => {
     if (typeof window !== 'undefined') {
@@ -557,13 +559,13 @@ function EditorButton({ onClick }: { onClick: () => void }) {
   }
 
   return (
-    <button
+    <Button
       onMouseEnter={preload}
       onFocus={preload}
       onClick={onClick}
     >
       Open Editor
-    </button>
+    </Button>
   )
 }
 ```
@@ -1239,11 +1241,12 @@ function StaticContent() {
 **For mutations:**
 
 ```tsx
+import { Button } from '@/components/ui/button'
 import { useSWRMutation } from 'swr/mutation'
 
 function UpdateButton() {
   const { trigger } = useSWRMutation('/api/user', updateUser)
-  return <button onClick={() => trigger()}>Update</button>
+  return <Button onClick={() => trigger()}>Update</Button>
 }
 ```
 
@@ -1369,6 +1372,8 @@ Don't subscribe to dynamic state (searchParams, localStorage) if you only read i
 **Incorrect: subscribes to all searchParams changes**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function ShareButton({ chatId }: { chatId: string }) {
   const searchParams = useSearchParams()
 
@@ -1377,13 +1382,15 @@ function ShareButton({ chatId }: { chatId: string }) {
     shareChat(chatId, { ref })
   }
 
-  return <button onClick={handleShare}>Share</button>
+  return <Button onClick={handleShare}>Share</Button>
 }
 ```
 
 **Correct: reads on demand, no subscription**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function ShareButton({ chatId }: { chatId: string }) {
   const handleShare = () => {
     const params = new URLSearchParams(window.location.search)
@@ -1391,7 +1398,7 @@ function ShareButton({ chatId }: { chatId: string }) {
     shareChat(chatId, { ref })
   }
 
-  return <button onClick={handleShare}>Share</button>
+  return <Button onClick={handleShare}>Share</Button>
 }
 ```
 
@@ -1549,6 +1556,8 @@ If a side effect is triggered by a specific user action (submit, click, drag), r
 **Incorrect: event modeled as state + effect**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function Form() {
   const [submitted, setSubmitted] = useState(false)
   const theme = useContext(ThemeContext)
@@ -1560,13 +1569,15 @@ function Form() {
     }
   }, [submitted, theme])
 
-  return <button onClick={() => setSubmitted(true)}>Submit</button>
+  return <Button onClick={() => setSubmitted(true)}>Submit</Button>
 }
 ```
 
 **Correct: do it in the handler**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function Form() {
   const theme = useContext(ThemeContext)
 
@@ -1575,7 +1586,7 @@ function Form() {
     showToast('Registered', theme)
   }
 
-  return <button onClick={handleSubmit}>Submit</button>
+  return <Button onClick={handleSubmit}>Submit</Button>
 }
 ```
 
diff --git a/.cursor/skills/vercel-react-best-practices/rules/bundle-preload.md b/.cursor/skills/vercel-react-best-practices/rules/bundle-preload.md
index 700050406..0662ef81b 100644
--- a/.cursor/skills/vercel-react-best-practices/rules/bundle-preload.md
+++ b/.cursor/skills/vercel-react-best-practices/rules/bundle-preload.md
@@ -12,6 +12,8 @@ Preload heavy bundles before they're needed to reduce perceived latency.
 **Example (preload on hover/focus):**
 
 ```tsx
+import { Button } from "@/components/ui/button"
+
 function EditorButton({ onClick }: { onClick: () => void }) {
   const preload = () => {
     if (typeof window !== 'undefined') {
@@ -20,13 +22,13 @@ function EditorButton({ onClick }: { onClick: () => void }) {
   }
 
   return (
-    <button
+    <Button
       onMouseEnter={preload}
       onFocus={preload}
       onClick={onClick}
     >
       Open Editor
-    </button>
+    </Button>
   )
 }
 ```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/client-swr-dedup.md b/.cursor/skills/vercel-react-best-practices/rules/client-swr-dedup.md
index 2a430f27f..22d419bca 100644
--- a/.cursor/skills/vercel-react-best-practices/rules/client-swr-dedup.md
+++ b/.cursor/skills/vercel-react-best-practices/rules/client-swr-dedup.md
@@ -45,11 +45,12 @@ function StaticContent() {
 **For mutations:**
 
 ```tsx
+import { Button } from '@/components/ui/button'
 import { useSWRMutation } from 'swr/mutation'
 
 function UpdateButton() {
   const { trigger } = useSWRMutation('/api/user', updateUser)
-  return <button onClick={() => trigger()}>Update</button>
+  return <Button onClick={() => trigger()}>Update</Button>
 }
 ```
 
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-defer-reads.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
index e867c95f0..94410bc5b 100644
--- a/.cursor/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-defer-reads.md
@@ -12,6 +12,8 @@ Don't subscribe to dynamic state (searchParams, localStorage) if you only read i
 **Incorrect (subscribes to all searchParams changes):**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function ShareButton({ chatId }: { chatId: string }) {
   const searchParams = useSearchParams()
 
@@ -20,13 +22,15 @@ function ShareButton({ chatId }: { chatId: string }) {
     shareChat(chatId, { ref })
   }
 
-  return <button onClick={handleShare}>Share</button>
+  return <Button onClick={handleShare}>Share</Button>
 }
 ```
 
 **Correct (reads on demand, no subscription):**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function ShareButton({ chatId }: { chatId: string }) {
   const handleShare = () => {
     const params = new URLSearchParams(window.location.search)
@@ -34,6 +38,6 @@ function ShareButton({ chatId }: { chatId: string }) {
     shareChat(chatId, { ref })
   }
 
-  return <button onClick={handleShare}>Share</button>
+  return <Button onClick={handleShare}>Share</Button>
 }
 ```
diff --git a/.cursor/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md b/.cursor/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md
index dd58a1af0..299815d69 100644
--- a/.cursor/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md
+++ b/.cursor/skills/vercel-react-best-practices/rules/rerender-move-effect-to-event.md
@@ -12,6 +12,8 @@ If a side effect is triggered by a specific user action (submit, click, drag), r
 **Incorrect (event modeled as state + effect):**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function Form() {
   const [submitted, setSubmitted] = useState(false)
   const theme = useContext(ThemeContext)
@@ -23,13 +25,15 @@ function Form() {
     }
   }, [submitted, theme])
 
-  return <button onClick={() => setSubmitted(true)}>Submit</button>
+  return <Button onClick={() => setSubmitted(true)}>Submit</Button>
 }
 ```
 
 **Correct (do it in the handler):**
 
 ```tsx
+import { Button } from '@/components/ui/button'
+
 function Form() {
   const theme = useContext(ThemeContext)
 
@@ -38,7 +42,7 @@ function Form() {
     showToast('Registered', theme)
   }
 
-  return <button onClick={handleSubmit}>Submit</button>
+  return <Button onClick={handleSubmit}>Submit</Button>
 }
 ```
 
