Skills Vercel

Guide for adding new AI function examples, for testing specific features against the actual provider APIs.

Guide for adding new AI function examples, for testing specific features against the actual provider APIs.

คู่มือสำหรับเพิ่มแพ็คเกจผู้ให้บริการ AI ใหม่ลงใน AI SDK ใช้เมื่อสร้างแพ็คเกจ @ai-sdk/<provider> ใหม่เพื่อรวมบริการ AI เข้ากับ SDK

คู่มือสำหรับเพิ่มแพ็คเกจผู้ให้บริการ AI ใหม่ลงใน AI SDK ใช้เมื่อสร้างแพ็คเกจ @ai-sdk/<provider> ใหม่เพื่อรวมบริการ AI เข้ากับ SDK

Create and maintain Architecture Decision Records (ADRs) optimized for agentic coding workflows. Use when you need to propose, write, update, accept/reject,…

Create and maintain Architecture Decision Records (ADRs) optimized for agentic coding workflows. Use when you need to propose, write, update, accept/reject,…

ทำให้การโต้ตอบกับเบราว์เซอร์เป็นอัตโนมัติสำหรับการทดสอบเว็บ การกรอกฟอร์ม การจับภาพหน้าจอ และการดึงข้อมูล

ทำให้การโต้ตอบกับเบราว์เซอร์เป็นอัตโนมัติสำหรับการทดสอบเว็บ การกรอกฟอร์ม การจับภาพหน้าจอ และการดึงข้อมูล ใช้เมื่อผู้ใช้ต้องการนำทางเว็บไซต์ โต้ตอบกับเว็บ…

CLI สำหรับการทำงานอัตโนมัติของเบราว์เซอร์สำหรับเอเจนต์ AI ใช้เมื่อผู้ใช้ต้องการโต้ตอบกับเว็บไซต์ ตรวจสอบผลลัพธ์ของเซิร์ฟเวอร์สำหรับนักพัฒนา ทดสอบเว็บแอป นำทางหน้าเว็บ กรอกฟอร์ม…

CLI สำหรับการทำงานอัตโนมัติของเบราว์เซอร์สำหรับเอเจนต์ AI ใช้เมื่อผู้ใช้ต้องการโต้ตอบกับเว็บไซต์ รวมถึงการนำทางหน้าเว็บ การกรอกฟอร์ม การคลิกปุ่ม การจับภาพ...

Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms,…

Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads,…

Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads,…

สกิลคู่หูสำหรับคอร์ส Agent-Friendly APIs บน Vercel Academy สร้าง API สำหรับรับฟีดกลับ ทำให้เป็นมิตรกับเอเจนต์ด้วยเอกสารที่มีโครงสร้าง จากนั้นสร้างสกิล Claude Code ที่สร้างเอกสารโดยอัตโนมัติ

Python `ai` module — models, agents, hooks, middleware, MCP, structured output

Generate text, images, and video from the terminal using AI models.

AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn/ui. Use when building chat UIs, message displays, tool…

สร้างส่วนประกอบอินเทอร์เฟซแชท AI ใหม่สำหรับไลบรารี ai-elements โดยปฏิบัติตามรูปแบบคอมโพสเอเบิลที่กำหนดไว้ การรวม shadcn/ui และ Vercel AI SDK…

ส่วนประกอบ React ที่สร้างไว้ล่วงหน้าสำหรับอินเทอร์เฟซแชท AI ที่สร้างบน shadcn/ui และ AI SDK ประกอบด้วยส่วนประกอบการสนทนา ข้อความ การแสดงเครื่องมือ และการป้อนข้อความแจ้งที่ออกแบบมาสำหรับแอปพลิเคชันที่ใช้ AI ติดตั้งโดยตรงในโค้ดเบสโปรเจกต์ของคุณผ่าน CLI ทำให้ส่วนประกอบสามารถปรับแต่งและขยายได้อย่างเต็มที่ด้วยรูปแบบ React มาตรฐาน ต้องใช้ Next.js, AI SDK, shadcn/ui และ Node.js 18+; ผสานรวมกับ AI Gateway ของ Vercel ได้อย่างราบรื่นเพื่อเข้าถึงโมเดล ส่วนประกอบทั้งหมดรองรับแอตทริบิวต์ HTML มาตรฐาน...

คู่มือไลบรารีส่วนประกอบ AI Elements — ส่วนประกอบ React ที่สร้างไว้ล่วงหน้าสำหรับอินเทอร์เฟซ AI ที่สร้างบน shadcn/ui ใช้เมื่อสร้าง UI แชท การแสดงข้อความ เครื่องมือ…

Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified…

Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified…

AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation

AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation

เอกสารอ้างอิงและคำแนะนำเชิงปฏิบัติสำหรับการสร้างแอปพลิเคชันที่ขับเคลื่อนด้วย AI ด้วย Vercel AI SDK ครอบคลุม API หลักสำหรับการสร้างข้อความ การสตรีม การเรียกใช้เครื่องมือ ผลลัพธ์ที่มีโครงสร้าง การฝังข้อความ และการสร้างเอเจนต์ด้วย ToolLoopAgent รวมถึง React hooks (useChat, useCompletion) และรูปแบบเฉพาะเฟรมเวิร์กสำหรับ Next.js, SvelteKit และแพลตฟอร์มอื่นๆ มีคู่มือการรวมผู้ให้บริการสำหรับ OpenAI, Anthropic, Google และอื่นๆ พร้อมการตั้งค่า AI Gateway สำหรับการเข้าถึงโมเดลแบบรวมศูนย์...

Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText,…

คำแนะนำจากผู้เชี่ยวชาญ Vercel AI SDK ใช้เมื่อสร้างฟีเจอร์ที่ขับเคลื่อนด้วย AI — อินเทอร์เฟซแชท, การสร้างข้อความ, ผลลัพธ์ที่มีโครงสร้าง, การเรียกใช้เครื่องมือ, เอเจนต์, MCP…

Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText,…

Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText,…

Vercel AI SDK expert guidance. Use when building AI-powered features — chat interfaces, text generation, structured output, tool calling, agents, MCP…

Convert Next.js bundle analyzer data to NDJSON and explore it

Emulated Sign in with Apple / Apple OIDC สำหรับการพัฒนาและทดสอบในเครื่อง ใช้เมื่อผู้ใช้ต้องการทดสอบการลงชื่อเข้าใช้ด้วย Apple ในเครื่อง, จำลอง Apple OIDC…

Query the Next.js documentation RAG API for the topic: $ARGUMENTS

Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications. Covers middleware auth patterns,…

แนวทางการผสานรวมการยืนยันตัวตน — การตั้งค่า Clerk (Vercel Marketplace ดั้งเดิม), Descope และ Auth0 สำหรับแอปพลิเคชัน Next.js ครอบคลุมรูปแบบการยืนยันตัวตนของมิดเดิลแวร์…

Use this skill when creating or modifying agent skills in .agents/skills/ .

CLI tool for automated changeset-based releases with AI-generated descriptions. Use when the user needs to release a package, create changesets, bump versions,…

Emulated AWS cloud services (S3, SQS, IAM, STS) for local development and testing. Use when the user needs to interact with AWS API endpoints locally, test S3…

Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when…

