aiblueprint-cli 1.4.82 → 1.4.83

package/agents-config/skills/create-vitejs-app/SKILL.md

@@ -1,273 +0,0 @@
----
-name: create-vitejs-app
-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/skills/nextjs-add-prisma-db/SKILL.md

@@ -1,137 +0,0 @@
----
-name: nextjs-add-prisma-db
-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/skills/nextjs-setup-better-auth/SKILL.md

@@ -1,174 +0,0 @@
----
-name: nextjs-setup-better-auth
-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>