@1aboveio/skills 0.10.0

package/skills/fullstack/prisma-setup/nextjs.md

@@ -0,0 +1,258 @@
+# Next.js + Prisma v7 Bootstrap
+
+Complete setup guide for Prisma v7 in a standalone Next.js App Router project.
+
+---
+
+## Setup Workflow
+
+### 1. Install Dependencies
+
+```bash
+npm install prisma tsx --save-dev
+npm install @prisma/adapter-pg @prisma/client dotenv
+```
+
+### 2. Initialize Prisma
+
+**Interactive command - run manually:**
+
+```bash
+npx prisma init --db --output ../app/generated/prisma
+```
+
+This creates:
+- `prisma/schema.prisma`
+- `prisma.config.ts`
+- `.env` with DATABASE_URL
+
+Ensure `.env` uses `postgres://` URL scheme.
+
+### 3. Update Schema
+
+```prisma
+generator client {
+  provider = "prisma-client"
+  output   = "../app/generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+model User {
+  id        Int      @id @default(autoincrement())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+```
+
+### 4. Create Prisma Client
+
+```typescript
+// lib/prisma.ts
+import { PrismaClient } from "../app/generated/prisma/client"
+import { PrismaPg } from "@prisma/adapter-pg"
+
+const adapter = new PrismaPg({
+  connectionString: process.env.DATABASE_URL!,
+})
+
+const globalForPrisma = global as unknown as { prisma: PrismaClient }
+
+const prisma = globalForPrisma.prisma || new PrismaClient({ adapter })
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma
+
+export default prisma
+```
+
+### 5. Add NPM Scripts
+
+```json
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "db:test": "tsx scripts/test-database.ts",
+    "db:studio": "prisma studio"
+  }
+}
+```
+
+### 6. Create Test Script
+
+```typescript
+// scripts/test-database.ts
+import "dotenv/config"
+import prisma from "../lib/prisma"
+
+async function testDatabase() {
+  console.log("Testing Prisma connection...\n")
+
+  try {
+    console.log("Connected!")
+
+    const user = await prisma.user.create({
+      data: { email: "test@example.com", name: "Test" },
+    })
+    console.log("Created:", user)
+
+    const users = await prisma.user.findMany()
+    console.log(`Found ${users.length} users`)
+
+    console.log("\nAll tests passed!")
+  } catch (error) {
+    console.error("Error:", error)
+    process.exit(1)
+  }
+}
+
+testDatabase()
+```
+
+### 7. Push Schema & Test
+
+```bash
+npx prisma db push
+npx prisma generate
+npm run db:test
+```
+
+---
+
+## API Route Example
+
+```typescript
+// app/api/users/route.ts
+import { NextRequest, NextResponse } from "next/server"
+import prisma from "../../../lib/prisma"
+
+export async function GET(request: NextRequest) {
+  try {
+    const users = await prisma.user.findMany()
+    return NextResponse.json(users)
+  } catch (error) {
+    console.error("Error fetching users:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch users" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const user = await prisma.user.create({
+      data: { email: body.email, name: body.name },
+    })
+    return NextResponse.json(user, { status: 201 })
+  } catch (error) {
+    console.error("Error creating user:", error)
+    return NextResponse.json(
+      { error: "Failed to create user" },
+      { status: 500 }
+    )
+  }
+}
+```
+
+---
+
+## Server Component Example
+
+```typescript
+// app/page.tsx
+import prisma from "../lib/prisma"
+
+export default async function Home() {
+  let users = []
+  let error = null
+
+  try {
+    users = await prisma.user.findMany({
+      orderBy: { createdAt: "desc" },
+    })
+  } catch (e) {
+    console.error("Error:", e)
+    error = "Failed to load users"
+  }
+
+  return (
+    <main className="p-8">
+      <h1>Users</h1>
+      {error ? (
+        <p className="text-red-500">{error}</p>
+      ) : users.length === 0 ? (
+        <p>No users yet</p>
+      ) : (
+        <ul>
+          {users.map((user) => (
+            <li key={user.id}>{user.name} ({user.email})</li>
+          ))}
+        </ul>
+      )}
+    </main>
+  )
+}
+```
+
+---
+
+## File Structure
+
+```
+project/
+├── app/
+│   ├── generated/
+│   │   └── prisma/        # Generated client
+│   ├── api/
+│   │   └── users/
+│   │       └── route.ts
+│   └── page.tsx
+├── lib/
+│   └── prisma.ts          # Singleton client
+├── prisma/
+│   ├── schema.prisma
+│   └── migrations/
+├── scripts/
+│   └── test-database.ts
+├── prisma.config.ts
+├── .env
+└── package.json
+```
+
+---
+
+## Troubleshooting
+
+### "Cannot find module"
+
+Check import path includes `/client`:
+```typescript
+// Correct
+import { PrismaClient } from "../app/generated/prisma/client"
+```
+
+### "DATABASE_URL not found"
+
+Ensure `import "dotenv/config"` is at top of:
+- `prisma.config.ts`
+- `scripts/test-database.ts`
+
+### "Connection refused"
+
+Verify DATABASE_URL uses TCP URL (`postgres://...`), not HTTP URL.
+
+### "prisma-client-js deprecated"
+
+Update generator:
+```prisma
+generator client {
+  provider = "prisma-client"  # Not "prisma-client-js"
+  output   = "../app/generated/prisma"
+}
+```