Visual comparison of web pages or elements across two URLs or images. Captures screenshots at desktop, mobile (375x812), or tablet (768x1024) viewports, with optional full-page scrolling Supports CSS selectors to isolate specific elements, and accepts file://, http://, https:// URLs or local image paths Generates markdown-formatted output with automatic image upload to 0x0.st (or GitHub Gist) for easy PR integration Includes Vercel deployment protection detection and GitHub CLI integration...

Advanced AI agent benchmark scenarios that push Vercel's cutting-edge platform features — Workflow DevKit, AI Gateway, MCP, Chat SDK, Queues, Flags, Sandbox,…

สถานการณ์การวัดประสิทธิภาพของเอเจนต์ AI ขั้นสูงที่ผลักดันฟีเจอร์แพลตฟอร์มล้ำสมัยของ Vercel — Workflow DevKit, AI Gateway, MCP, Chat SDK, Queues, Flags, Sandbox,…

End-to-end benchmark suite for vercel-plugin. Runs realistic projects through skill injection, launches dev servers, verifies everything works, analyzes…

End-to-end benchmark suite for vercel-plugin. Runs realistic projects through skill injection, launches dev servers, verifies everything works, analyzes…

Run vercel-plugin eval scenarios in Vercel Sandboxes instead of local WezTerm panels. Provisions ephemeral microVMs with Claude Code + plugin pre-installed,…

Run vercel-plugin eval scenarios in Vercel Sandboxes instead of local WezTerm panels. Provisions ephemeral microVMs with Claude Code + plugin pre-installed,…

สร้างและเปิดตัวโครงการทดสอบเกณฑ์มาตรฐานเพื่อทดสอบการแทรกทักษะ vercel-plugin ในสถานการณ์จริง ตั้งค่าไดเรกทอรีแยก ติดตั้ง...

Create and launch benchmark test projects to exercise vercel-plugin skill injection across realistic scenarios. Sets up isolated directories, installs the…

ตัวประสานการเริ่มต้นโปรเจกต์สำหรับรีโพสิทอรีที่ขึ้นอยู่กับทรัพยากรที่เชื่อมโยงกับ Vercel (ฐานข้อมูล การรับรองความถูกต้อง และการผสานรวมที่จัดการ) ใช้เมื่อตั้งค่าหรือ...

Project bootstrapping orchestrator for repos that depend on Vercel-linked resources (databases, auth, and managed integrations). Use when setting up or…

Comprehensive guide for building modern, accessible, and composable UI components. Covers component taxonomy (primitives, components, blocks, templates), core design principles, and accessibility implementation including ARIA, keyboard navigation, and WCAG compliance Includes patterns for composable APIs, polymorphism, controlled/uncontrolled state, and the as-child pattern for flexible element composition Provides guidance on design tokens, theming systems, styling approaches, and using...

Capture API response test fixture.

Store and manage API response test fixtures for provider parsing validation. Fixtures are organized in __fixtures__ subfolders within provider packages, using naming conventions documented in existing examples Supports two testing patterns: generateText (log raw response to console and copy into fixture) and streamText (use includeRawChunks and saveRawChunks helper to capture streaming chunks) Recommends storing true provider responses unless size constraints require semantic-preserving cuts...

Unified TypeScript SDK for building chat bots across Slack, Teams, Google Chat, Discord, Telegram, GitHub, Linear, and WhatsApp. Write bot logic once, deploy everywhere.

Vercel Chat SDK expert guidance. Use when building multi-platform chat bots — Slack, Telegram, Microsoft Teams, Discord, Google Chat, GitHub, Linear — with a…

Write chat bots once, deploy across Slack, Teams, Google Chat, Discord, GitHub, and Linear. Unified TypeScript SDK with platform-agnostic event handlers (mentions, messages, reactions, slash commands, actions) and normalized message format across all platforms Built-in streaming support for AI responses via AI SDK integration, plus JSX-based interactive cards with buttons, dropdowns, and form modals Pluggable state adapters for Redis, PostgreSQL, or in-memory persistence; webhook handlers...

Vercel Chat SDK expert guidance. Use when building multi-platform chat bots — Slack, Telegram, Microsoft Teams, Discord, Google Chat, GitHub, Linear — with a…

คำแนะนำการรวมระบบ Headless CMS — Sanity (Vercel Marketplace ดั้งเดิม), Contentful, DatoCMS, Storyblok และ Builder.io ครอบคลุมการตั้งค่าสตูดิโอ การสร้างแบบจำลองเนื้อหา…

Headless CMS integration guidance — Sanity (native Vercel Marketplace), Contentful, DatoCMS, Storyblok, and Builder.io. Covers studio setup, content modeling,…

Reviews code changes and provides actionable feedback. Use when the user asks to review a PR, diff, commit, or code changes. Triggers on "/review", "review…

Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for…

Schema definition, catalog creation, and AI prompt generation for json-render specs. Define schemas with typed specs and catalogs using defineSchema , then create catalogs mapping component names to their props and descriptions Generate AI system prompts from catalogs with optional custom rules; supports spec streaming via JSONL patches with createSpecStreamCompiler Dynamic prop expressions enable state binding ( $state , $bindState ), conditionals ( $cond ), templating ( $template ), and...

คู่มือฉบับสมบูรณ์สำหรับการย้ายโปรเจกต์ Create React App (CRA) ไปยัง Next.js ใช้เมื่อต้องการย้ายแอป CRA แปลง React Router เป็นการกำหนดเส้นทางตามไฟล์ หรือ…

Create Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's…

การกำหนดค่าและแนวทางปฏิบัติที่ดีที่สุดสำหรับ Vercel Cron Jobs ใช้เมื่อเพิ่ม แก้ไข หรือดีบักงานที่กำหนดเวลาไว้ใน vercel.json

Vercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.

Analyze and transform CSV data using bash tools

Bootstrap d3k in standalone AI apps (Codex, Cursor, Claude Code): detect/install dev3000, start d3k as the runtime, and use unified logs plus CDP browser…

Use this skill when changing conditional require() paths, Node-only imports, or edge/runtime branching.

Use deepsec (an AI-powered vulnerability scanner) — running scans, configuring projects, writing matchers, and authoring plugins. Activates when the user asks…

ปรับใช้แอปพลิเคชันไปยัง Vercel ใช้เมื่อผู้ใช้พูดว่า "deploy", "deploy to Vercel", "push to production", "deploy my app" หรือ "go live

แนะนำผู้ใช้ในการรวบรวมข้อมูลประจำตัวที่จำเป็นเพื่อปรับใช้ Open Harness ของตนเอง ปรับใช้ repo นี้บน Vercel และดำเนินการครั้งแรกให้เสร็จสมบูรณ์…

Deploy applications and websites to Vercel with automatic git integration and preview URLs. Supports three deployment paths: git-push (ideal for linked projects), direct CLI deployment, and no-auth fallback for sandboxed environments Automatically detects project state (linked via .vercel/project.json or .vercel/repo.json , git remote presence, CLI authentication) and chooses the best deployment method Handles team selection for multi-team accounts and uses --scope to deploy to the correct...

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this…

Vercel deployment and CI/CD expert guidance. Use when deploying, promoting, rolling back, inspecting deployments, building with --prebuilt, or configuring CI…

คำแนะนำผู้เชี่ยวชาญด้านการปรับใช้ Vercel และ CI/CD ใช้เมื่อปรับใช้ ส่งเสริม ย้อนกลับ ตรวจสอบการปรับใช้ สร้างด้วย --prebuilt หรือกำหนดค่า CI…

