@iamnishankhan/opencode-kit-grok 1.0.0

package/kit/.opencode/skills/app-builder/templates/nextjs-fullstack/TEMPLATE.md

@@ -0,0 +1,126 @@
+---
+name: nextjs-fullstack
+description: Next.js full-stack template principles. App Router, Prisma, Tailwind v4.
+---
+
+# Next.js Full-Stack Template (2026 Edition)
+
+> Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.
+
+## Tech Stack
+
+| Component | Technology | Version / Notes |
+|-----------|------------|-----------------|
+| Framework | Next.js | v16+ (App Router, Turbopack) |
+| Runtime | Node.js | v24 (Krypton LTS) |
+| Language | TypeScript | v5+ (Strict Mode) |
+| Database | PostgreSQL | Prisma ORM (Serverless friendly) |
+| Styling | Tailwind CSS | v4.0 (Zero-config, CSS-first) |
+| Auth | Auth.js v5 (`next-auth@beta`) / Clerk | Protected routes via `proxy.ts` |
+| UI Logic | React 19 | Server Actions, useActionState |
+| Validation | Zod | Schema validation (API & Forms) |
+
+---
+
+## Directory Structure
+
+```
+project-name/
+├── prisma/
+│   └── schema.prisma       # Database schema
+├── src/
+│   ├── app/
+│   │   ├── (auth)/         # Route groups for Login/Register
+│   │   ├── (dashboard)/    # Protected routes
+│   │   ├── api/            # Route Handlers (only for Webhooks/External integration)
+│   │   ├── layout.tsx      # Root Layout (Metadata, Providers)
+│   │   ├── page.tsx        # Landing Page
+│   │   └── globals.css     # Tailwind v4 config (@theme) lives here
+│   ├── components/
+│   │   ├── ui/             # Reusable UI (Button, Input)
+│   │   └── forms/          # Client forms using useActionState
+│   ├── lib/
+│   │   ├── db.ts           # Prisma singleton client
+│   │   ├── utils.ts        # Helper functions
+│   │   └── dal.ts          # Data Access Layer (Server-only)
+│   ├── actions/            # Server Actions (Mutations)
+│   └── types/              # Global TS Types
+├── public/
+├── next.config.ts          # TypeScript Config
+└── package.json
+```
+
+---
+
+## Key Concepts (Updated)
+
+| Concept | Description |
+|---------|-------------|
+| Server Components | Render on server (default). Direct DB access (Prisma) without APIs. |
+| Server Actions | Handle Form mutations. Replaces traditional API Routes. Use in action={}. |
+| React 19 Hooks | Form state management: useActionState, useFormStatus, useOptimistic. |
+| Data Access Layer | Data security. Separation of DB logic (DTOs) for safe reuse. |
+| Tailwind v4 | Styling engine. No tailwind.config.js. Config directly in CSS. |
+
+---
+
+## Environment Variables
+
+| Variable | Purpose |
+|----------|---------|
+| DATABASE_URL | PostgreSQL connection string (Prisma) |
+| NEXT_PUBLIC_APP_URL | Public application URL |
+| AUTH_SECRET | Auth.js v5 session secret (default auth) |
+| NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY | Auth (if using Clerk instead) |
+| CLERK_SECRET_KEY | Clerk secret (server only, if using Clerk) |
+
+---
+
+## Setup Steps
+
+1. Initialize Project:
+   ```bash
+   npx create-next-app@latest my-app --typescript --tailwind --eslint
+   # Select Yes for App Router
+   # Select No for src directory (optional, this template uses src)
+   ```
+
+2. Install DB & Validation:
+   ```bash
+   npm install prisma @prisma/client zod
+   npm install -D ts-node # For running seed scripts
+   ```
+
+3. Configure Tailwind v4 (If missing):
+   Ensure `src/app/globals.css` uses the new import syntax instead of a config file:
+   ```css
+   @import "tailwindcss";
+
+   @theme {
+     --color-primary: oklch(0.5 0.2 240);
+     --font-sans: "Inter", sans-serif;
+   }
+   ```
+
+4. Initialize Database:
+   ```bash
+   npx prisma init
+   # Update schema.prisma
+   npm run db:push
+   ```
+
+5. Run Developer Server:
+   ```bash
+   npm run dev --turbo
+   # --turbo to enable faster Turbopack
+   ```
+
+---
+
+## Best Practices (2026 Standards)
+
+- **Fetch Data**: Call Prisma directly in Server Components (async/await). Do not use useEffect for initial data fetching.
+- **Mutations**: Use Server Actions combined with React 19's `useActionState` to handle loading and error states instead of manual useState.
+- **Type Safety**: Share Zod schemas between Server Actions (input validation) and Client Forms.
+- **Security**: Always validate input data with Zod before passing it to Prisma.
+- **Styling**: Use native CSS variables in Tailwind v4 for easier dynamic theming.