package/skills/fullstack/prisma-setup/turborepo.md

@@ -0,0 +1,301 @@
+# Turborepo + Prisma v7 Setup
+
+Monorepo setup with shared Prisma package across multiple apps.
+
+---
+
+## Monorepo Layout
+
+```
+repo/
+├── apps/
+│   ├── web/                # Next.js app
+│   └── admin/              # Another Next app
+├── packages/
+│   ├── db/                 # Prisma package
+│   └── ui/                 # Shared UI
+├── turbo.json
+├── package.json
+└── .env
+```
+
+**Key rule:** Prisma lives in `packages/db`, not inside an app.
+
+---
+
+## Package Structure: packages/db
+
+```
+packages/db/
+├── prisma/
+│   ├── schema.prisma
+│   └── migrations/
+├── src/
+│   ├── generated/
+│   │   └── prisma/         # Generated client
+│   ├── client.ts           # Singleton
+│   └── index.ts            # Exports
+├── scripts/
+│   └── test-database.ts
+├── prisma.config.ts
+└── package.json
+```
+
+---
+
+## Schema Configuration
+
+```prisma
+// packages/db/prisma/schema.prisma
+generator client {
+  provider = "prisma-client"
+  output   = "../src/generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+model User {
+  id        Int      @id @default(autoincrement())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+```
+
+---
+
+## Prisma Config
+
+```typescript
+// packages/db/prisma.config.ts
+import "dotenv/config"
+import { defineConfig, env } from "prisma/config"
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: env("DATABASE_URL"),
+  },
+})
+```
+
+---
+
+## Client Singleton
+
+```typescript
+// packages/db/src/client.ts
+import { PrismaClient } from "./generated/prisma/client"
+import { PrismaPg } from "@prisma/adapter-pg"
+
+const adapter = new PrismaPg({
+  connectionString: process.env.DATABASE_URL!,
+})
+
+const globalForPrisma = globalThis as unknown as {
+  prisma?: PrismaClient
+}
+
+export const prisma =
+  globalForPrisma.prisma ?? new PrismaClient({ adapter })
+
+if (process.env.NODE_ENV !== "production") {
+  globalForPrisma.prisma = prisma
+}
+
+export default prisma
+```
+
+---
+
+## Package Exports
+
+```typescript
+// packages/db/src/index.ts
+export { prisma } from "./client"
+export * from "./generated/prisma"
+```
+
+```json
+// packages/db/package.json
+{
+  "name": "@repo/db",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "db:generate": "prisma generate",
+    "db:push": "prisma db push",
+    "db:migrate": "prisma migrate dev",
+    "db:studio": "prisma studio",
+    "db:test": "tsx scripts/test-database.ts"
+  }
+}
+```
+
+---
+
+## Turbo Configuration
+
+```json
+// turbo.json
+{
+  "globalEnv": ["DATABASE_URL"],
+  "tasks": {
+    "dev": {
+      "cache": false,
+      "persistent": true,
+      "dependsOn": ["^db:generate"]
+    },
+    "build": {
+      "dependsOn": ["^db:generate"],
+      "outputs": [".next/**", "dist/**"]
+    },
+    "db:generate": {
+      "cache": false
+    },
+    "db:migrate": {
+      "cache": false
+    },
+    "db:studio": {
+      "cache": false
+    },
+    "db:test": {
+      "cache": false,
+      "dependsOn": ["db:generate"]
+    }
+  }
+}
+```
+
+---
+
+## Root Scripts
+
+```json
+// package.json (root)
+{
+  "scripts": {
+    "dev": "turbo dev",
+    "build": "turbo build",
+    "db:generate": "turbo run db:generate",
+    "db:push": "turbo run db:push",
+    "db:migrate": "turbo run db:migrate",
+    "db:studio": "turbo run db:studio",
+    "db:test": "turbo run db:test"
+  }
+}
+```
+
+---
+
+## Using in Apps
+
+### Add Dependency
+
+```json
+// apps/web/package.json
+{
+  "dependencies": {
+    "@repo/db": "*"
+  }
+}
+```
+
+### Import in Server Code
+
+```typescript
+// apps/web/app/api/users/route.ts
+import { prisma } from "@repo/db"
+import { NextResponse } from "next/server"
+
+export async function GET() {
+  try {
+    const users = await prisma.user.findMany()
+    return NextResponse.json(users)
+  } catch (e) {
+    console.error(e)
+    return NextResponse.json({ error: "Failed" }, { status: 500 })
+  }
+}
+```
+
+---
+
+## Test Script
+
+```typescript
+// packages/db/scripts/test-database.ts
+import "dotenv/config"
+import prisma from "../src/client"
+
+async function testDatabase() {
+  console.log("Testing connection...\n")
+
+  try {
+    console.log("Connected!")
+
+    const user = await prisma.user.create({
+      data: { email: "demo@example.com", name: "Demo" }
+    })
+    console.log("Created:", user)
+
+    const users = await prisma.user.findMany()
+    console.log(`Found ${users.length} users`)
+
+    console.log("\nAll tests passed!")
+  } catch (error) {
+    console.error("Error:", error)
+    process.exit(1)
+  } finally {
+    await prisma.$disconnect()
+  }
+}
+
+testDatabase()
+```
+
+---
+
+## Setup Workflow
+
+1. Create Turborepo or use existing
+2. Add `packages/db`, install Prisma v7 deps
+3. Initialize Prisma in packages/db:
+   ```bash
+   cd packages/db
+   npx prisma init
+   ```
+4. Update `prisma.config.ts` with `import "dotenv/config"`
+5. Update schema with v7 generator + output
+6. Create `src/client.ts` singleton
+7. Wire Turbo tasks in `turbo.json`
+8. Add `.env` at root and/or `packages/db/.env`
+9. Push schema:
+   ```bash
+   npm run db:push
+   ```
+10. Test:
+    ```bash
+    npm run db:test
+    ```
+
+---
+
+## Verification Checklist
+
+1. `provider = "prisma-client"`?
+2. `output = "../src/generated/prisma"` in packages/db?
+3. All Prisma files in `packages/db`?
+4. Client imports from generated path or `@repo/db`?
+5. `import "dotenv/config"` in prisma.config.ts?
+6. Turbo tasks depend on `db:generate`?
+7. `DATABASE_URL` in `globalEnv`?
+8. All DB ops wrapped in try/catch?
+9. Test script exists in packages/db?