Develop examples for AI SDK functions. Use when creating, running, or modifying examples under examples/ai-functions/src to validate provider support,…

Development and validation scripts for AI SDK functions across multiple providers and capabilities. Organized by AI SDK function category (text generation, streaming, structured output, embeddings, image generation, speech, transcription, reranking, and agents) File naming convention maps provider and feature combinations (e.g., openai-tool-call.ts , amazon-bedrock-anthropic-cache-control.ts ) for quick identification Includes shared utility helpers for error handling, environment loading,...

แผงตรวจสอบแบบเสียบได้สำหรับแอปที่เรนเดอร์ json ใดๆ ใช้เมื่อผู้ใช้ต้องการดีบัก UI เชิงสร้าง ตรวจสอบโครงสร้าง spec แก้ไขสถานะขณะรันไทม์ ดูการส่ง...

Pre-built custom directives for json-render — formatting, math, string manipulation, and i18n. Use when working with @json-render/directives, defining custom…

คำแนะนำจากผู้เชี่ยวชาญสำหรับ Edge Runtime ของ Vercel — รันไทม์ JavaScript น้ำหนักเบาสำหรับ Vercel Edge Functions และ Middleware ใช้เมื่อสร้างหรือกำหนดค่า edge…

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user…

Email sending integration guidance — Resend (native Vercel Marketplace) with React Email templates. Covers API setup, transactional emails, domain…

Email sending integration guidance — Resend (native Vercel Marketplace) with React Email templates. Covers API setup, transactional emails, domain…

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Local drop-in API emulator for Vercel, GitHub, Google, Slack, Apple, Microsoft, and AWS. Use when the user needs to start emulated services, configure seed…

Vercel environment variable expert guidance. Use when working with .env files, vercel env commands, OIDC tokens, or managing environment-specific configuration.

Vercel environment variable expert guidance. Use when working with .env files, vercel env commands, OIDC tokens, or managing environment-specific configuration.

You are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.

ค้นหาและติดตั้งสกิลเอเจนต์เฉพาะทางจากระบบนิเวศแบบเปิดเมื่อผู้ใช้ต้องการความสามารถเพิ่มเติม ช่วยระบุสกิลที่เกี่ยวข้องตามโดเมนและงานเมื่อผู้ใช้ถามว่า "ฉันจะทำ X ได้อย่างไร" หรือ "หาสกิลสำหรับ X" ผสานรวมกับ Skills CLI (npx skills find, npx skills add) เพื่อค้นหา ตรวจสอบ และติดตั้งแพ็กเกจจากไดเรกทอรี skills.sh แนะนำสกิลตามจำนวนการติดตั้ง ชื่อเสียงของแหล่งที่มา และดาวบน GitHub เพื่อรับประกันคุณภาพก่อนแนะนำให้ติดตั้ง นำเสนอสกิล...

ใช้ทักษะนี้เมื่อเพิ่มหรือเปลี่ยนฟีเจอร์แฟล็กในเฟรมเวิร์กภายในของ Next.js

The Flags SDK ( flags npm package) is a feature flags toolkit for Next.js and SvelteKit. It turns each feature flag into a callable function, works with any flag provider via adapters, and keeps pages static using the precompute pattern. Vercel Flags is the first-party provider, letting you manage flags from the Vercel dashboard or the vercel flags CLI.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…

Expert guidance for Geist, Vercel's default typography system and font family for precise Next.js interfaces. Use when configuring Geist Sans, Geist Mono, or…

Expert guidance for Geist, Vercel's default typography system and font family for precise Next.js interfaces. Use when configuring Geist Sans, Geist Mono, or…

Build explorative, interactive learning experiences as Next.js apps using the Geist design system. Use when creating tutorials, explorable explanations,…

Expert guidance for Geistdocs, Vercel's documentation template built with Next.js and Fumadocs — MDX authoring, configuration, AI chat, i18n, feedback,…

Expert guidance for Geistdocs, Vercel's documentation template built with Next.js and Fumadocs — MDX authoring, configuration, AI chat, i18n, feedback,…

Emulated GitHub REST API for local development and testing. Use when the user needs to interact with GitHub API endpoints locally, test GitHub integrations,…

Emulated Google OAuth 2.0, OpenID Connect, Gmail, Calendar, และ Drive สำหรับการพัฒนาและทดสอบในเครื่อง ใช้เมื่อผู้ใช้ต้องการทดสอบการลงชื่อเข้าใช้ด้วย Google…

Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from…

Ink terminal renderer for json-render that turns JSON specs into interactive terminal UIs. Use when working with @json-render/ink, building terminal UIs from…

Spin up a portless + tmux dev session for the Workflow SDK that gives each git worktree isolated `<branch>.<name>.localhost` URLs for the Next.js workbench and…

Orchestrated debugging coordinator. Triggers on frustration signals (stuck, hung, broken, waiting) and systematically triages: runtime logs → workflow status →…

Orchestrated debugging coordinator. Triggers on frustration signals (stuck, hung, broken, waiting) and systematically triages: runtime logs → workflow status →…

How to be rescued from a lonely island

How to be rescued from a lonely island

อะแดปเตอร์ Jotai สำหรับอินเทอร์เฟซ StateStore ของ json-render ใช้เมื่อรวม json-render กับ Jotai สำหรับการจัดการสถานะผ่าน @json-render/jotai

AI chat response rendering guidance — handling UIMessage parts, tool call displays, streaming states, and structured data presentation. Use when building…

AI chat response rendering guidance — handling UIMessage parts, tool call displays, streaming states, and structured data presentation. Use when building…

Schema definition, catalog creation, and spec streaming for AI-driven JSON rendering. Define schemas with typed specs and component catalogs using defineSchema and defineCatalog ; generate AI prompts automatically or with custom rules Support dynamic prop expressions including state binding ( $state , $bindState ), conditionals ( $cond ), templates, and computed functions Stream AI responses as JSONL patches using createSpecStreamCompiler for progressive spec building Built-in validation,...

โปรแกรมเรนเดอร์ภาพสำหรับ json-render ที่แปลงสเปก JSON เป็นภาพ SVG และ PNG ผ่าน Satori ใช้เมื่อทำงานกับ @json-render/image, สร้างภาพ OG จาก...

Convert JSON specifications into type-safe React component trees with state management and dynamic expressions. Supports declarative UI specs with element trees, two-way data binding via $bindState , conditional rendering, and computed expressions Built-in state management through StateProvider with optional external store integration (Redux, Zustand, XState) and JSON Pointer-based state paths Event system with action dispatching, state watchers, and four built-in actions: setState ,...

React Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when…

React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs…

ตัวเรนเดอร์ Remotion สำหรับ json-render ที่แปลงสเปกไทม์ไลน์ JSON เป็นวิดีโอ ใช้เมื่อทำงานกับ @json-render/remotion สร้างองค์ประกอบวิดีโอจาก…

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with…

แก้ไขความรู้ที่ล้าสมัยของ LLM เกี่ยวกับแพลตฟอร์ม Vercel และแนะนำผลิตภัณฑ์ใหม่ ถูกแทรกเมื่อเริ่มเซสชัน

Corrects outdated LLM knowledge about the Vercel platform and introduces new products. Injected at session start.