package/kit/.opencode/skills/app-builder/templates/nextjs-saas/TEMPLATE.md

@@ -0,0 +1,125 @@
+---
+name: nextjs-saas
+description: Next.js SaaS template principles (2026 Standards). React 19, Server Actions, Auth.js v5.
+---
+
+# Next.js SaaS Template (Updated 2026)
+
+> Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.
+
+## Tech Stack
+
+| Component | Technology | Version / Notes |
+|-----------|------------|-----------------|
+| Framework | Next.js | v16+ (App Router, React Compiler) |
+| Runtime | Node.js | v24 (Krypton LTS) |
+| Auth | Auth.js | v5 (`next-auth@beta`, formerly NextAuth). Alternative: Clerk |
+| Payments | Stripe API | Latest |
+| Database | PostgreSQL | Prisma v7+ (Serverless Driver) |
+| Email | Resend | React Email |
+| UI | Tailwind CSS | v4 (Oxide Engine, no config file) |
+
+---
+
+## Directory Structure
+
+```
+project-name/
+├── prisma/
+│   └── schema.prisma    # Database Schema
+├── src/
+│   ├── actions/         # NEW: Server Actions (Replaces API Routes for data mutation)
+│   │   ├── auth-actions.ts
+│   │   ├── billing-actions.ts
+│   │   └── user-actions.ts
+│   ├── app/
+│   │   ├── (auth)/      # Route Group: Login, register
+│   │   ├── (dashboard)/ # Route Group: Protected routes (App Layout)
+│   │   ├── (marketing)/ # Route Group: Landing, pricing (Marketing Layout)
+│   │   └── api/         # Only used for Webhooks or Edge cases
+│   │       └── webhooks/stripe/
+│   ├── components/
+│   │   ├── emails/      # React Email templates
+│   │   ├── forms/       # Client components using useActionState (React 19)
+│   │   └── ui/          # Shadcn UI
+│   ├── lib/
+│   │   ├── auth.ts      # Auth.js v5 config
+│   │   ├── db.ts        # Prisma Singleton
+│   │   ├── data/        # Data Access Layer (server-only reads)
+│   │   └── stripe.ts    # Stripe Singleton
+│   └── styles/
+│       └── globals.css  # Tailwind v4 imports (CSS only)
+└── package.json
+```
+
+---
+
+## SaaS Features
+
+| Feature | Implementation |
+|---------|---------------|
+| Auth | Auth.js v5 + Passkeys + OAuth |
+| Data Mutation | Server Actions (No API routes) |
+| Subscriptions | Stripe Checkout & Customer Portal |
+| Webhooks | Asynchronous Stripe event handling |
+| Email | Transactional via Resend |
+| Validation | Zod (Server-side validation) |
+
+---
+
+## Database Schema
+
+| Model | Fields (Key fields) |
+|-------|---------------------|
+| User | id, email, stripeCustomerId, subscriptionId, plan |
+| Account | OAuth provider data (Google, GitHub...) |
+| Session | User sessions (Database strategy) |
+
+---
+
+## Environment Variables
+
+| Variable | Purpose |
+|----------|---------|
+| DATABASE_URL | Prisma connection string (Postgres) |
+| AUTH_SECRET | Replaces NEXTAUTH_SECRET (Auth.js v5) |
+| STRIPE_SECRET_KEY | Payments (Server-side) |
+| STRIPE_WEBHOOK_SECRET | Webhook verification |
+| RESEND_API_KEY | Email sending |
+| NEXT_PUBLIC_APP_URL | Application Canonical URL |
+
+---
+
+## Setup Steps
+
+1. Initialize project (Node 24):
+   ```bash
+   npx create-next-app@latest {{name}} --typescript --eslint
+   ```
+
+2. Install core libraries:
+   ```bash
+   npm install next-auth@beta stripe resend @prisma/client
+   ```
+
+3. Install Tailwind v4 (Add to globals.css):
+   ```css
+   @import "tailwindcss";
+   ```
+
+4. Configure environment (.env.local)
+
+5. Sync Database:
+   ```bash
+   npx prisma db push
+   ```
+
+6. Run local Webhook:
+   ```bash
+   npm run stripe:listen
+   ```
+
+7. Run project:
+   ```bash
+   npm run dev
+   ```

