メニュー
Vercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/openai/plugins --skill vercel-storageコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
| name | vercel-storage |
| description | Vercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications. |
| metadata | {"priority":7,"docs":["https://vercel.com/docs/storage"],"sitemap":"https://vercel.com/sitemap/docs.xml","pathPatterns":["lib/blob/**","lib/storage/**","src/lib/blob/**","src/lib/storage/**","lib/blob.*","lib/storage.*","lib/edge-config.*","src/lib/blob.*","src/lib/storage.*","src/lib/edge-config.*","supabase/**","lib/supabase.*","src/lib/supabase.*","prisma/schema.prisma","prisma/**"],"bashPatterns":["\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/blob\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/blob\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel/blob\\b","\\byarn\\s+add\\s+[^\\n]*@vercel/blob\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/edge-config\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/edge-config\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel/edge-config\\b","\\byarn\\s+add\\s+[^\\n]*@vercel/edge-config\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@neondatabase/serverless\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@neondatabase/serverless\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@neondatabase/serverless\\b","\\byarn\\s+add\\s+[^\\n]*@neondatabase/serverless\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@upstash/redis\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@upstash/redis\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@upstash/redis\\b","\\byarn\\s+add\\s+[^\\n]*@upstash/redis\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/kv\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/kv\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel/kv\\b","\\byarn\\s+add\\s+[^\\n]*@vercel/kv\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/postgres\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel/postgres\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel/postgres\\b","\\byarn\\s+add\\s+[^\\n]*@vercel/postgres\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@supabase/supabase-js\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@supabase/supabase-js\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@supabase/supabase-js\\b","\\byarn\\s+add\\s+[^\\n]*@supabase/supabase-js\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@supabase/ssr\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@supabase/ssr\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@supabase/ssr\\b","\\byarn\\s+add\\s+[^\\n]*@supabase/ssr\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@prisma/client\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@prisma/client\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@prisma/client\\b","\\byarn\\s+add\\s+[^\\n]*@prisma/client\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*\\bmongodb\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*\\bmongodb\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*\\bmongodb\\b","\\byarn\\s+add\\s+[^\\n]*\\bmongodb\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*\\bconvex\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*\\bconvex\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*\\bconvex\\b","\\byarn\\s+add\\s+[^\\n]*\\bconvex\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@libsql/client\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@libsql/client\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@libsql/client\\b","\\byarn\\s+add\\s+[^\\n]*@libsql/client\\b"],"importPatterns":["@vercel/blob","@vercel/edge-config","@neondatabase/serverless","@upstash/redis","@vercel/kv","@vercel/postgres","@supabase/supabase-js","@prisma/client"]} |
You are an expert in Vercel's storage options. Know which products are active, which are sunset, and when to use each.
Choose storage provisioning paths in this order:
vercel integration add ... or dashboard). This path auto-provisions accounts/resources and injects environment variables into the linked Vercel project.When using fallback/manual provisioning, you must add/sync environment variables yourself and then re-run vercel env pull .env.local --yes locally.
Fast, scalable storage for unstructured data (images, videos, documents, any files).
npm install @vercel/blob
import { put, del, list, get } from '@vercel/blob'
// Upload from server (public)
const blob = await put('images/photo.jpg', file, {
access: 'public',
})
// blob.url → public URL
// Upload private file
const privateBlob = await put('docs/secret.pdf', file, {
access: 'private',
})
// Read private file back
const privateFile = await get(privateBlob.url) // returns ReadableStream + metadata
// Client upload (up to 5 TB)
import { upload } from '@vercel/blob/client'
const blob = (, file, {
: ,
: ,
})
{ blobs } = ()
response = (, {
: previousETag,
})
(response. === ) {
}
()
Private Storage (public beta): Use access: 'private' for files that should not be publicly accessible. Read them back with get(). Do NOT use private access for files that need to be served publicly — it leads to slow delivery and high egress costs.
Blob Data Transfer: Vercel Blob uses two delivery strategies — Fast Data Transfer (94 cities, latency-optimized) and Blob Data Transfer (18 hubs, volume-optimized for large assets). The system automatically routes via the optimal path.
Use when: Media files, user uploads, documents, any large unstructured data.
Ultra-low-latency key-value store for application configuration. Not a database — designed for config data that must be read instantly at the edge.
npm install @vercel/edge-config
import { get, getAll, has } from '@vercel/edge-config'
// Read a single value (< 1ms at the edge)
const isFeatureEnabled = await get('feature-new-ui')
// Read multiple values
const config = await getAll(['feature-new-ui', 'ab-test-variant', 'redirect-rules'])
// Check existence
const exists = await has('maintenance-mode')
Use when: Feature flags, A/B testing config, dynamic routing rules, maintenance mode toggles. Anything that must be read at the edge with near-zero latency.
Do NOT use for: User data, session state, frequently written data. Edge Config is optimized for reads, not writes.
Next.js 16: @vercel/edge-config@^1.4.3 supports cacheComponents and the renamed proxy.ts (formerly middleware.ts).
These packages no longer exist as first-party Vercel products. Use the marketplace replacements:
Serverless Postgres with branching, auto-scaling, and connection pooling. The driver is GA at @neondatabase/serverless@^1.0.2 and requires Node.js 19+.
npm install @neondatabase/serverless
// Direct Neon usage
import { neon } from '@neondatabase/serverless'
const sql = neon(process.env.DATABASE_URL!)
const users = await sql`SELECT * FROM users WHERE id = ${userId}`
// With Drizzle ORM
import { drizzle } from 'drizzle-orm/neon-http'
import { neon } from '@neondatabase/serverless'
const sql = neon(process.env.DATABASE_URL!)
const db = drizzle(sql)
Build-time safety: The neon() call above throws if DATABASE_URL is not set. Since Next.js evaluates top-level module code at build time, this will crash next build when env vars aren't yet configured (e.g., first deploy before Marketplace provisioning). Use lazy initialization:
// src/db/index.ts — lazy initialization (safe for build time)
import { neon } from '@neondatabase/serverless'
import { drizzle } from 'drizzle-orm/neon-http'
import * as schema from './schema'
function createDb() {
const sql = neon(process.env.DATABASE_URL!)
return drizzle(sql, { schema })
}
let _db: ReturnType<typeof createDb> | null = null
export function getDb() {
if (!_db) _db = createDb()
return _db
}
WARNING: Do NOT use JavaScript Proxy wrappers around the DB client. A common pattern is wrapping db in a Proxy for lazy initialization. This breaks libraries like NextAuth/Auth.js that inspect the DB adapter object (e.g., checking method existence, iterating properties). The Proxy intercepts those checks and breaks the auth request chain, causing hangs with no error. Use a plain getDb() function or a simple module-level lazy let instead.
Drizzle Kit migrations: drizzle-kit and tsx do NOT auto-load .env.local. Source env vars manually or use dotenv:
# Option 1: Source env vars before running
source <(grep -v '^#' .env.local | sed 's/^/export /') && npx drizzle-kit push
# Option 2: Use dotenv-cli (recommended for scripts)
npm install -D dotenv-cli
npx dotenv -e .env.local -- npx drizzle-kit push
npx dotenv -e .env.local -- npx tsx scripts/seed.ts
This applies to any Node script that needs Vercel-provisioned env vars — only Next.js auto-loads .env.local.
Install via Vercel Marketplace for automatic environment variable provisioning.
If you use Neon CLI as the fallback path, account/project setup is managed on Neon directly instead of through Vercel Marketplace automation.
For Vercel-managed Neon projects, CLI operations require a Neon API key; do not rely on normal browser-auth login flow alone.
Serverless Redis with same Vercel billing integration.
npm install @upstash/redis
import { Redis } from '@upstash/redis'
const redis = Redis.fromEnv() // Uses UPSTASH_REDIS_REST_URL & TOKEN
// Basic operations
await redis.set('session:abc', { userId: '123' }, { ex: 3600 })
const session = await redis.get('session:abc')
// Rate limiting
import { Ratelimit } from '@upstash/ratelimit'
const ratelimit = new Ratelimit({
redis,
limiter: Ratelimit.slidingWindow(10, '10s'),
})
const { success } = await ratelimit.limit('user:123')
Install via Vercel Marketplace for automatic environment variable provisioning.
Full Postgres database with built-in auth, realtime subscriptions, and storage. Native Vercel Marketplace integration.
npm install @supabase/supabase-js @supabase/ssr
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
const { data, error } = await supabase.from('users').select('*')
Install via Vercel Marketplace: vercel integration add supabase
Type-safe ORM with auto-generated client, migrations, and Prisma Accelerate for connection pooling.
npm install prisma @prisma/client
npx prisma init
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
const users = await prisma.user.findMany()
Install via Vercel Marketplace: vercel integration add prisma
Document database with flexible schemas. Available via Vercel Marketplace.
npm install mongodb
import { MongoClient } from 'mongodb'
const client = new MongoClient(process.env.MONGODB_URI!)
const db = client.db('myapp')
const users = await db.collection('users').find({}).toArray()
Install via Vercel Marketplace: vercel integration add mongodb-atlas
Reactive backend-as-a-service with real-time sync, serverless functions, and file storage.
npm install convex
npx convex dev
import { query } from './_generated/server'
import { v } from 'convex/values'
export const getUsers = query({
args: {},
handler: async (ctx) => {
return await ctx.db.query('users').collect()
},
})
Edge-native SQLite database with embedded replicas for ultra-low latency reads.
npm install @libsql/client
import { createClient } from '@libsql/client'
const turso = createClient({
url: process.env.TURSO_DATABASE_URL!,
authToken: process.env.TURSO_AUTH_TOKEN!,
})
const result = await turso.execute('SELECT * FROM users')
Install via Vercel Marketplace: vercel integration add turso
| Need | Use | Package |
|---|---|---|
| File uploads, media, documents | Vercel Blob | @vercel/blob |
| Feature flags, A/B config | Edge Config | @vercel/edge-config |
| Relational data, SQL queries | Neon Postgres | @neondatabase/serverless |
| Key-value cache, sessions, rate limiting | Upstash Redis | @upstash/redis |
| Postgres + auth + realtime + storage | Supabase | @supabase/supabase-js |
| Type-safe ORM with migrations | Prisma | @prisma/client |
| Document database, flexible schemas | MongoDB Atlas | mongodb |
| Reactive backend with real-time sync | Convex | convex |
| Edge-native SQLite with replicas | Turso | @libsql/client |
| Full-text search | Neon Postgres (pg_trgm) or Elasticsearch (Marketplace) | varies |
| Vector embeddings | Neon Postgres (pgvector) or Pinecone (Marketplace) | varies |
- import { sql } from '@vercel/postgres'
+ import { neon } from '@neondatabase/serverless'
+ const sql = neon(process.env.DATABASE_URL!)
Drop-in replacement: For minimal migration effort, use @neondatabase/vercel-postgres-compat which provides API-compatible wrappers for @vercel/postgres imports.
- import { kv } from '@vercel/kv'
- await kv.set('key', 'value')
- const value = await kv.get('key')
+ import { Redis } from '@upstash/redis'
+ const redis = Redis.fromEnv()
+ await redis.set('key', 'value')
+ const value = await redis.get('key')
Use the Vercel CLI or the Marketplace dashboard at https://vercel.com/dashboard/{team}/stores:
# Install a storage integration (auto-provisions env vars)
vercel integration add neon
vercel integration add upstash
# List installed integrations
vercel integration list
Browse additional storage options at the Vercel Marketplace. Installing via the CLI or dashboard (https://vercel.com/dashboard/{team}/integrations) automatically provisions accounts, creates databases, and sets environment variables.
Use this skill when implementing a Figma design as code (design → code) — the read-FROM-Figma direction. Triggers: 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'code this up from Figma', 'design to code', or a figma.com design URL provided alongside a codebase. Encodes the workflow for reading a node out of Figma with get_design_context and adapting its reference output to the target project — reusing existing components, tokens, and conventions, and honoring Code Connect mappings, component docs, design annotations, and design tokens by priority. Complements figma-code-connect (component mapping) and figma-generate-design / figma-use (the reverse, code → design direction).
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
SOC 職業分類に基づく