List the contents of an npm package tarball before publishing. Use when the user wants to see what files are included in an npm bundle, verify package…

Inspect npm package tarball contents before publishing to verify what files will be distributed. Lists exact files that would be uploaded to npm, helping catch missing or unwanted inclusions before publish Respects files field in package.json, .npmignore , and .gitignore rules to show the actual bundle contents Automatically builds the package, creates a tarball, displays contents, and cleans up in a single command Run from the package directory with a simple bash script; useful for...

ดูบันทึกการปรับใช้ Vercel ใช้เมื่อผู้ใช้พูดว่า "show logs", "check logs", "vercel logs" หรือ "มีอะไรผิดพลาดกับการปรับใช้

Context for working on the next AI SDK major release. Only use when explicitly invoked by the user (e.g. via '/major-version-mode'). Do NOT trigger…

Context for working on the next AI SDK major release. Only use when explicitly invoked by the user (e.g. via '/major-version-mode'). Do NOT trigger…

คำแนะนำจากผู้เชี่ยวชาญ Vercel Marketplace — การค้นหา ติดตั้ง และสร้างการผสานรวม ตัวแปรสภาพแวดล้อมที่จัดเตรียมโดยอัตโนมัติ การเรียกเก็บเงินแบบรวมศูนย์ และ...

คำแนะนำจากผู้เชี่ยวชาญ Vercel Marketplace — การค้นหา ติดตั้ง และสร้างการผสานรวม ตัวแปรสภาพแวดล้อมที่จัดเตรียมโดยอัตโนมัติ การเรียกเก็บเงินแบบรวมศูนย์ และ...

Adds AI Skills integration (Brand Review API) to a Sitecore Marketplace app. Use when the user wants to add AI-powered content analysis, brand review, or brand…

Adds a new extension point route to a Sitecore Marketplace app. Use when the user wants to add a custom field, dashboard widget, context panel, fullscreen…

Adds XM Cloud API integration to a Sitecore Marketplace app. Use when the user wants to access Sites, Pages, Authoring, Content Transfer, Search, or Agent APIs…

Builds UI components using the Blok design system for Sitecore Marketplace apps. Use when the user wants to create UI, add components, build a page layout, or…

Deploys a Sitecore Marketplace app to Vercel with correct CSP headers and configuration.

Scaffolds a new Sitecore Marketplace app using the official SDK. Use when the user wants to create a new marketplace app, start a new Sitecore project, or…

Sitecore Marketplace SDK API reference. Use when the user asks about SDK methods, types, queries, mutations, subscriptions, or how to use any Sitecore…

MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating…

คำแนะนำจากผู้เชี่ยวชาญสำหรับ micro — เฟรมเวิร์กไมโครเซอร์วิส HTTP แบบอะซิงโครนัสโดย Vercel ใช้เมื่อสร้างเซิร์ฟเวอร์ HTTP น้ำหนักเบา จุดสิ้นสุด API หรือไมโครเซอร์วิส…

Expert guidance for micro — asynchronous HTTP microservices framework by Vercel. Use when building lightweight HTTP servers, API endpoints, or microservices…

Emulated Microsoft Entra ID (Azure AD) OAuth 2.0 / OpenID Connect for local development and testing. Use when the user needs to test Microsoft sign-in locally,…

Migrates Temporal, Inngest, Trigger.dev, and AWS Step Functions workflows to the Workflow SDK. Use when porting Activities, Workers, Signals, step.run(),…

Expert guidance for @vercel/ncc — a simple CLI for compiling Node.js modules into a single file with all dependencies included. Use when bundling serverless…

อะแดปเตอร์ Next.js สำหรับฝังอีมูเลเตอร์โดยตรงในแอป Next.js ผ่าน @emulators/adapter-next ใช้เมื่อผู้ใช้ต้องการฝังอีมูเลเตอร์ใน Next.js ตั้งค่า…

Next.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with…

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization,…

Comprehensive Next.js development guidelines covering file structure, RSC patterns, data fetching, optimization, and error handling. Covers 15+ topic areas including file conventions, route segments, RSC boundaries, async patterns, metadata generation, and image/font optimization Provides runtime selection guidance, directive usage, and error handling strategies with specific file conventions like error.tsx and not-found.tsx Includes data fetching patterns, route handler best practices,...

แนวทางปฏิบัติที่ดีที่สุดของ Next.js - ข้อตกลงไฟล์, ขอบเขต RSC, รูปแบบข้อมูล, API แบบอะซิงก์, เมทาดาตา, การจัดการข้อผิดพลาด, ตัวจัดการเส้นทาง, การปรับแต่งภาพ/ฟอนต์,…

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization,…

แนวทางปฏิบัติที่ดีที่สุดของ Next.js - ข้อตกลงไฟล์, ขอบเขต RSC, รูปแบบข้อมูล, API แบบอะซิงก์, เมทาดาตา, การจัดการข้อผิดพลาด, ตัวจัดการเส้นทาง, การปรับแต่งภาพ/ฟอนต์,…

แนวทางปฏิบัติที่ดีที่สุดของ Next.js - ข้อตกลงไฟล์, ขอบเขต RSC, รูปแบบข้อมูล, API แบบอะซิงก์, เมทาดาตา, การจัดการข้อผิดพลาด, ตัวจัดการเส้นทาง, การปรับแต่งภาพ/ฟอนต์,…

If next-browser is not already on PATH, install @vercel/next-browser globally with the user's package manager, then playwright install chromium .

Mix static, cached, and dynamic content in a single Next.js route with Partial Prerendering. Enable with cacheComponents: true in next.config.ts ; replaces the old experimental.ppr flag Use the 'use cache' directive at file, component, or function level to cache async data with automatic key generation based on arguments and closures Control cache lifetime with cacheLife() using built-in profiles ( 'minutes' , 'hours' , 'days' , 'weeks' , 'max' ) or inline configuration with stale,...

Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag

Next.js 16 Cache Components guidance — PPR, use cache directive, cacheLife, cacheTag, updateTag, and migration from unstable_cache. Use when implementing…

Next.js 16 คอมโพเนนต์แคช - PPR, คำสั่ง use cache, cacheLife, cacheTag, updateTag

Next.js 16 คอมโพเนนต์แคช - PPR, คำสั่ง use cache, cacheLife, cacheTag, updateTag

Next.js 16 Cache Components guidance — PPR, use cache directive, cacheLife, cacheTag, updateTag, and migration from unstable_cache. Use when implementing…

Check Next.js compilation errors via a running dev server. Turbopack only. MANDATORY after every code edit before reporting work complete. Replaces `next…

next-forge expert guidance — production-grade Turborepo monorepo SaaS starter by Vercel. Use when working in a next-forge project, scaffolding with `npx…

ความช่วยเหลือจากผู้เชี่ยวชาญสำหรับ next-forge — เทมเพลต Turborepo ระดับการผลิตสำหรับแอป SaaS ของ Next.js ทำงานเมื่อมีคำถามเกี่ยวกับการติดตั้ง การตั้งค่า next-forge…