package/kit/.opencode/skills/app-builder/templates/nextjs-static/TEMPLATE.md

@@ -0,0 +1,174 @@
+---
+name: nextjs-static
+description: Modern template for Next.js 16, React 19 & Tailwind v4. Optimized for Landing pages and Portfolios.
+---
+
+# Next.js Static Site Template (Modern Edition)
+
+> Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.
+
+## Tech Stack
+
+| Component | Technology | Notes |
+|-----------|------------|-------|
+| Framework | Next.js 16+ | App Router, Turbopack, Static Exports |
+| Core | React 19 | Server Components, New Hooks, Compiler |
+| Language | TypeScript | Strict Mode |
+| Styling | Tailwind CSS v4 | CSS-first configuration (No js config), Oxide Engine |
+| Animations | Framer Motion | Layout animations & gestures |
+| Icons | Lucide React | Lightweight SVG icons |
+| SEO | Metadata API | Native Next.js API (Replaces next-seo) |
+
+---
+
+## Directory Structure
+
+Streamlined structure thanks to Tailwind v4 (theme configuration lives inside CSS).
+
+```
+project-name/
+├── src/
+│   ├── app/
+│   │   ├── layout.tsx    # Contains root SEO Metadata
+│   │   ├── page.tsx      # Landing Page
+│   │   ├── globals.css   # Import Tailwind v4 & @theme config
+│   │   ├── not-found.tsx # Custom 404 page
+│   │   ├── sitemap.ts    # Generated sitemap (Metadata convention)
+│   │   ├── robots.ts     # Generated robots.txt (Metadata convention)
+│   │   ├── opengraph-image.tsx # Dynamic OG image
+│   │   └── (routes)/     # Route groups (about, contact...)
+│   ├── components/
+│   │   ├── layout/       # Header, Footer
+│   │   ├── sections/     # Hero, Features, Pricing, CTA
+│   │   └── ui/           # Atomic components (Button, Card)
+│   └── lib/
+│       └── utils.ts      # Helper functions (cn, formatters)
+├── content/              # Markdown/MDX content
+├── public/               # Static assets (images, fonts)
+├── next.config.ts        # Next.js Config (TypeScript)
+└── package.json
+```
+
+---
+
+## Static Export Config
+
+Using `next.config.ts` instead of `.js` for better type safety.
+
+```typescript
+// next.config.ts
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: 'export',        // Required for Static Hosting (S3, GitHub Pages)
+  images: { 
+    unoptimized: true      // Required if not using Node.js server image optimization
+  },
+  trailingSlash: true,     // Recommended for SEO and fixing 404s on some hosts
+  reactStrictMode: true,
+};
+
+export default nextConfig;
+```
+
+---
+
+## SEO Implementation (Metadata API)
+
+Deprecated next-seo. Configure directly in layout.tsx or page.tsx.
+
+```typescript
+// src/app/layout.tsx
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Product Name',
+    default: 'Home - Product Name',
+  },
+  description: 'SEO optimized description for the landing page.',
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: 'https://mysite.com',
+    siteName: 'My Brand',
+  },
+};
+```
+
+---
+
+## Landing Page Sections
+
+| Section | Purpose | Suggested Component |
+|---------|---------|---------------------|
+| Hero | First impression, H1 & Main CTA | `<HeroSection />` |
+| Features | Product benefits (Grid/Bento layout) | `<FeaturesGrid />` |
+| Social Proof | Partner logos, User numbers | `<LogoCloud />` |
+| Testimonials | Customer reviews | `<TestimonialCarousel />` |
+| Pricing | Service plans | `<PricingCards />` |
+| FAQ | Questions & Answers (Good for SEO) | `<Accordion />` |
+| CTA | Final conversion | `<CallToAction />` |
+
+---
+
+## Animation Patterns (Framer Motion)
+
+| Pattern | Usage | Implementation |
+|---------|-------|----------------|
+| Fade Up | Headlines, paragraphs | `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}` |
+| Stagger | Lists of Features/Cards | Use variants with `staggerChildren` |
+| Parallax | Background images or floating elements | `useScroll` & `useTransform` |
+| Micro-interactions | Hover buttons, click effects | `whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}` |
+
+---
+
+## Setup Steps
+
+1. Initialize Project:
+   ```bash
+   npx create-next-app@latest my-site --typescript --tailwind --eslint
+   # Select 'Yes' for App Router
+   # Select 'No' for 'Would you like to customize the default import alias?'
+   ```
+
+2. Install Auxiliary Libraries:
+   ```bash
+   npm install framer-motion lucide-react clsx tailwind-merge
+   # clsx and tailwind-merge help handle dynamic classes better
+   ```
+
+3. Configure Tailwind v4 (in `src/app/globals.css`):
+   ```css
+   @import "tailwindcss";
+
+   @theme {
+     --color-primary: #3b82f6;
+     --font-sans: 'Inter', sans-serif;
+   }
+   ```
+
+4. Development:
+   ```bash
+   npm run dev --turbopack
+   ```
+
+---
+
+## Deployment
+
+| Platform | Method | Important Notes |
+|----------|--------|-----------------|
+| Vercel | Git Push | Auto-detects Next.js. Best for performance. |
+| GitHub Pages | GitHub Actions | Need to set `basePath` in `next.config.ts` if not using a custom domain. |
+| AWS S3 / CloudFront | Upload out folder | Ensure Error Document is configured to `404.html`. |
+| Netlify | Git Push | Set build command to `npm run build`. |
+
+---
+
+## Best Practices (Modern)
+
+- **React Server Components (RSC)**: Default all components to Server Components. Only add `'use client'` when you need state (`useState`) or event listeners (`onClick`).
+- **Image Optimization**: Use the `<Image />` component but remember `unoptimized: true` for static export or use an external image CDN (Cloudinary/Imgix).
+- **Font Optimization**: Use `next/font` (Google Fonts) to automatically host fonts and prevent layout shift.
+- **Responsive**: Mobile-first design using Tailwind prefixes like `sm:`, `md:`, `lg:`.

