@1aboveio/skills 0.10.0

package/skills/fullstack/monorepo/SKILL.md

@@ -0,0 +1,465 @@
+---
+name: monorepo
+description: Turborepo monorepo architecture and conventions. Read when designing or reviewing monorepo structure, shared packages, pnpm workspaces, DAL architecture, or Turborepo pipeline setup.
+---
+
+# Turborepo Monorepo Architecture
+
+**Turborepo** | **pnpm workspaces** | **Next.js 16** | **Prisma** | **Shadcn UI**
+
+Strictly enforces Data Access Layer (DAL) pattern and package boundaries.
+
+---
+
+## Core Technology Stack
+
+- **Manager:** Turborepo
+- **Package Manager:** pnpm
+- **Framework:** Next.js 16 (App Router)
+- **Language:** TypeScript (Strict Mode)
+- **UI System:** Shadcn UI (Radix + Tailwind)
+- **Database:** Prisma (PostgreSQL)
+- **Architecture:** DAL Separation
+
+---
+
+## Directory Structure
+
+```
+repo/
+├── apps/
+│   └── web/                    # Next.js application
+├── packages/
+│   ├── typescript-config/      # Shared TS configs
+│   ├── eslint-config/          # Shared ESLint configs
+│   ├── database/               # Raw Prisma schema + client
+│   ├── dal/                    # Data Access Layer
+│   └── ui/                     # Shadcn UI system
+├── turbo.json
+├── pnpm-workspace.yaml
+└── package.json
+```
+
+---
+
+## Root Configuration
+
+### pnpm-workspace.yaml
+
+```yaml
+packages:
+  - "apps/*"
+  - "packages/*"
+```
+
+### turbo.json
+
+```json
+{
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"]
+    },
+    "dev": {
+      "dependsOn": ["^db:generate"],
+      "cache": false,
+      "persistent": true
+    },
+    "db:generate": {
+      "inputs": ["schema.prisma"]
+    },
+    "lint": {}
+  }
+}
+```
+
+---
+
+## Package: typescript-config
+
+Shared TypeScript configurations.
+
+```
+packages/typescript-config/
+├── base.json
+├── nextjs.json
+└── server.json
+```
+
+### base.json
+
+```json
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  }
+}
+```
+
+### nextjs.json
+
+```json
+{
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "target": "esnext",
+    "plugins": [{ "name": "next" }]
+  }
+}
+```
+
+### server.json
+
+```json
+{
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["esnext"],
+    "module": "esnext",
+    "target": "esnext"
+  }
+}
+```
+
+---
+
+## Package: database
+
+Holds **only** the Prisma schema and raw client. No business logic.
+
+```
+packages/database/
+├── prisma/
+│   └── schema.prisma
+├── client.ts
+├── package.json
+└── index.ts
+```
+
+### schema.prisma
+
+```prisma
+generator client {
+  provider = "prisma-client"
+  output   = "../generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+```
+
+### client.ts
+
+```typescript
+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 { database?: PrismaClient }
+
+export const database =
+  globalForPrisma.database ?? new PrismaClient({ adapter })
+
+if (process.env.NODE_ENV !== "production") {
+  globalForPrisma.database = database
+}
+```
+
+### index.ts
+
+```typescript
+export * from "./generated/prisma"
+export { database } from "./client"
+```
+
+### package.json
+
+```json
+{
+  "name": "@repo/database",
+  "private": true,
+  "main": "index.ts",
+  "scripts": {
+    "db:generate": "prisma generate",
+    "db:push": "prisma db push"
+  }
+}
+```
+
+---
+
+## Package: dal (Data Access Layer)
+
+The **only** package allowed to import `@repo/database`.
+
+```
+packages/dal/
+├── src/
+│   ├── users/
+│   │   ├── queries.ts
+│   │   └── mutations.ts
+│   └── index.ts
+└── package.json
+```
+
+### Requirements
+
+- **Server-Only:** All files must start with `import 'server-only'`
+- **DTOs:** Return plain objects, not class instances
+- **Dependencies:** `@repo/database`, `server-only`
+
+### src/users/queries.ts
+
+```typescript
+import "server-only"
+import { database } from "@repo/database"
+
+export async function getUsers() {
+  return database.user.findMany({
+    orderBy: { createdAt: "desc" },
+  })
+}
+
+export async function getUserById(id: string) {
+  return database.user.findUnique({
+    where: { id },
+  })
+}
+```
+
+### src/users/mutations.ts
+
+```typescript
+import "server-only"
+import { database } from "@repo/database"
+
+export async function createUser(data: { email: string; name?: string }) {
+  return database.user.create({ data })
+}
+
+export async function updateUser(id: string, data: { name?: string }) {
+  return database.user.update({
+    where: { id },
+    data,
+  })
+}
+```
+
+### src/index.ts
+
+```typescript
+export * from "./users/queries"
+export * from "./users/mutations"
+```
+
+### package.json
+
+```json
+{
+  "name": "@repo/dal",
+  "private": true,
+  "main": "src/index.ts",
+  "dependencies": {
+    "@repo/database": "*",
+    "server-only": "*"
+  }
+}
+```
+
+---
+
+## Package: ui (Shadcn)
+
+Centralized, exportable UI library.
+
+```
+packages/ui/
+├── src/
+│   ├── components/
+│   │   └── ui/
+│   │       ├── button.tsx
+│   │       └── input.tsx
+│   └── styles/
+│       └── globals.css
+├── components.json
+├── tailwind.config.ts
+├── index.ts
+└── package.json
+```
+
+### tailwind.config.ts (Master Config)
+
+```typescript
+import type { Config } from "tailwindcss"
+
+const config: Config = {
+  darkMode: ["class"],
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+
+export default config
+```
+
+### index.ts
+
+```typescript
+export * from "./src/components/ui/button"
+export * from "./src/components/ui/input"
+// Export tailwind config for apps to preset
+```
+
+---
+
+## App: apps/web
+
+### Dependencies
+
+```json
+{
+  "dependencies": {
+    "@repo/ui": "*",
+    "@repo/dal": "*"
+  }
+}
+```
+
+**FORBIDDEN:** Do not import `@repo/database` directly.
+
+### next.config.ts
+
+```typescript
+import type { NextConfig } from "next"
+
+const config: NextConfig = {
+  transpilePackages: ["@repo/ui", "@repo/dal"],
+}
+
+export default config
+```
+
+### tailwind.config.ts
+
+```typescript
+import type { Config } from "tailwindcss"
+import sharedConfig from "@repo/ui/tailwind.config"
+
+const config: Config = {
+  presets: [sharedConfig],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
+  ],
+}
+
+export default config
+```
+
+### Root Layout
+
+```typescript
+import "@repo/ui/src/styles/globals.css"
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+### Page Example
+
+```typescript
+// app/page.tsx
+import { getUsers } from "@repo/dal"
+import { Button } from "@repo/ui"
+
+export default async function HomePage() {
+  const users = await getUsers()
+
+  return (
+    <main>
+      <h1>Users</h1>
+      <ul>
+        {users.map((user) => (
+          <li key={user.id}>{user.name}</li>
+        ))}
+      </ul>
+      <Button>Add User</Button>
+    </main>
+  )
+}
+```
+
+---
+
+## Package Boundary Rules
+
+| Package | Can Import | Cannot Import |
+|---------|------------|---------------|
+| `database` | - | Any other package |
+| `dal` | `database` | `ui`, apps |
+| `ui` | - | `database`, `dal` |
+| `apps/web` | `dal`, `ui` | `database` directly |
+
+---
+
+## Do / Don't
+
+### Do
+
+- Keep database package minimal (schema + client only)
+- Use DAL for all database operations
+- Use `server-only` in DAL packages
+- Export tailwind config from UI package
+- Use transpilePackages in Next.js config
+
+### Don't
+
+- Don't import `@repo/database` from apps
+- Don't put business logic in database package
+- Don't skip DAL for "simple" queries
+- Don't duplicate tailwind theme in apps

package/skills/fullstack/nextjs-fullstack/LICENSE

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

package/skills/fullstack/nextjs-fullstack/SKILL.md

@@ -0,0 +1,210 @@
+---
+name: nextjs-fullstack
+description: "Build or debug Next.js App Router features with React 19 — pages/layouts/route handlers, Server/Client Components, Server Actions, forms, middleware, DAL, strict TypeScript, Zod — plus our conventions: nuqs URL state, SWR cache, Skeleton/Progress + Sonner feedback, drag-and-drop upload, the portal app shell, list pages as filter/sort/paginate tables. shadcn component mechanics: see the shadcn skill."
+---
+
+# Next.js 16 Fullstack Development
+
+**Stack:** Next.js 16 (App Router) | React 19 | TypeScript strict | Zod | Prisma
+
+## Quick Reference
+
+- [Architectural Conventions](conventions.md) - Layers, DAL, testing
+- [Next.js 16 Patterns](nextjs16.md) - App Router, components, routing
+- [Server Actions & Forms](server-actions.md) - useActionState, withCallbacks
+- [Frontend Conventions](frontend-conventions.md) - nuqs URL state, SWR cache, feedback (Progress/Sonner), file upload, portal app shell, i18n, list pages (components → `shadcn`)
+
+---
+
+## Core Principles
+
+1. **Server Components by default** - Client Components only when needed
+2. **Server Actions for mutations** - Not API routes for forms
+3. **DAL for database access** - Never call Prisma from components
+4. **Zod for validation** - At server action boundary
+5. **TypeScript strict mode** - Explicit return types on exports
+
+---
+
+## Project Structure
+
+```
+src/
+├── app/
+│   ├── layout.tsx
+│   ├── page.tsx
+│   ├── (public)/...           # Public routes
+│   ├── dashboard/
+│   │   ├── layout.tsx
+│   │   ├── page.tsx
+│   │   ├── settings/
+│   │   │   ├── page.tsx
+│   │   │   ├── actions.ts     # Route-scoped server actions
+│   │   │   ├── schema.ts      # Route-scoped validation
+│   │   │   └── components/
+│   │   └── [id]/
+│   │       └── page.tsx
+│   └── api/
+│       └── health/
+│           └── route.ts
+├── lib/
+│   ├── auth.ts                # Auth configuration
+│   ├── prisma.ts              # Database client
+│   └── server-action.ts       # Action utilities
+├── dal/
+│   └── user.ts                # Data access layer
+├── components/
+│   ├── ui/                    # Shared primitives
+│   └── client/                # Reusable client components
+└── context/
+    └── session-context.tsx
+```
+
+---
+
+## Architectural Layers
+
+### 1. UI Layer (Components & Pages)
+
+- Location: `app/**`, `components/**`
+- Renders UI (RSC or client components)
+- Calls server actions (via import or `useActionState`)
+- No direct Prisma usage
+
+### 2. Use Case Layer (Server Actions)
+
+- Location: `app/**/actions.ts`
+- Always begins with `'use server'`
+- Validates input with Zod
+- Enforces auth and permissions
+- Calls DAL for database operations
+- Returns typed `ActionResult` shape
+
+### 3. Data Access Layer (DAL)
+
+- Location: `lib/repositories/**` or `dal/**`
+- All Prisma access
+- Framework-agnostic (no Next.js, no auth)
+- Returns domain objects or `null`
+- No Zod schemas, no logging
+
+---
+
+## Server Action Pattern
+
+```typescript
+// app/dashboard/settings/actions.ts
+'use server';
+
+import { z } from 'zod';
+import { revalidatePath } from 'next/cache';
+import { auth } from '@/lib/auth';
+import { updateUserProfile } from '@/dal/user';
+
+const schema = z.object({
+  name: z.string().min(1).max(50),
+  avatarUrl: z.string().url().optional(),
+});
+
+export type ActionResult<T = unknown> = {
+  success: boolean;
+  data?: T;
+  error?: { code: string; message: string };
+};
+
+export async function updateProfile(input: unknown): Promise<ActionResult> {
+  const session = await auth();
+  if (!session?.user) {
+    return { success: false, error: { code: 'UNAUTHENTICATED', message: 'Please sign in.' } };
+  }
+
+  const parsed = schema.safeParse(input);
+  if (!parsed.success) {
+    return { success: false, error: { code: 'VALIDATION_ERROR', message: 'Invalid input.' } };
+  }
+
+  try {
+    const user = await updateUserProfile(session.user.id, parsed.data);
+    revalidatePath('/dashboard/settings');
+    return { success: true, data: user };
+  } catch (err) {
+    console.error(err);
+    return { success: false, error: { code: 'INTERNAL_ERROR', message: 'Something went wrong.' } };
+  }
+}
+```
+
+---
+
+## Client Component with useActionState
+
+```tsx
+'use client';
+
+import { startTransition, useActionState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { toast } from 'sonner';
+import { updateProfile } from './actions';
+
+export function ProfileForm() {
+  const { register, handleSubmit } = useForm({
+    resolver: zodResolver(schema),
+  });
+
+  const [state, formAction, isPending] = useActionState(
+    async (prev, data) => {
+      const result = await updateProfile(data);
+      if (result.success) toast.success('Profile updated');
+      else toast.error(result.error?.message);
+      return result;
+    },
+    { success: false }
+  );
+
+  function onSubmit(data) {
+    startTransition(() => formAction(data));
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('name')} />
+      <button disabled={isPending}>Save</button>
+    </form>
+  );
+}
+```
+
+---
+
+## Forbidden Patterns
+
+| Pattern | Why |
+|---------|-----|
+| `pages/` directory | App Router only |
+| `getServerSideProps`, `getStaticProps` | Use Server Components |
+| `next/router` | Use `next/navigation` |
+| Full-page client components | Bad perf |
+| Fetching data with `useEffect` | Use Server Components |
+| Direct Prisma in components | Use DAL |
+| `HTTPException` from DAL | Keep DAL framework-agnostic |
+
+---
+
+## Do / Don't
+
+### Do
+
+- Use `'use server'` actions as use-case boundaries
+- Validate inputs with Zod before DB/auth logic
+- Route all Prisma through repositories/DAL
+- Return consistent `ActionResult` shapes
+- Use explicit TS types for exports
+
+### Don't
+
+- Don't call Prisma from components or actions directly
+- Don't access auth inside DAL
+- Don't return raw errors to client
+- Don't put business logic in DAL
+- Don't skip input validation