aiblueprint-cli 1.4.59 → 1.4.61

package/agents-config/commands/prompts/create-vitejs-app.md

@@ -0,0 +1,272 @@
+---
+description: Create a Vite.js app with Tailwind CSS v4 and shadcn/ui in the current directory
+argument-hint: [template]
+---
+
+<objective>
+Create a Vite.js project with Tailwind CSS v4 and shadcn/ui in the current directory, handling all edge cases intelligently.
+
+Templates: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts
+
+Default: react-ts (if no template specified)
+
+Note: shadcn/ui only works with React templates (react, react-ts, react-swc, react-swc-ts)
+</objective>
+
+<context>
+Directory contents: !`ls -la 2>/dev/null || echo "EMPTY"`
+Package.json exists: !`test -f package.json && echo "YES" || echo "NO"`
+Vite config exists: !`ls vite.config.* 2>/dev/null || echo "NONE"`
+</context>
+
+<verified_sources>
+- Vite docs: https://vite.dev/guide/
+- Tailwind v4 docs: https://tailwindcss.com/docs/installation/using-vite
+- shadcn/ui Vite: https://ui.shadcn.com/docs/installation/vite
+- shadcn/ui Tailwind v4: https://ui.shadcn.com/docs/tailwind-v4
+</verified_sources>
+
+<process>
+1. **Determine template**: Use `$ARGUMENTS` if provided, otherwise `react-ts`
+
+2. **Analyze current directory**:
+   - Has `package.json` with vite? → Existing Vite project, add Tailwind + shadcn
+   - Has `package.json` without vite? → Add Vite + Tailwind + shadcn
+   - No `package.json`? → Create fresh Vite project
+
+3. **Create Vite project** (if needed):
+   ```bash
+   npm create vite@latest . -- --template <template>
+   ```
+
+   If this fails (rare), use subfolder workaround:
+   ```bash
+   npm create vite@latest .vite-temp -- --template <template>
+   mv .vite-temp/* .vite-temp/.* . 2>/dev/null
+   rmdir .vite-temp
+   ```
+
+4. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+5. **Install Tailwind CSS v4**:
+   ```bash
+   npm install tailwindcss@latest @tailwindcss/vite@latest
+   ```
+
+6. **Install @types/node** (required for path aliases):
+   ```bash
+   npm install -D @types/node
+   ```
+
+7. **Configure TypeScript paths** - Edit `tsconfig.json`:
+   ```json
+   {
+     "compilerOptions": {
+       "baseUrl": ".",
+       "paths": {
+         "@/*": ["./src/*"]
+       }
+     }
+   }
+   ```
+
+   Also edit `tsconfig.app.json` if it exists:
+   ```json
+   {
+     "compilerOptions": {
+       "baseUrl": ".",
+       "paths": {
+         "@/*": ["./src/*"]
+       }
+     }
+   }
+   ```
+
+8. **Configure Vite** - Edit `vite.config.ts`:
+   ```typescript
+   import path from "path"
+   import tailwindcss from "@tailwindcss/vite"
+   import react from "@vitejs/plugin-react"
+   import { defineConfig } from "vite"
+
+   export default defineConfig({
+     plugins: [react(), tailwindcss()],
+     resolve: {
+       alias: {
+         "@": path.resolve(__dirname, "./src"),
+       },
+     },
+   })
+   ```
+
+9. **Setup CSS** - Update `src/index.css`:
+   ```css
+   @import "tailwindcss";
+   ```
+
+10. **Initialize shadcn/ui** (React templates only):
+    ```bash
+    npx shadcn@latest init
+    ```
+
+    When prompted:
+    - Style: Default or New York
+    - Base color: Neutral (recommended)
+    - CSS variables: Yes
+
+    Or non-interactive:
+    ```bash
+    npx shadcn@latest init -y -b neutral
+    ```
+
+11. **Add shadcn components**:
+    ```bash
+    npx shadcn@latest add button badge
+    ```
+
+12. **Create landing page** - Replace `src/App.tsx` with:
+    ```tsx
+    import { Button } from "@/components/ui/button"
+    import { Badge } from "@/components/ui/badge"
+
+    function App() {
+      return (
+        <div className="min-h-svh bg-gradient-to-b from-background to-muted">
+          {/* Hero Section */}
+          <div className="container mx-auto px-4 py-16 sm:py-24">
+            <div className="flex flex-col items-center text-center space-y-8">
+              {/* Badge */}
+              <Badge variant="secondary" className="px-4 py-1.5 text-sm">
+                Powered by Vite + Tailwind v4 + shadcn/ui
+              </Badge>
+
+              {/* Main Heading */}
+              <h1 className="text-4xl sm:text-6xl lg:text-7xl font-bold tracking-tight">
+                <span className="bg-gradient-to-r from-foreground via-foreground/80 to-foreground bg-clip-text">
+                  ViteJS
+                </span>
+                <span className="text-primary"> Ready</span>
+              </h1>
+
+              {/* Subtitle */}
+              <p className="max-w-2xl text-lg sm:text-xl text-muted-foreground">
+                Your project is set up with the modern stack. Start building something amazing.
+              </p>
+
+              {/* CTA Buttons */}
+              <div className="flex flex-col sm:flex-row gap-4 pt-4">
+                <Button size="lg" className="min-w-40">
+                  Get Started
+                </Button>
+                <Button size="lg" variant="outline" className="min-w-40">
+                  Documentation
+                </Button>
+              </div>
+
+              {/* Tech Stack */}
+              <div className="pt-12 flex flex-wrap justify-center gap-8 text-muted-foreground">
+                <div className="flex items-center gap-2">
+                  <div className="size-2 rounded-full bg-yellow-500" />
+                  <span className="text-sm font-medium">Vite</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="size-2 rounded-full bg-cyan-500" />
+                  <span className="text-sm font-medium">Tailwind v4</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="size-2 rounded-full bg-blue-500" />
+                  <span className="text-sm font-medium">React</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="size-2 rounded-full bg-neutral-500" />
+                  <span className="text-sm font-medium">shadcn/ui</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature Cards */}
+          <div className="container mx-auto px-4 pb-16">
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[
+                { title: "Lightning Fast", desc: "Instant HMR and optimized builds with Vite" },
+                { title: "Type Safe", desc: "Full TypeScript support out of the box" },
+                { title: "Beautiful UI", desc: "Pre-built components with shadcn/ui" },
+              ].map((feature) => (
+                <div
+                  key={feature.title}
+                  className="group rounded-xl border bg-card p-6 transition-colors hover:bg-accent"
+                >
+                  <h3 className="font-semibold text-lg mb-2">{feature.title}</h3>
+                  <p className="text-sm text-muted-foreground">{feature.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Footer */}
+          <footer className="border-t py-8">
+            <p className="text-center text-sm text-muted-foreground">
+              Edit <code className="font-mono bg-muted px-1.5 py-0.5 rounded">src/App.tsx</code> to get started
+            </p>
+          </footer>
+        </div>
+      )
+    }
+
+    export default App
+    ```
+
+13. **Clean up default files** (optional):
+    - Delete `src/App.css` (styles now in Tailwind)
+    - Delete `src/assets/react.svg` (not needed)
+    - Update `index.html` title to your project name
+
+14. **Verify setup**:
+    ```bash
+    npm run dev
+    ```
+
+    You should see a modern landing page with:
+    - Gradient background
+    - "ViteJS Ready" heading
+    - Tech stack indicators
+    - Feature cards
+    - Responsive design
+</process>
+
+<edge_cases>
+- **Non-React template**: Skip shadcn/ui steps (only add Tailwind). shadcn/ui requires React.
+- **Non-empty directory**: Vite supports this natively (PR #15272, Dec 2023)
+- **Existing package.json**: Skip Vite creation, add dependencies to existing project
+- **Existing vite.config**: MERGE plugins and alias config, don't replace
+- **JavaScript (not TypeScript)**: Use `jsconfig.json` instead of `tsconfig.json` for paths
+- **PowerShell (Windows)**: Use `---` instead of `--`: `npm create vite@latest . --- --template react-ts`
+- **shadcn init fails**: Ensure tsconfig paths and vite alias are configured BEFORE running init
+- **Tailwind v4 + shadcn**: Fully supported as of Feb 2025. Uses OKLCH colors, @theme inline directive
+</edge_cases>
+
+<shadcn_notes>
+- shadcn/ui now supports Tailwind v4 and React 19 (Feb 2025 update)
+- Components use `data-slot` attributes for styling
+- HSL colors converted to OKLCH
+- `toast` deprecated, use `sonner` instead
+- Buttons use default cursor (not pointer)
+- All components work with modern browsers only
+</shadcn_notes>
+
+<success_criteria>
+- Vite project created in current directory
+- `tailwindcss` and `@tailwindcss/vite` in package.json
+- `tailwindcss()` plugin in vite.config
+- Path alias `@` configured in tsconfig and vite.config
+- `src/index.css` has `@import "tailwindcss"`
+- `components.json` exists (shadcn config)
+- `src/components/ui/button.tsx` and `badge.tsx` exist
+- `src/App.tsx` contains the "ViteJS Ready" landing page
+- `npm run dev` runs without errors
+- Landing page displays with gradient, heading, buttons, and feature cards
+</success_criteria>

package/agents-config/commands/prompts/nextjs-add-prisma-db.md

@@ -0,0 +1,136 @@
+---
+description: Setup Prisma ORM with PostgreSQL in a Next.js project with schema, migrations, and seed data
+---
+
+<objective>
+Setup Prisma in the current Next.js project with a production-ready database configuration.
+
+This creates a complete database layer including schema, migrations, client helper, seed script, and API routes for verification. Designed for projects using Neon PostgreSQL.
+</objective>
+
+<context>
+Project structure: !`ls -la`
+Package manager: !`cat package.json | grep -A2 '"packageManager"'`
+Existing prisma config: !`ls prisma/ 2>/dev/null || echo "No prisma folder yet"`
+TypeScript config: !`cat tsconfig.json | head -30`
+</context>
+
+<process>
+## Phase 1: Information Gathering
+
+1. **Ask for table structure** - Prompt user to describe ONE simple table to verify Prisma works:
+   - Table name and purpose
+   - Fields with types (String, Int, DateTime, Boolean)
+   - Example: "Post table with id, title, content, published, createdAt"
+
+2. **Inspect existing structure** - Before coding:
+   - Check if `src/` folder exists
+   - Read `tsconfig.json` for path aliases
+   - Identify where `lib/` folder should be created
+
+## Phase 2: Installation
+
+3. **Install dependencies**:
+   ```bash
+   pnpm add prisma @prisma/client
+   pnpm add -D tsx
+   npx prisma init
+   ```
+
+4. **Configure database provider** - Update `prisma/schema.prisma`:
+   - Set provider to "postgresql"
+   - Configure generator output path based on project structure
+
+## Phase 3: Schema & Configuration
+
+5. **Create schema** - Add the user-defined table with:
+   - `id` as String with `@id @default(cuid())`
+   - User-specified fields
+   - `createdAt DateTime @default(now())`
+   - `updatedAt DateTime @updatedAt`
+
+6. **Configure exclusions**:
+   - Add generated folder to `.eslintignore`
+   - Add generated folder to `tsconfig.json` exclude array
+
+7. **Create Prisma client helper** - Create singleton pattern in `lib/prisma.ts`:
+   ```typescript
+   import { PrismaClient } from "@/generated/client";
+
+   const globalForPrisma = globalThis as unknown as {
+     prisma: PrismaClient | undefined;
+   };
+
+   export const prisma = globalForPrisma.prisma ?? new PrismaClient();
+
+   if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
+   ```
+
+8. **Create prisma.config.ts** - Root configuration:
+   ```typescript
+   import path from "node:path";
+   import { defineConfig } from "prisma/config";
+
+   export default defineConfig({
+     schema: path.join("prisma", "schema.prisma"),
+     migrations: {
+       seed: `tsx prisma/seed.ts`,
+     },
+   });
+   ```
+
+## Phase 4: Data & Verification
+
+9. **Create seed script** - `prisma/seed.ts` with 5-10 realistic records
+
+10. **Run migrations**:
+    ```bash
+    npx prisma generate
+    npx prisma migrate dev --name init
+    npx prisma db seed
+    ```
+
+11. **Create example API route** - `app/api/example/route.ts`:
+    - GET endpoint fetching all records
+    - POST endpoint creating new record
+    - Proper error handling
+
+12. **Add package.json scripts**:
+    ```json
+    {
+      "db:generate": "prisma generate",
+      "db:push": "prisma db push",
+      "db:migrate": "prisma migrate dev",
+      "db:studio": "prisma studio",
+      "db:seed": "prisma db seed"
+    }
+    ```
+
+## Phase 5: Documentation
+
+13. **Update CLAUDE.md** with:
+    - Database provider and connection info
+    - Schema overview
+    - Available db scripts
+</process>
+
+<constraints>
+**FORBIDDEN - Do not create**:
+- User, Account, Session, VerificationToken tables (auth tables)
+- Any user-related fields or foreign keys
+- More than ONE table (keep it minimal for verification)
+
+**REQUIRED**:
+- Adapt paths to existing project structure
+- Use cuid() for IDs, not uuid or auto-increment
+- Configure generator output path correctly
+- Create seed data with realistic values
+</constraints>
+
+<success_criteria>
+- `pnpm prisma generate` completes without errors
+- `pnpm prisma migrate dev` creates migration successfully
+- `pnpm prisma db seed` populates database
+- API route returns data when called
+- No TypeScript or ESLint errors in generated files
+</success_criteria>

package/agents-config/commands/prompts/nextjs-setup-better-auth.md

@@ -0,0 +1,173 @@
+---
+description: Setup Better Auth with Email OTP authentication and shadcn/ui components in a Next.js project
+---
+
+<objective>
+Setup Better Auth in the current Next.js project with Email OTP authentication flow.
+
+This creates a production-ready authentication system with Resend email delivery, a beautiful sign-in page using shadcn/ui, and an account management page. Uses Prisma adapter for database integration.
+</objective>
+
+<context>
+Project structure: !`ls -la`
+Prisma schema: !`cat prisma/schema.prisma 2>/dev/null | head -40 || echo "No Prisma schema"`
+Existing auth: !`ls src/lib/auth* 2>/dev/null || ls lib/auth* 2>/dev/null || echo "No auth files"`
+Path aliases: !`cat tsconfig.json | grep -A5 '"paths"'`
+</context>
+
+<process>
+## Phase 1: Prerequisites
+
+1. **Ask for Resend API Key** - Prompt user:
+   > "I need your Resend API key to send OTP emails. Get it from https://resend.com/api-keys"
+
+2. **Verify Prisma is configured**:
+   - Check `prisma/schema.prisma` exists
+   - Identify Prisma client import path (custom output or default)
+   - Confirm `lib/prisma.ts` singleton exists
+
+## Phase 2: Installation
+
+3. **Install dependencies**:
+   ```bash
+   pnpm add better-auth resend
+   ```
+
+4. **Install shadcn/ui components**:
+   ```bash
+   pnpm dlx shadcn@latest add input label card button tabs input-otp
+   ```
+
+5. **Get reference components** (study then delete):
+   ```bash
+   pnpm dlx shadcn@latest add https://coss.com/origin/r/comp-326.json
+   pnpm dlx shadcn@latest add https://coss.com/origin/r/comp-324.json
+   ```
+
+## Phase 3: Configuration
+
+6. **Configure environment variables** - Add to `.env`:
+   ```
+   BETTER_AUTH_SECRET="[generate with: openssl rand -base64 32]"
+   BETTER_AUTH_URL="http://localhost:3000"
+   RESEND_API_KEY="[user-provided]"
+   RESEND_FROM_EMAIL="onboarding@resend.dev"
+   ```
+
+7. **Create Better Auth instance** - `src/lib/auth.ts`:
+   ```typescript
+   import { betterAuth } from "better-auth";
+   import { prismaAdapter } from "better-auth/adapters/prisma";
+   import { emailOTP } from "better-auth/plugins";
+   import { prisma } from "./prisma";
+   import { Resend } from "resend";
+
+   const resend = new Resend(process.env.RESEND_API_KEY);
+
+   export const auth = betterAuth({
+     database: prismaAdapter(prisma, { provider: "postgresql" }),
+     emailAndPassword: { enabled: false },
+     plugins: [
+       emailOTP({
+         async sendVerificationOTP({ email, otp, type }) {
+           await resend.emails.send({
+             from: process.env.RESEND_FROM_EMAIL!,
+             to: email,
+             subject: type === "sign-in" ? "Sign in to your account" : "Verify your email",
+             html: `<p>Your verification code is: <strong>${otp}</strong></p><p>This code will expire in 5 minutes.</p>`,
+           });
+         },
+         otpLength: 6,
+         expiresIn: 300,
+       }),
+     ],
+     secret: process.env.BETTER_AUTH_SECRET!,
+     baseURL: process.env.BETTER_AUTH_URL!,
+   });
+   ```
+
+8. **Generate Prisma schema** using Better Auth CLI:
+   ```bash
+   npx @better-auth/cli generate --config src/lib/auth.ts
+   npx prisma migrate dev --name add_better_auth
+   npx prisma generate
+   ```
+
+9. **Create API route handler** - `app/api/auth/[...all]/route.ts`:
+   ```typescript
+   import { auth } from "@/lib/auth";
+   import { toNextJsHandler } from "better-auth/next-js";
+
+   export const { GET, POST } = toNextJsHandler(auth.handler);
+   ```
+
+10. **Create auth client** - `src/lib/auth-client.ts`:
+    ```typescript
+    import { createAuthClient } from "better-auth/react";
+    import { emailOTPClient } from "better-auth/client/plugins";
+
+    export const authClient = createAuthClient({
+      baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL || "http://localhost:3000",
+      plugins: [emailOTPClient()],
+    });
+
+    export const { signIn, signOut, useSession } = authClient;
+    ```
+
+## Phase 4: UI Implementation
+
+11. **Study reference components** - Read comp-326 and comp-324 patterns:
+    - Note form layouts, validation patterns, UX flows
+    - Understand OTP input behavior
+
+12. **Create sign-in page** - `app/sign-in/page.tsx`:
+    - Two-step flow: email input → OTP verification
+    - Use `InputOTP` component with 6 slots
+    - Auto-submit on complete with `onComplete` handler
+    - Loading states and error handling with `text-destructive`
+    - Redirect to `/account` on success
+
+13. **Create account page** - `app/account/page.tsx`:
+    - Protected route (redirect if no session)
+    - Tabs for Profile and Security
+    - Profile form with name update
+    - Sign out button
+    - Session info display
+
+14. **Delete reference components** - Remove comp-326 and comp-324 files
+
+## Phase 5: Integration & Testing
+
+15. **Update layout** - Add TanStack Query provider if needed for session management
+
+16. **Update home page** - Add auth status display with sign-in/account links
+
+17. **Test complete flow**:
+    - Navigate to `/sign-in`
+    - Enter email, receive OTP
+    - Verify OTP, redirect to `/account`
+    - Update name, sign out
+</process>
+
+<constraints>
+**UI RULES**:
+- ONLY use shadcn/ui components and theme colors
+- NEVER use custom colors - only background, foreground, primary, secondary, muted, accent, destructive
+- All styling via Tailwind with theme-aware classes
+- NO hardcoded colors like #000, blue-500, etc.
+
+**FLEXIBILITY**:
+- Check Prisma client location before importing
+- Adapt all paths to project structure
+- Match existing path alias conventions
+</constraints>
+
+<success_criteria>
+- Sign-in page renders with email input
+- OTP email is sent via Resend
+- OTP verification signs user in
+- Account page shows session data
+- Name update persists to database
+- Sign out clears session and redirects
+- No TypeScript or linting errors
+</success_criteria>