next-forge expert guidance — production-grade Turborepo monorepo SaaS starter by Vercel. Use when working in a next-forge project, scaffolding with `npx…

Automated Next.js version upgrades with official codemods and migration guide integration. Detects current Next.js version from package.json and fetches version-specific upgrade documentation from official guides Runs Next.js codemods automatically to handle breaking changes like async Request APIs, geo/IP property migrations, and dynamic import transformations Handles incremental upgrades for major version jumps (e.g., 13 → 14 → 15) and updates peer dependencies (React, React DOM,...

อัปเกรด Next.js เป็นเวอร์ชันล่าสุดตามคู่มือการย้ายข้อมูลและโค้ดม็อดอย่างเป็นทางการ

Upgrade Next.js to the latest version following official migration guides and codemods. Use when upgrading Next.js versions, running codemods, or migrating…

Upgrade Next.js to the latest version following official migration guides and codemods

Upgrade Next.js to the latest version following official migration guides and codemods

อัปเกรด Next.js เป็นเวอร์ชันล่าสุดตามคู่มือการย้ายข้อมูลและโค้ดม็อดอย่างเป็นทางการ ใช้เมื่ออัปเกรดเวอร์ชัน Next.js รันโค้ดม็อด หรือกำลังย้ายข้อมูล…

Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache…

Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache…

กำหนดค่า OAuth providers (Google, Apple, Microsoft, Facebook, GitHub, ฯลฯ) ให้ทำงานกับ URL สำหรับการพัฒนาในเครื่องแบบ portless ใช้เมื่อตั้งค่า OAuth redirect URIs,…

Vercel Observability expert guidance — Drains (logs, traces, speed insights, web analytics), Web Analytics, Speed Insights, runtime logs, custom events,…

คำแนะนำผู้เชี่ยวชาญด้านการสังเกตการณ์ของ Vercel — Drains (บันทึก, ร่องรอย, ข้อมูลเชิงลึกด้านความเร็ว, การวิเคราะห์เว็บ), การวิเคราะห์เว็บ, ข้อมูลเชิงลึกด้านความเร็ว, บันทึกการทำงานขณะรันไทม์, เหตุการณ์ที่กำหนดเอง,…

ดึงซอร์สโค้ดของ dependency เพื่อให้ AI agent มีบริบทการใช้งานที่ลึกซึ้งยิ่งขึ้น ใช้เมื่อ agent ต้องการเข้าใจวิธีการทำงานภายในของไลบรารี อ่าน…

Stripe payments integration guidance — native Vercel Marketplace setup, checkout sessions, webhook handling, subscription billing, and the Stripe SDK. Use when…

Stripe payments integration guidance — native Vercel Marketplace setup, checkout sessions, webhook handling, subscription billing, and the Stripe SDK. Use when…

Holistic, system-aware planning before implementing non-trivial tasks. Use when the task involves new features, architectural decisions, multi-file changes,…

Audit vercel-plugin performance on real-world projects. Extracts tool calls from Claude Code conversation logs, tests hook matching against actual inputs,…

Audit vercel-plugin performance on real-world projects. Extracts tool calls from Claude Code conversation logs, tests hook matching against actual inputs,…

Named .localhost URLs for dev servers, eliminating port conflicts and hardcoded port numbers. Assigns random free ports (4000–4999) automatically and routes named subdomains (e.g. myapp.localhost:1355 ) to the correct app via a reverse proxy on port 1355 Auto-detects git worktrees and prepends branch names as subdomain prefixes so each worktree gets a unique URL without configuration changes Supports HTTP/2 with HTTPS via auto-generated local CA certificates; includes CLI commands for proxy...

Use this skill when the user asks about PR status, CI failures, or review comments in the Next.js monorepo.

Minimal WebGPU shader library for creative coding and real-time graphics. Provides fullscreen passes, particles, compute shaders, render targets, and ping-pong…

แปลงสเปก JSON เป็นโครงสร้างต้นไม้ของ React component พร้อม props และ state management ที่ปลอดภัยต่อชนิดข้อมูล กำหนดแคตตาล็อกด้วย Zod schemas สำหรับ props ของ component จากนั้น implement component ด้วยความปลอดภัยของชนิดข้อมูลและการตรวจสอบความถูกต้องแบบอัตโนมัติ มีระบบ state management ในตัวผ่าน StateProvider ที่มีการผูกข้อมูลสองทาง ($bindState), การเรนเดอร์แบบมีเงื่อนไข และการเชื่อมต่อกับ store ภายนอก (Redux, Zustand, XState) ระบบเหตุการณ์ที่มีการ dispatch action, state watchers และ action ในตัวสี่แบบ (setState, pushState, removeState,...)

แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพ React และ Next.js จากทีมวิศวกรรมของ Vercel ควรใช้ทักษะนี้เมื่อเขียน ตรวจสอบ หรือปรับโครงสร้างโค้ด React/Next.js เพื่อให้แน่ใจว่ารูปแบบการทำงานมีประสิทธิภาพสูงสุด ทำงานเมื่อมีงานที่เกี่ยวข้องกับคอมโพเนนต์ React, หน้า Next.js, การดึงข้อมูล, การปรับแต่งบัณฑล หรือการปรับปรุงประสิทธิภาพ

React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure,…

ผู้ตรวจสอบแนวปฏิบัติที่ดีที่สุดของ React สำหรับไฟล์ TSX ทำงานหลังจากแก้ไขคอมโพเนนต์ TSX หลายตัวเพื่อรันรายการตรวจสอบคุณภาพแบบย่อที่ครอบคลุมโครงสร้างคอมโพเนนต์…

React Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when…

React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs…

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF…

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering…

Use this skill for changes touching vendored React, react-server-dom-webpack/* , or react-server layer boundaries.

อะแดปเตอร์ Redux สำหรับอินเทอร์เฟซ StateStore ของ json-render ใช้เมื่อรวม json-render กับ Redux หรือ Redux Toolkit สำหรับการจัดการสถานะผ่าน @json-render/redux

Release vercel-plugin — run gates, bump version, generate artifacts, commit, and push. Use when asked to "release", "ship", "bump and push", or "cut a release".

Release vercel-plugin — run gates, bump version, generate artifacts, commit, and push. Use when asked to "release", "ship", "bump and push", or "cut a release".

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from…

Best practices for Remotion - Video creation in React

Removes Open Harness hosted demo restrictions from a fork. Use when a maintainer wants to remove managed-template trial caps, hosted deployment gating, or…

Emulated Resend email API สำหรับการพัฒนาและทดสอบในเครื่อง ใช้เมื่อผู้ใช้ต้องการส่งอีเมลในเครื่อง ทดสอบขั้นตอนการทำงานของอีเมลธุรกรรม หรือใช้งาน magic…

Use this skill when writing or modifying tests that involve prefetch requests, client router navigations, or the segment cache. The createRouterAct utility from test/lib/router-act.ts lets you assert on prefetch and navigation responses in an end-to-end way without coupling to the exact number of requests or the protocol details. This is why most client router-related tests use this pattern.

Vercel Routing Middleware guidance — request interception before cache, rewrites, redirects, personalization. Works with any framework. Supports Edge, Node.js,…

คำแนะนำ Vercel Routing Middleware — การสกัดกั้นคำขอก่อนแคช การเขียนใหม่ การเปลี่ยนเส้นทาง การปรับแต่งส่วนบุคคล ทำงานร่วมกับเฟรมเวิร์กใดก็ได้ รองรับ Edge, Node.js,…

Vercel Runtime Cache API guidance — ephemeral per-region key-value cache with tag-based invalidation. Shared across Functions, Routing Middleware, and Builds.…

Vercel Runtime Cache API guidance — ephemeral per-region key-value cache with tag-based invalidation. Shared across Functions, Routing Middleware, and Builds.…

Use this skill when reproducing runtime-bundle, module-resolution, or user-bundle inclusion regressions.

Creates isolated Linux MicroVMs using Vercel Sandbox SDK. Use when building code execution environments, running untrusted code, spinning up dev servers,…

คำแนะนำจากผู้เชี่ยวชาญสำหรับ Satori — ไลบรารีของ Vercel ที่แปลง HTML และ CSS เป็น SVG ซึ่งมักใช้สร้างภาพ OG แบบไดนามิกสำหรับ Next.js และเฟรมเวิร์กอื่นๆ

Expert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks.

Set up Vercel CLI and project configuration. Use when the user says "set up Vercel", "configure Vercel", "link to Vercel", or "vercel init".

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with…

คำแนะนำผู้เชี่ยวชาญ shadcn/ui — CLI, การติดตั้งคอมโพเนนต์, รูปแบบการประกอบ, รีจิสทรีแบบกำหนดเอง, การปรับธีม, การรวม Tailwind CSS, และอินเทอร์เฟซคุณภาพสูง…

คำแนะนำผู้เชี่ยวชาญ shadcn/ui — CLI, การติดตั้งคอมโพเนนต์, รูปแบบการประกอบ, รีจิสทรีแบบกำหนดเอง, การปรับธีม, การรวม Tailwind CSS, และอินเทอร์เฟซคุณภาพสูง…

คอมโพเนนต์ shadcn-svelte ที่สร้างไว้ล่วงหน้าสำหรับแอป Svelte ที่ใช้ json-render ใช้เมื่อทำงานกับ @json-render/shadcn-svelte เพิ่มคอมโพเนนต์ UI มาตรฐานให้กับ Svelte…

Sign in with Vercel guidance — OAuth 2.0/OIDC identity provider for user authentication via Vercel accounts. Use when implementing user login with Vercel as…

Sign in with Vercel guidance — OAuth 2.0/OIDC identity provider for user authentication via Vercel accounts. Use when implementing user login with Vercel as…

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's…

คู่มือสำหรับการสร้างสกิลที่มีประสิทธิภาพ สกิลนี้ควรใช้เมื่อผู้ใช้ต้องการสร้างสกิลใหม่ (หรืออัปเดตสกิลที่มีอยู่) ที่ขยายความสามารถของ Claude…

Emulated Slack API for local development and testing. Use when the user needs to interact with Slack API endpoints locally, test Slack integrations, emulate…

Use when working on Slack agent/bot code, Chat SDK applications, Bolt for JavaScript projects, or projects using @chat-adapter/slack or @slack/bolt. Provides…

SolidJS renderer สำหรับ json-render ใช้เมื่อสร้างแคตตาล็อก/รีจิสทรีของ @json-render/solid, เชื่อมต่อผู้ให้บริการ Renderer, ใช้งาน bindings/actions หรือ...

Streamdown streaming-markdown expert guidance. Use when rendering streaming Markdown from AI models, building chat UIs with real-time content, or replacing…

Streaming-optimized React Markdown renderer with syntax highlighting, diagrams, math, and AI chat integration. Supports four optional plugins: code syntax highlighting via Shiki (200+ languages), Mermaid diagrams, LaTeX math rendering, and CJK text support Two rendering modes: streaming (with animated caret cursor for AI chat) and static (for blogs and documentation) Built-in security features including link safety modals, HTML tag filtering, URL sanitization, and configurable element...

Emulated Stripe API for local development and testing. Use when the user needs to process payments locally, test checkout flows, create customers, manage…

คำแนะนำจากผู้เชี่ยวชาญสำหรับ styled-jsx — CSS-in-JS แบบมีขอบเขตสำหรับ React และ Next.js ใช้เมื่อเขียนสไตล์ที่จำกัดขอบเขตเฉพาะคอมโพเนนต์ด้วยปลั๊กอิน babel styled-jsx โดยใช้…

Svelte 5 renderer for json-render that turns JSON specs into Svelte component trees. Use when working with @json-render/svelte, building Svelte UIs from JSON,…

ผู้เชี่ยวชาญด้านการดึงข้อมูล SWR ใช้เมื่อสร้างแอป React ที่มีการดึงข้อมูลฝั่งไคลเอ็นต์ การแคช การตรวจสอบซ้ำ การกลายพันธุ์ UI แบบมองโลกในแง่ดี การแบ่งหน้า หรือ...

SWR data-fetching expert guidance. Use when building React apps with client-side data fetching, caching, revalidation, mutations, optimistic UI, pagination, or…

Analyze and transform text files using bash tools

Turbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack…

คำแนะนำผู้เชี่ยวชาญ Turbopack ใช้เมื่อกำหนดค่า bundler ของ Next.js, ปรับแต่ง HMR, แก้ไขปัญหาการ build หรือทำความเข้าใจความแตกต่างระหว่าง Turbopack กับ Webpack…

Turborepo expert guidance. Use when setting up or optimizing monorepo builds, configuring task caching, remote caching, parallel execution, or the --affected…

Build system for JavaScript/TypeScript monorepos. Turborepo caches task outputs and runs tasks in parallel based on dependency graph.

Build system for JavaScript/TypeScript monorepos. Turborepo caches task outputs and runs tasks in parallel based on dependency graph.

ระบบสร้างโมโนเรโปที่มีการแคชงานอัจฉริยะ การทำงานแบบขนาน และการจัดการกราฟ dependencies โดยแคชผลลัพธ์ของงานและรันงานแบบขนานตาม dependencies ที่ประกาศไว้ รองรับการแคชระยะไกลสำหรับเวิร์กโฟลว์ CI/CD กรองและรันเฉพาะแพ็กเกจที่เปลี่ยนแปลงด้วย --affected หรือใช้ --filter เพื่อเลือกแพ็กเกจแบบกำหนดเอง กำหนดค่างานใน turbo.json ด้วยคีย์ dependsOn, outputs, inputs และ env รองรับการแทนที่เฉพาะแพ็กเกจผ่าน Package Configurations บังคับใช้โมโนเรโป...

Turborepo expert guidance. Use when setting up or optimizing monorepo builds, configuring task caching, remote caching, parallel execution, or the --affected…

When cloning is needed:

Guided workflow for updating Next.js documentation based on code changes and PR reviews. Analyzes git diffs to identify affected documentation files using a code-to-docs mapping reference Provides templates and conventions for scaffolding new feature docs (components, functions, config, guides, file conventions) Walks through step-by-step updates to existing documentation with user confirmation before each change Includes validation checklist and linting commands to ensure formatting...

เพิ่มรหัสโมเดลใหม่หรือลบรหัสโมเดลที่ล้าสมัยสำหรับผู้ให้บริการ AI SDK ที่มีอยู่ ใช้เมื่อเพิ่มโมเดลให้กับผู้ให้บริการ ลบโมเดลที่ล้าสมัย หรือประมวลผลรายการของ...

เพิ่มรหัสโมเดลใหม่หรือลบรหัสโมเดลที่ล้าสมัยสำหรับผู้ให้บริการ AI SDK ที่มีอยู่ ใช้เมื่อเพิ่มโมเดลให้กับผู้ให้บริการ ลบโมเดลที่ล้าสมัย หรือประมวลผลรายการของ...

คำแนะนำจากผู้เชี่ยวชาญ v0 โดย Vercel ใช้เมื่อพูดถึงการสร้างโค้ดด้วย AI การสร้างส่วนประกอบ UI จากพรอมต์ การใช้งาน v0 CLI การรวม v0 SDK/API หรือ…

v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK/API integration, or…

Use this skill when writing or optimizing performance-critical code paths in Next.js server internals — especially per-request hot paths like rendering, streaming, routing, and caching.

Emulated Vercel REST API สำหรับการพัฒนาและทดสอบในเครื่อง ใช้เมื่อผู้ใช้ต้องการโต้ตอบกับปลายทาง API ของ Vercel ในเครื่อง ทดสอบการผสานรวมของ Vercel…

ปรับใช้แอปพลิเคชันและเว็บไซต์ไปยัง Vercel ใช้ทักษะนี้เมื่อผู้ใช้ร้องขอการดำเนินการปรับใช้ เช่น "ปรับใช้แอปของฉัน" "ปรับใช้นี้ไปยังโปรดักชัน" "สร้างการปรับใช้ตัวอย่าง" "ปรับใช้และให้ลิงก์แก่ฉัน" หรือ "ทำให้ใช้งานจริง" ไม่ต้องมีการยืนยันตัวตน - ส่งคืน URL ตัวอย่างและลิงก์ปรับใช้ที่สามารถอ้างสิทธิ์ได้

Vercel Agent guidance — AI-powered code review, incident investigation, and SDK installation. Automates PR analysis and anomaly debugging. Use when configuring…

คำแนะนำ Vercel Agent — การตรวจสอบโค้ด การสอบสวนเหตุการณ์ และการติดตั้ง SDK ที่ขับเคลื่อนด้วย AI ช่วยวิเคราะห์ PR และแก้ไขข้อผิดพลาดโดยอัตโนมัติ ใช้เมื่อกำหนดค่า...

Vercel AI SDK (Python) - patterns for building LLM-powered apps with streaming, tools, hooks, and structured output

Vercel MCP and REST API expert guidance. Use when the agent needs live access to Vercel projects, deployments, environment variables, domains, logs, or…

คำแนะนำผู้เชี่ยวชาญ Vercel MCP และ REST API ใช้เมื่อเอเจนต์ต้องการเข้าถึงโปรเจกต์ Vercel แบบเรียลไทม์ การปรับใช้ ตัวแปรสภาพแวดล้อม โดเมน โลกรวมถึง…

Deploy, manage, and develop projects on Vercel from the command line

Vercel CLI expert guidance. Use when deploying, managing environment variables, linking projects, viewing logs, querying metrics, managing domains, or…

Command-line interface for deploying, managing, and developing Vercel projects locally and in CI/CD pipelines. Requires explicit project linking via vercel link (single project) or vercel link --repo (monorepos); commands must run from the directory containing .vercel/ folder Core workflows: vercel dev for local development, vercel deploy for preview deployments, vercel --prod for production Supports environment variables, domains, DNS, blob storage, integrations, Node.js backends,...

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login —…

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login —…

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React...

React composition patterns that scale. Use when refactoring components with

vercel-composition-patterns — an installable skill for AI agents, published by vercel-labs/openreview.

React composition patterns that scale. Use when refactoring components with

Instant deployment to Vercel with auto-detected frameworks and no authentication required. Packages projects into tarballs, auto-detects frameworks from package.json , and returns a live preview URL plus a claimable deployment link for account transfer Supports 20+ frameworks across React, Vue, Svelte, backend runtimes, and static HTML projects Excludes node_modules and .git from deployments to minimize package size Returns both human-readable URLs and JSON output for programmatic integration

Deploy applications and websites to Vercel with a claimable preview. Use when the user requests deployment actions like "deploy my app", "deploy and give me…

Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production",…

Vercel Firewall expert guidance — automatic DDoS mitigation, the Vercel WAF (custom rules, IP blocking, managed rulesets, rate limiting), Attack Mode, system…

คำแนะนำผู้เชี่ยวชาญ Vercel Firewall — การบรรเทา DDoS อัตโนมัติ, Vercel WAF (กฎที่กำหนดเอง, การบล็อก IP, ชุดกฎที่จัดการ, การจำกัดอัตรา), โหมดโจมตี, ระบบ…

Vercel Flags guidance — feature flags platform with unified dashboard, Flags Explorer, gradual rollouts, A/B testing, and provider adapters. Use when…

Vercel Flags guidance — feature flags platform with unified dashboard, Flags Explorer, gradual rollouts, A/B testing, and provider adapters. Use when…

Vercel Functions expert guidance — Serverless Functions, Edge Functions, Fluid Compute, streaming, Cron Jobs, and runtime configuration. Use when configuring,…

คำแนะนำจากผู้เชี่ยวชาญ Vercel Functions — Serverless Functions, Edge Functions, Fluid Compute, การสตรีม, Cron Jobs และการกำหนดค่ารันไทม์ ใช้เมื่อกำหนดค่า…

Guide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app…

ใช้สำหรับปรับต้นทุนและประสิทธิภาพของ Vercel ในโปรเจกต์ที่ deploy แล้ว โดยเฉพาะ Next.js, SvelteKit, Nuxt และแอป Astro ที่มีข้อจำกัด เก็บข้อมูลเมตริก การใช้งาน การตั้งค่าโปรเจกต์ และผลสแกนโค้ดของ Vercel ก่อน จากนั้นตรวจสอบเฉพาะตัวเลือกที่มีข้อมูลเมตริกรองรับ แล้วจัดลำดับคำแนะนำที่อ้างอิงจากไฟล์ที่ยืนยันแล้วและเอกสาร Vercel/เฟรมเวิร์กที่อิงเวอร์ชัน เรียกใช้เมื่อต้องการลดค่าใช้จ่าย Vercel, เส้นทางที่ช้าหรือแพง, โอกาสในการแคช, Function Invocations, Build Minutes, Fast Data Transfer, Core...

ดำเนินการประเมินผลสดกับ vercel-plugin เพื่อตรวจสอบพฤติกรรมของ hook, การแทรกทักษะ, ความถูกต้องของการตัดซ้ำ และความครอบคลุม เริ่มเซสชัน Claude Code จริง…

ดำเนินเซสชันการประเมินผลแบบสดกับ vercel-plugin เพื่อตรวจสอบพฤติกรรมของฮุค การแทรกสกิล ความถูกต้องของการตัดซ้ำ และความครอบคลุม เริ่มเซสชัน Claude Code จริง…

Building Python backend services using Vercel's experimentalServices API. Use when creating Python backends, or multi-service projects with a Python backend…

คำแนะนำ Vercel Queues (รุ่นเบต้าสาธารณะ) — การสตรีมเหตุการณ์ที่ทนทานพร้อมหัวข้อ กลุ่มผู้บริโภค การลองซ้ำ และการจัดส่งที่ล่าช้า $0.60/1M ops ขับเคลื่อน Workflow…

Vercel Queues guidance (public beta) — durable event streaming with topics, consumer groups, retries, and delayed delivery. $0.60/1M ops. Powers Workflow…

แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพ React และ Next.js จากทีมวิศวกรรมของ Vercel ควรใช้ทักษะนี้เมื่อเขียน ตรวจสอบ หรือปรับโครงสร้าง React/Next.js…

คู่มือการปรับปรุงประสิทธิภาพ React และ Next.js พร้อมกฎ 64 ข้อที่จัดลำดับความสำคัญใน 8 หมวดหมู่ จัดเรียงตามระดับผลกระทบ ตั้งแต่การจัดการ waterfall ที่สำคัญและการปรับแต่ง bundle ไปจนถึงรูปแบบขั้นสูง แต่ละกฎประกอบด้วยตัวอย่างโค้ดที่ถูกต้องและไม่ถูกต้องพร้อมคำอธิบาย ครอบคลุม 8 ด้าน: รูปแบบ async, ขนาด bundle, การแคชฝั่งเซิร์ฟเวอร์, การดึงข้อมูลฝั่งไคลเอ็นต์, การปรับปรุงการเรนเดอร์ซ้ำ, ประสิทธิภาพการเรนเดอร์, ประสิทธิภาพ JavaScript และรูปแบบขั้นสูง ออกแบบมาเพื่อใช้ระหว่างคอมโพเนนต์...

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพ React และ Next.js จากทีมวิศวกรรมของ Vercel ควรใช้ทักษะนี้เมื่อเขียน ตรวจสอบ หรือปรับปรุงโค้ด React/Next.js…

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพ React และ Next.js จากทีมวิศวกรรมของ Vercel ควรใช้ทักษะนี้เมื่อเขียน ตรวจสอบ หรือปรับโครงสร้างโค้ด React/Next.js…

แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพ React และ Next.js จากทีมวิศวกรรมของ Vercel ควรใช้ทักษะนี้เมื่อเขียน ตรวจสอบ หรือปรับปรุงโค้ด React/Next.js…

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules. Covers eight rule categories prioritized by impact: list performance (FlashList, memoization, callback stability), animations (GPU properties, derived values), navigation, UI patterns, state management, rendering, monorepo structure, and configuration List performance rules address critical concerns like virtualizing large lists, optimizing images, and avoiding...

แนวทางปฏิบัติที่ดีที่สุดของ React Native และ Expo สำหรับการสร้างแอปมือถือที่มีประสิทธิภาพสูง ใช้

React Native and Expo best practices for building performant mobile apps. Use

แนวทางปฏิบัติที่ดีที่สุดสำหรับ React Native และ Expo ในการสร้างแอปมือถือที่มีประสิทธิภาพสูง ใช้

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view…

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view…

Vercel Sandbox guidance — ephemeral Firecracker microVMs for running untrusted code safely. Supports AI agents, code generation, and experimentation. Use when…

Vercel Sandbox guidance — ephemeral Firecracker microVMs for running untrusted code safely. Supports AI agents, code generation, and experimentation. Use when…

Vercel Services — deploy multiple services within a single Vercel project. Use for monorepo layouts or when combining a backend (Python, Go) with a frontend…

บริการ Vercel — ปรับใช้หลายบริการภายในโปรเจกต์ Vercel เดียว ใช้สำหรับโครงสร้างโมโนรีโปหรือเมื่อรวมแบ็กเอนด์ (Python, Go) เข้ากับฟรอนต์เอนด์…

Vercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data…

คำแนะนำจากผู้เชี่ยวชาญด้านการจัดเก็บข้อมูลของ Vercel — Blob, Edge Config และพื้นที่จัดเก็บข้อมูลใน Marketplace (Neon Postgres, Upstash Redis) ใช้เมื่อเลือก กำหนดค่า หรือใช้งานข้อมูล…

Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server…

Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server…

Vue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering…

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

web-animation-design — an installable skill for AI agents, published by vercel-labs/open-agents.

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…

ตรวจสอบโค้ด UI ว่าสอดคล้องกับแนวทางการออกแบบเว็บอินเทอร์เฟซหรือไม่ ใช้เมื่อถูกขอให้ "ตรวจสอบ UI ของฉัน", "ตรวจสอบการเข้าถึง", "ตรวจสอบการออกแบบ", "ตรวจสอบ UX" หรือ "ตรวจสอบเว็บไซต์ของฉัน…

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…

Create and record scripted browser demo videos with webreel. Generates MP4, GIF, or WebM recordings with cursor animation, keystroke overlays, and sound…

สร้างเวิร์กโฟลว์ที่ทนทานและสามารถดำเนินการต่อได้โดยใช้ Workflow DevKit ของ Vercel ใช้เมื่อสร้างเวิร์กโฟลว์ที่ต้องอยู่รอดจากการรีสตาร์ท หยุดชั่วคราวเพื่อรอเหตุการณ์ภายนอก…

Vercel Workflow DevKit (WDK) expert guidance. Use when building durable workflows, long-running tasks, API routes or agents that need pause/resume, retries,…

คำแนะนำจากผู้เชี่ยวชาญ Vercel Workflow DevKit (WDK) ใช้เมื่อสร้างเวิร์กโฟลว์ที่ทนทาน งานที่ใช้เวลานาน เส้นทาง API หรือเอเจนต์ที่ต้องการหยุดชั่วคราว/ดำเนินการต่อ การลองใหม่…

เวิร์กโฟลว์ที่ทนทานและสามารถดำเนินการต่อได้ พร้อมการจัดลำดับขั้นตอนแบบขั้นบันได ฮุกสำหรับเหตุการณ์ภายนอก และรองรับเอเจนต์ AI ในตัว รองรับโหมดการทำงานสามแบบ: ฟังก์ชันเวิร์กโฟลว์ (เลเยอร์การจัดลำดับ), ฟังก์ชันขั้นตอน (เข้าถึง Node.js เต็มรูปแบบ พร้อมการลองใหม่อัตโนมัติและการคงผลลัพธ์ไว้) และ DurableAgent สำหรับเวิร์กโฟลว์ที่ขับเคลื่อนด้วย AI พร้อมการรวมเครื่องมือ หยุดเวิร์กโฟลว์ชั่วคราวที่ฮุกเพื่อรอเหตุการณ์ภายนอก จากนั้นดำเนินการต่อจากเส้นทาง API; ฮุกสนับสนุนเหตุการณ์เดี่ยวหรือรูปแบบหลายเหตุการณ์ที่วนซ้ำได้ด้วย...

Install and configure Vercel Workflow SDK before it exists in node_modules. Use when the user asks to "install workflow", "set up workflow", "add durable…

Produce an API reference page that documents a single API surface (function, component, file convention, directive, or config option). The page should be concise, scannable, and example-driven.

Produce a technical guide that teaches a real-world use case through progressive examples. Concepts are introduced only when the reader needs them.

ตรวจสอบเอกสาร/ร้อยแก้วว่าสอดคล้องกับแนวทางการเขียนหรือไม่ ใช้เมื่อถูกขอให้ "ตรวจสอบเอกสารของฉัน", "ตรวจสอบรูปแบบการเขียน", "ตรวจสอบร้อยแก้ว", "ตรวจสอบน้ำเสียงและโทนของเอกสาร" หรือ "ตรวจสอบหน้านี้เทียบกับคู่มือการเขียน

XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.

YAML wire format for json-render with streaming parser, prompt generation, and AI SDK transform. Use when working with @json-render/yaml, YAML-based spec…

Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.