ros/Design-Buddy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui/ replace emojis with lucide react icons

Browse Source
This commit is contained in:
Leon van Zyl
2025-08-27 08:13:09 +02:00
parent eb71ad75b6
commit a0de269975
8 changed files with 70 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
.claude/settings.local.json
View File

@@ -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
]
}

1
.gitignore vendored
View File

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

4
.mcp.json
View File

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

1
CLAUDE.md
View File

@@ -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.

38
src/app/page.tsx
View File

@@ -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">
Welcome to Your Agentic Coding Boilerplate
<div className="flex items-center justify-center gap-3 mb-2">
<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>

13
src/components/setup-checklist.tsx
View File

@@ -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">
✅
</span>
<div title="ok">
<CheckCircle2 className="h-4 w-4 text-green-600" aria-label="ok" />
</div>
) : (
<span aria-label="not-ok" title="not ok">
❌
</span>
<div title="not ok">
<XCircle className="h-4 w-4 text-red-600" aria-label="not-ok" />
</div>
);
}

10
src/components/site-header.tsx
View File

@@ -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">

6
src/components/starter-prompt-modal.tsx
View File

@@ -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.