---
name: "uploadthing-fullstack-file-uploads"
description: "Add file uploads to Next.js/React with type-safe server route handlers and S3-backed storage."
metadata:
  author: "Ping.gg"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "setup uploadthing nextjs"
  - "create filerouter uploadthing"
  - "uploadbutton client uploadthing"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# UploadThing Type-Safe Fullstack File Upload Infrastructure

Configures UploadThing: creating FileRouter in server/uploadthing.ts, middleware auth checks, onUploadComplete callbacks, drop-in client components (<UploadButton />, <UploadDropzone />), and automatic file cleanup.

## When to Invoke
Invoke this skill whenever you need to:
- setup uploadthing nextjs
- create filerouter uploadthing
- uploadbutton client uploadthing

## Execution SOP & Rules
1. Create router in app/api/uploadthing/core.ts using createUploadthing().
2. Define route: imageUploader: f({ image: { maxFileSize: '4MB' } }).middleware(authCheck).onUploadComplete(saveToDb).
3. Mount Next.js route handler in app/api/uploadthing/route.ts using createRouteHandler.
4. Drop in client component: <UploadButton endpoint='imageUploader' onClientUploadComplete={...} />.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.