package/kit/.opencode/skills/app-builder/templates/nuxt-app/TEMPLATE.md

@@ -0,0 +1,127 @@
+---
+name: nuxt-app
+description: Nuxt 4 full-stack template. Vue 3, Pinia, Tailwind v4, Prisma.
+---
+
+# Nuxt 4 Full-Stack Template (2026 Edition)
+
+> Modern full-stack template for Nuxt 4. Versions reflect the latest stable line verified 2026-05; pin to current stable when scaffolding.
+
+## Tech Stack
+
+| Component | Technology | Version / Notes |
+|-----------|------------|-----------------|
+| Framework | Nuxt | v4+ (app/ srcDir structure) |
+| UI Engine | Vue | v3 (stable) |
+| Language | TypeScript | v5+ (Strict Mode) |
+| State | Pinia | v3+ (setup store syntax) |
+| Database | PostgreSQL | Prisma ORM |
+| Styling | Tailwind CSS | v4 (@tailwindcss/vite plugin) |
+| UI Lib | Nuxt UI | v3 (Tailwind v4 native) |
+| Validation | Zod | Schema validation |
+
+---
+
+## Directory Structure (Nuxt 4 Standard)
+
+Nuxt 4 defaults `srcDir` to `app/`, keeping client code separate from `server/` and root config.
+
+```
+project-name/
+├── app/                  # Application source (Nuxt 4 srcDir)
+│   ├── assets/css/
+│   │   └── main.css      # Tailwind v4 import
+│   ├── components/       # Auto-imported components
+│   ├── composables/      # Auto-imported logic
+│   ├── layouts/
+│   ├── middleware/
+│   ├── pages/            # File-based routing
+│   ├── plugins/
+│   ├── stores/           # Pinia stores
+│   ├── app.vue           # Root component
+│   └── app.config.ts     # Reactive runtime config
+├── server/               # Nitro server engine
+│   ├── api/              # API routes (e.g. /api/users)
+│   ├── routes/           # Server routes
+│   └── utils/            # Server-only helpers (Prisma client)
+├── shared/               # Isomorphic code (types, Zod schemas)
+├── prisma/
+│   └── schema.prisma
+├── public/
+├── nuxt.config.ts
+└── package.json
+```
+
+---
+
+## Key Concepts (2026)
+
+| Concept | Description |
+|---------|-------------|
+| **app/ srcDir** | Client code lives under `app/`, cleanly separated from `server/` and config |
+| **shared/** | Isomorphic code (types, Zod validators) usable in both Vue app and Nitro server |
+| **Server Engine** | Nitro-based; API routes in `server/api/`, Prisma client in `server/utils/` |
+| **Tailwind v4** | CSS-first config; theme lives in CSS via `@theme`, no `tailwind.config.js` |
+| **Vapor Mode** | Experimental no-VDOM renderer (not GA in 2026). Opt-in per component via `<script setup vapor>` when shipped |
+
+---
+
+## Environment Variables
+
+| Variable | Purpose |
+|----------|---------|
+| DATABASE_URL | Prisma connection string (PostgreSQL) |
+| NUXT_PUBLIC_APP_URL | Canonical URL |
+| NUXT_SESSION_PASSWORD | Session encryption key |
+
+---
+
+## Setup Steps
+
+1. Initialize project:
+   ```bash
+   npx nuxi@latest init my-app
+   ```
+
+2. Install core deps:
+   ```bash
+   npm install @pinia/nuxt @prisma/client zod
+   npm install -D prisma
+   ```
+
+3. Setup Tailwind v4 (first-party Vite plugin, NOT @nuxtjs/tailwindcss):
+   ```bash
+   npm install tailwindcss @tailwindcss/vite
+   ```
+
+   Add to `nuxt.config.ts`:
+   ```ts
+   import tailwindcss from '@tailwindcss/vite'
+   export default defineNuxtConfig({
+     vite: { plugins: [tailwindcss()] },
+     css: ['~/assets/css/main.css']
+   })
+   ```
+
+4. Configure CSS in `app/assets/css/main.css`:
+   ```css
+   @import "tailwindcss";
+   @theme {
+     --color-primary: oklch(0.6 0.15 150);
+   }
+   ```
+
+5. Run development:
+   ```bash
+   npm run dev
+   ```
+
+---
+
+## Best Practices
+
+- **Data Fetching**: Use `useFetch`/`useAsyncData` for SSR-friendly data; reserve `server: false` for client-only work.
+- **State**: Use Pinia (`defineStore`) for global state, Nuxt's `useState` for simple shared SSR state.
+- **Validation**: Define Zod schemas in `shared/` and reuse on client forms and Nitro API routes.
+- **Type Safety**: API route types are inferred automatically with `$fetch`.
+- **Server-only**: Instantiate the Prisma client in `server/utils/` so it never leaks to the client bundle.

package/kit/.opencode/skills/app-builder/templates/python-fastapi/TEMPLATE.md

@@ -0,0 +1,94 @@
+---
+name: python-fastapi
+description: FastAPI REST API template principles. SQLAlchemy, Pydantic, Alembic.
+---
+
+# FastAPI API Template
+
+> Versions reflect the latest stable line verified 2026-05. Pin to the current stable when scaffolding.
+
+## Tech Stack
+
+| Component | Technology |
+|-----------|------------|
+| Framework | FastAPI |
+| Language | Python 3.12+ (current stable 3.14) |
+| ORM | SQLAlchemy 2.0 (async) |
+| Validation | Pydantic v2 |
+| Migrations | Alembic |
+| Auth | JWT + passlib |
+
+---
+
+## Directory Structure
+
+> Domain/module layout (scales better than file-type for non-trivial apps). Each domain owns its router, schemas, models, service.
+
+```
+project-name/
+├── alembic/             # Migrations
+├── src/
+│   ├── auth/
+│   │   ├── router.py    # APIRouter
+│   │   ├── schemas.py   # Pydantic models
+│   │   ├── models.py    # SQLAlchemy models
+│   │   ├── service.py   # Business logic
+│   │   ├── dependencies.py
+│   │   └── exceptions.py
+│   ├── posts/           # Same shape per domain
+│   ├── config.py        # Global settings (BaseSettings)
+│   ├── database.py      # Async engine / session
+│   ├── models.py        # Shared base models
+│   ├── exceptions.py    # Global exceptions
+│   └── main.py          # FastAPI() + include_router
+├── tests/
+├── requirements/        # base.txt / dev.txt / prod.txt
+├── alembic.ini
+└── .env
+```
+
+---
+
+## Key Concepts
+
+| Concept | Description |
+|---------|-------------|
+| Domain modules | Each feature folder owns router + schemas + models + service |
+| Async | async/await throughout (AsyncSession, async_sessionmaker) |
+| Dependency Injection | FastAPI Depends (validation, auth, DB session) |
+| Pydantic v2 | Validation + serialization |
+| SQLAlchemy 2.0 | Async sessions |
+
+---
+
+## API Structure
+
+| Layer | Responsibility |
+|-------|---------------|
+| Routers | HTTP handling |
+| Dependencies | Auth, validation |
+| Services | Business logic |
+| Models | Database entities |
+| Schemas | Request/response |
+
+---
+
+## Setup Steps
+
+1. `python -m venv venv`
+2. `source venv/bin/activate`
+3. `pip install fastapi uvicorn "sqlalchemy[asyncio]" alembic pydantic pydantic-settings`
+4. Create `.env`
+5. `alembic upgrade head`
+6. `uvicorn src.main:app --reload`
+
+---
+
+## Best Practices
+
+- Use async everywhere (AsyncSession, async dependencies; wrap sync SDKs in `run_in_threadpool`)
+- Per-module `BaseSettings` over one global config
+- Pydantic v2 for validation
+- SQLAlchemy 2.0 async sessions
+- Alembic migrations: static, reversible, descriptive slugs
+- pytest-asyncio for tests; use `dependency_overrides` to mock