package/skills/fullstack/shadcn/LICENSE

@@ -0,0 +1,3 @@
+MIT License
+
+Copyright (c) 2026 1AboveIO

package/skills/fullstack/shadcn/SKILL.md

@@ -0,0 +1,119 @@
+---
+name: shadcn
+description: "Add or debug shadcn/ui in a React/Next.js project: components.json, shadcn init/add, presets, registries, Tailwind styling, base/radix/aria composition, component fixes, and list-index pages — where the default is the DiceUI data table with filter/sort/pagination in the URL via nuqs, not a bare shadcn Table."
+allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
+---
+
+# shadcn/ui
+
+Components are added as **source code** via the CLI — you edit them like your own files.
+
+**This page is an index.** Each rule below is the short form; the linked file carries the reasoning and the Incorrect/Correct pairs. Read the row for your task before acting — the rules are stated flat here and the *why* is what stops you misapplying them.
+
+> Run every CLI command with the project's runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Pick from the lockfile or `package.json`'s `packageManager` — `shadcn info` does not report it.
+
+## Current Project Context
+
+```json
+!`npx shadcn@latest info --json`
+```
+
+Blocks: `project`, `config`, `preset`, `components`, `links`. Names are exact — `config.rsc` not `isRSC`, `project.tailwindCss` not `tailwindCssFile`, `project.importAlias` not `aliasPrefix`, and there is no `packageManager`. Full table: [cli.md](./cli.md#info--project-information).
+
+Four fields change what you write: **`config.base`** (`radix` | `base` | `aria` — different APIs), **`config.rsc`** (`"use client"` needed?), **`config.iconLibrary`** (never assume `lucide-react`), **`config.aliases`**/`resolvedPaths` (never hardcode `@/`).
+
+## Routing
+
+| Task | Read |
+|---|---|
+| Pick a component; the core code patterns | [rules/component-selection.md](./rules/component-selection.md) |
+| Forms — layout, validation, errors, inputs | [rules/forms.md](./rules/forms.md) |
+| Compose — groups, overlays, Card, Tabs, Avatar | [rules/composition.md](./rules/composition.md) |
+| Style — colors, spacing, variants, `cn()`, dark mode | [rules/styling.md](./rules/styling.md) |
+| Icons — `data-icon`, sizing, icons as props | [rules/icons.md](./rules/icons.md) |
+| A list/index page or any data table | [rules/data-table.md](./rules/data-table.md) |
+| `asChild` vs `render`; `base`/`radix`/`aria` splits | [rules/base-vs-radix.md](./rules/base-vs-radix.md) |
+| Any CLI command, flag, preset, registry | [cli.md](./cli.md) |
+| Theming, CSS variables, extending a component | [customization.md](./customization.md) |
+| MCP server | [mcp.md](./mcp.md) |
+
+## Principles
+
+1. **Use an existing component first** (`npx shadcn@latest search`), and **compose rather than reinvent** — a settings page is Tabs + Card + form controls.
+2. **Built-in variants before custom styles; semantic colors only** — never `bg-blue-500`.
+3. **Read the docs before writing a component** — `npx shadcn@latest docs <component>`, then fetch the URLs. APIs differ per base and shift between releases, so guessing yields code that looks right and isn't.
+
+## Critical Rules
+
+**Styling** → [styling.md](./rules/styling.md)
+
+- `className` for layout only — never component colors or typography, and no manual `dark:` overrides.
+- `gap-*` not `space-x-*`/`space-y-*`; `size-*` when width and height match; `truncate` not the longhand.
+- `cn()` for conditional classes, never template literals. No manual `z-index` on overlays.
+- `Badge` variants are exactly `default`, `secondary`, `destructive`, `outline`, `ghost` — no `success`.
+
+**Forms** → [forms.md](./rules/forms.md)
+
+- `FieldGroup` + `Field` for layout, never a raw `div`.
+- Errors go in `FieldError`, never `FieldDescription`. Validation is `data-invalid` on `Field` **and** `aria-invalid` on the control; disabled likewise.
+- `InputGroup` takes `InputGroupInput`/`InputGroupTextarea`; buttons inside it use `InputGroupButton` in an `InputGroupAddon`, and a trailing one needs `align="inline-end"`.
+- Option sets (2–7) use `ToggleGroup`; `FieldSet` + `FieldLegend` group related checkboxes/radios.
+
+**Composition** → [composition.md](./rules/composition.md)
+
+- Items live inside their Group — `SelectItem`→`SelectGroup`, `DropdownMenuItem`→`DropdownMenuGroup`, `CommandItem`→`CommandGroup`.
+- `asChild` (radix) or `render` (base) for custom triggers; check `config.base` → [base-vs-radix.md](./rules/base-vs-radix.md).
+- Dialog/Sheet/Drawer need a Title (`sr-only` if hidden); `TabsTrigger` belongs in `TabsList`; `Avatar` needs `AvatarFallback`.
+- Full Card composition, not everything in `CardContent`. `Button` has no `isPending`/`isLoading` — compose `Spinner` + `data-icon` + `disabled`.
+- Prefer the component over markup: `Alert`, `Empty`, `sonner`'s `toast()`, `Separator`, `Skeleton`, `Badge`.
+
+**Icons** → [icons.md](./rules/icons.md)
+
+- `data-icon="inline-start"`/`"inline-end"` on icons inside `Button`; pass icons as components (`icon={CheckIcon}`), not string keys.
+- No sizing classes on icons inside components — a `size-*` class *opts out* of the component's sizing rather than matching it.
+
+**CLI** → [cli.md](./cli.md)
+
+- Never decode or fetch a preset code by hand — `preset decode <code>` shows what it encodes. Swap icon libraries with `migrate icons --from <a> --to <b>`.
+- Never `--overwrite` without explicit approval → [smart merge](./cli.md#smart-merge-from-upstream). Never guess an unnamed registry, and read every file one adds → [third-party registries](./cli.md#working-with-third-party-registries).
+
+## Data Tables & List Pages
+
+**On a portal list/index page the data table is DiceUI's — the default, not a suggestion.** A bare `Table` there is the choice that needs justifying. Elsewhere: DiceUI once a table needs server-side filter/sort/paginate, plain `Table` when it's display.
+
+**List-page state belongs in the URL, via `nuqs`** — not `useState`, and never mirrored into both. `useDataTable` calls `useQueryState` internally, so `nuqs` is a hard dependency and the app must be wrapped once in `NuqsAdapter` or the hook throws.
+
+```bash
+npx shadcn@latest add "https://tablecn.com/r/data-table.json"   # .json required; extensionless 404s
+```
+
+Why URL state is the point, the install traps (undeclared `zod` / `@dnd-kit/*`), the server-side parsing pattern, and the column contract: [rules/data-table.md](./rules/data-table.md). Surrounding state & data-flow conventions: the project's `nextjs-fullstack` skill.
+
+## Starting a New Project
+
+Canonical config: **Base UI + nova + lucide** — `components.json` ends up with `style: "base-nova"`. Install the whole library up front so feature work never stalls on a missing component.
+
+```bash
+# Single app — same result as `init --defaults`, which resolves to next + base-nova.
+npx shadcn@latest init --template next --base base --preset nova
+# Turborepo workspace.
+npx shadcn@latest init --template next --base base --preset nova --monorepo
+npx shadcn@latest add --all
+```
+
+Two consequences to carry into everything you write afterwards:
+
+- **The base is `base`, so component APIs are Base UI's** — `render` not `asChild`, `multiple` not `type="single"`, a scalar `Slider`, and `Select` needs an `items` prop → [base-vs-radix.md](./rules/base-vs-radix.md). Registry items and most examples online are written for radix; expect to convert.
+- **In a monorepo the UI alias is `@workspace/ui/components`, not `@/components/ui`** — so third-party registry items land with imports that resolve to nothing. Rewrite them against `config.aliases`.
+
+`--all` is a setup step, not an update path — what that means when upstream moves: [cli.md](./cli.md#installing-everything-up-front).
+
+## Workflow
+
+1. Read the injected context; re-run `npx shadcn@latest info` to refresh.
+2. Check `components` (or list `resolvedPaths.ui`) before importing. On a project set up as above everything is already there, so this is usually a one-line confirmation — but don't assume it: older projects and ones initialised elsewhere may have been added to piecemeal, and importing a component that was never added fails at build, not at review.
+3. Find components — `npx shadcn@latest search`.
+4. Read the docs — `npx shadcn@latest docs <component>`, then fetch. `view` browses uninstalled items; `add --diff` previews changes to installed ones.
+5. Install or update — `npx shadcn@latest add`; [smart merge](./cli.md#smart-merge-from-upstream) anything with local edits.
+6. Ask which registry when the user didn't name one, then review every added file → [third-party registries](./cli.md#working-with-third-party-registries).
+7. Switching presets — ask first: **overwrite** / **merge** / **skip**, or `apply --only theme` to re-theme alone → [cli.md](./cli.md#switching-presets).