ui/ replace emojis with lucide react icons

.claude/settings.local.json

@@ -1,6 +1,23 @@
 {
+  "permissions": {
+    "allow": [
+      "mcp__context7__resolve-library-id",
+      "mcp__context7__get-library-docs",
+      "Bash(npm run lint)",
+      "Bash(npm run typecheck:*)",
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_click",
+      "mcp__playwright__browser_take_screenshot",
+      "mcp__playwright__browser_close",
+      "Bash(git add:*)",
+      "Bash(git log:*)"
+    ],
+    "additionalDirectories": [
+      "C:\\c\\Projects\\nextjs-better-auth-postgresql-starter-kit"
+    ]
+  },
+  "enableAllProjectMcpServers": true,
   "enabledMcpjsonServers": [
     "context7"
-  ],
+  ]
-  "enableAllProjectMcpServers": true
 }

.gitignore

@@ -13,6 +13,7 @@
 
 # testing
 /coverage
+/.playwright-mcp
 
 # next.js
 /.next/

.mcp.json

@@ -1,9 +1,5 @@
 {
   "mcpServers": {
-    "context7": {
-      "type": "http",
-      "url": "https://mcp.context7.com/mcp"
-    },
     "playwright": {
       "command": "npx",
       "args": ["@playwright/mcp@latest"]

CLAUDE.md

@@ -1,2 +1,3 @@
 - Always run the LINT and TYPESCHECK scripts after completing your changes. This is to check for any issues.
 - NEVER start the dev server yourself. If you need something from the terminal, ask the user to provide it to you.
+- Avoid using custom colors unless very specifically instructed to do so. Stick to standard tailwind and shadcn colors, styles and tokens.

src/app/page.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { SetupChecklist } from "@/components/setup-checklist";
 import { useDiagnostics } from "@/hooks/use-diagnostics";
 import { StarterPromptModal } from "@/components/starter-prompt-modal";
+import { Video, Shield, Database, Palette, Bot } from "lucide-react";
 
 export default function Home() {
   const { isAuthReady, isAiReady, loading } = useDiagnostics();
@@ -12,8 +13,16 @@ export default function Home() {
     <main className="flex-1 container mx-auto px-4 py-12">
       <div className="max-w-4xl mx-auto text-center space-y-8">
         <div className="space-y-4">
-          <h2 className="text-4xl font-bold tracking-tight">
+          <div className="flex items-center justify-center gap-3 mb-2">
-            Welcome to Your Agentic Coding Boilerplate
+            <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10">
+              <Bot className="h-7 w-7 text-primary" />
+            </div>
+            <h1 className="text-5xl font-bold tracking-tight bg-gradient-to-r from-primary via-primary/90 to-primary/70 bg-clip-text text-transparent">
+              Starter Kit
+            </h1>
+          </div>
+          <h2 className="text-2xl font-semibold text-muted-foreground">
+            Complete Boilerplate for AI Applications
           </h2>
           <p className="text-xl text-muted-foreground">
             A complete agentic coding boilerplate with authentication, database, AI
@@ -23,7 +32,10 @@ export default function Home() {
 
         {/* YouTube Tutorial Video */}
         <div className="space-y-4">
-          <h3 className="text-2xl font-semibold">📺 Video Tutorial</h3>
+          <h3 className="text-2xl font-semibold flex items-center justify-center gap-2">
+            <Video className="h-6 w-6" />
+            Video Tutorial
+          </h3>
           <p className="text-muted-foreground">
             Watch the complete walkthrough of this agentic coding boilerplate:
           </p>
@@ -42,25 +54,37 @@ export default function Home() {
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12">
           <div className="p-6 border rounded-lg">
-            <h3 className="font-semibold mb-2">🔐 Authentication</h3>
+            <h3 className="font-semibold mb-2 flex items-center gap-2">
+              <Shield className="h-4 w-4" />
+              Authentication
+            </h3>
             <p className="text-sm text-muted-foreground">
               Better Auth with Google OAuth integration
             </p>
           </div>
           <div className="p-6 border rounded-lg">
-            <h3 className="font-semibold mb-2">🗄️ Database</h3>
+            <h3 className="font-semibold mb-2 flex items-center gap-2">
+              <Database className="h-4 w-4" />
+              Database
+            </h3>
             <p className="text-sm text-muted-foreground">
               Drizzle ORM with PostgreSQL setup
             </p>
           </div>
           <div className="p-6 border rounded-lg">
-            <h3 className="font-semibold mb-2">🤖 AI Ready</h3>
+            <h3 className="font-semibold mb-2 flex items-center gap-2">
+              <Bot className="h-4 w-4" />
+              AI Ready
+            </h3>
             <p className="text-sm text-muted-foreground">
               Vercel AI SDK with OpenAI integration
             </p>
           </div>
           <div className="p-6 border rounded-lg">
-            <h3 className="font-semibold mb-2">🎨 UI Components</h3>
+            <h3 className="font-semibold mb-2 flex items-center gap-2">
+              <Palette className="h-4 w-4" />
+              UI Components
+            </h3>
             <p className="text-sm text-muted-foreground">
               shadcn/ui with Tailwind CSS
             </p>

src/components/setup-checklist.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { CheckCircle2, XCircle } from "lucide-react";
 
 type DiagnosticsResponse = {
   timestamp: string;
@@ -30,13 +31,13 @@ type DiagnosticsResponse = {
 
 function StatusIcon({ ok }: { ok: boolean }) {
   return ok ? (
-    <span aria-label="ok" title="ok">
+    <div title="ok">
-      ✅
+      <CheckCircle2 className="h-4 w-4 text-green-600" aria-label="ok" />
-    </span>
+    </div>
   ) : (
-    <span aria-label="not-ok" title="not ok">
+    <div title="not ok">
-      ❌
+      <XCircle className="h-4 w-4 text-red-600" aria-label="not-ok" />
-    </span>
+    </div>
   );
 }
 

src/components/site-header.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { UserProfile } from "@/components/auth/user-profile";
 import { ModeToggle } from "./ui/mode-toggle";
+import { Bot } from "lucide-react";
 
 export function SiteHeader() {
   return (
@@ -9,9 +10,14 @@ export function SiteHeader() {
         <h1 className="text-2xl font-bold">
           <Link
             href="/"
-            className="text-primary hover:text-primary/80 transition-colors"
+            className="flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
           >
-            Agentic Coding Boilerplate
+            <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10">
+              <Bot className="h-5 w-5" />
+            </div>
+            <span className="bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
+              Starter Kit
+            </span>
           </Link>
         </h1>
         <div className="flex items-center gap-4">

src/components/starter-prompt-modal.tsx

@@ -63,11 +63,11 @@ The only things to preserve are:
 **IMPORTANT**: When implementing any AI functionality, always use the \`OPENAI_MODEL\` environment variable for the model name instead of hardcoding it:
 
 \`\`\`typescript
-// ✅ Correct - Use environment variable
+// ✓ Correct - Use environment variable
 const model = process.env.OPENAI_MODEL || "gpt-5-mini";
 model: openai(model)
 
-// ❌ Incorrect - Don't hardcode model names
+// ✗ Incorrect - Don't hardcode model names
 model: openai("gpt-5-mini")
 \`\`\`
 
@@ -89,7 +89,7 @@ The project already includes several shadcn/ui components (button, dialog, avata
 Please help me transform this boilerplate into my actual application. **You MUST completely replace all existing boilerplate code** to match my project requirements. The current implementation is just temporary scaffolding that should be entirely removed and replaced.
 
 ## Final Reminder: COMPLETE REPLACEMENT REQUIRED
-🚨 **IMPORTANT**: Do not preserve any of the existing boilerplate UI, components, or content. The user expects a completely fresh application that implements their requirements from scratch. Any remnants of the original boilerplate (like setup checklists, welcome screens, demo content, or placeholder navigation) indicate incomplete implementation.
+**⚠️ IMPORTANT**: Do not preserve any of the existing boilerplate UI, components, or content. The user expects a completely fresh application that implements their requirements from scratch. Any remnants of the original boilerplate (like setup checklists, welcome screens, demo content, or placeholder navigation) indicate incomplete implementation.
 
 **Success Criteria**: The final application should look and function as if it was built from scratch for the specific use case, with no evidence of the original boilerplate template.