Skills Vercel

Add a vendor-official or community adapter to the Chat SDK catalog and docs — adapters.json registry, chat/adapters catalog entry, the docs MDX page,…

Add a new diagnostic code following the defineDiagnostics() conventions from nostics

คู่มือสำหรับการเพิ่มตัวอย่างฟังก์ชัน AI ใหม่ เพื่อทดสอบคุณสมบัติเฉพาะกับ API ของผู้ให้บริการจริง

Guide for adding new AI SDK harness packages. Use when creating a new @ai-sdk/harness-<name> package that adapts a coding-agent runtime to HarnessV1.

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

Admin UI and operator surface debugging for vercel-openclaw: command shell design, admin actions, request core, status panels, launch verification UI, channel…

สร้างและดูแลบันทึกการตัดสินใจทางสถาปัตยกรรม (ADRs) ที่ปรับให้เหมาะสมกับเวิร์กโฟลว์การเขียนโค้ดแบบเอเจนต์ ใช้เมื่อคุณต้องการเสนอ เขียน อัปเดต ยอมรับ/ปฏิเสธ…

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

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

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

การตรวจสอบเบราว์เซอร์อัตโนมัติสำหรับเซิร์ฟเวอร์พัฒนา ทำงานเมื่อเซิร์ฟเวอร์พัฒนาเริ่มต้นเพื่อทำการตรวจสอบภาพเบื้องต้นกับ agent-browser — ยืนยันว่าโหลดหน้าเว็บได้…

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

Python `ai` SDK — models, providers, streams, events, tools, agents, hooks, MCP, AI SDK UI, structured output, and media generation

สร้างข้อความ รูปภาพ และวิดีโอจากเทอร์มินัลโดยใช้โมเดล AI

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

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

คำแนะนำผู้เชี่ยวชาญ Vercel AI Gateway ใช้เมื่อกำหนดค่าเส้นทางโมเดล การสำรองผู้ให้บริการ การติดตามต้นทุน หรือการจัดการผู้ให้บริการ AI หลายรายผ่านระบบรวมศูนย์…

รูปแบบการคงอยู่ของการสร้าง AI — รหัสเฉพาะ, URL ที่สามารถเข้าถึงได้, การจัดเก็บในฐานข้อมูล, และการติดตามต้นทุนสำหรับการสร้าง LLM ทุกครั้ง

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

ตอบคำถามเกี่ยวกับ AI SDK และช่วยสร้างฟีเจอร์ที่ขับเคลื่อนด้วย AI ใช้เมื่อนักพัฒนา: (1) ถามเกี่ยวกับฟังก์ชัน AI SDK เช่น generateText, streamText,…

ตอบคำถามเกี่ยวกับ AI SDK และช่วยสร้างฟีเจอร์ที่ขับเคลื่อนด้วย AI ใช้เมื่อนักพัฒนา: (1) ถามเกี่ยวกับฟังก์ชัน AI SDK เช่น generateText, streamText,…

แปลงข้อมูล Next.js bundle analyzer เป็น NDJSON และสำรวจข้อมูลนั้น

Generates agent-friendly markdown documentation for API routes. Use when user says "generate docs", "document this API", "create API documentation", or "make…

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

สอบถามเอกสาร Next.js ผ่าน RAG API สำหรับหัวข้อ: $ARGUMENTS

Migrate an Astro application from Webflow Cloud to Vercel. Use this skill when a user wants to move, migrate, or port an Astro app off Webflow Cloud onto…

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

Auth and store debugging for vercel-openclaw: admin-secret mode, Sign in with Vercel, session cookies, CSRF, LOCAL_READ_ONLY, Redis vs memory store, keyspace…

ใช้ทักษะนี้เมื่อสร้างหรือปรับเปลี่ยนทักษะของเอเจนต์ใน .agents/skills/

Automate and inspect running zero-native WebView shell apps via the built-in automation server. Use when the user asks to test the app, list windows, take a…

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

บริการคลาวด์ AWS ที่จำลองขึ้น (S3, SQS, IAM, STS) สำหรับการพัฒนาและทดสอบในเครื่อง ใช้เมื่อผู้ใช้ต้องการโต้ตอบกับปลายทาง API ของ AWS ในเครื่อง ทดสอบ S3…

ย้อนกลับ pull request ของ Next.js ที่รวมแล้วจาก canary ไปยังสาขารุ่นก่อนหน้า เช่น next-16-2 ใช้เมื่อผู้ใช้ขอให้ย้อนกลับ, cherry-pick, หรือเปิด...

ตรวจสอบระยะเวลาแอนิเมชัน บังคับใช้สเกลตัวอักษร ตรวจสอบการเข้าถึงของคอมโพเนนต์ และป้องกันรูปแบบการจัดวางที่ไม่เหมาะสมในโปรเจกต์ Tailwind CSS ใช้เมื่อ...

เปรียบเทียบภาพเว็บเพจหรือองค์ประกอบระหว่างสอง URL หรือรูปภาพ จับภาพหน้าจอในมุมมองเดสก์ท็อป มือถือ (375x812) หรือแท็บเล็ต (768x1024) พร้อมเลื่อนหน้าเต็มหน้าจอแบบไม่บังคับ รองรับ CSS selectors เพื่อแยกองค์ประกอบเฉพาะ และรองรับ URL แบบ file://, http://, https:// หรือเส้นทางรูปภาพในเครื่อง สร้างผลลัพธ์ในรูปแบบ markdown พร้อมอัปโหลดภาพไปยัง 0x0.st (หรือ GitHub Gist) โดยอัตโนมัติเพื่อการรวม PR ที่ง่ายดาย รวมถึงการตรวจจับการป้องกันการปรับใช้ Vercel และการรวม GitHub CLI...

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

ชุดทดสอบแบบ end-to-end สำหรับ vercel-plugin ทำงานผ่านโปรเจกต์จริงด้วยการฉีดสกิล เปิดเซิร์ฟเวอร์สำหรับพัฒนา ตรวจสอบว่าทุกอย่างทำงานได้ วิเคราะห์…

เรียกใช้สถานการณ์ประเมินผลของ vercel-plugin ใน Vercel Sandboxes แทนแผง WezTerm ในเครื่อง จัดเตรียม microVM ชั่วคราวที่ติดตั้ง Claude Code และปลั๊กอินไว้ล่วงหน้า…

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

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

Build or adapt a Shopify storefront with Vercel Shop source-backed patterns. Use when creating, redesigning, refactoring, or reviewing storefront routes,…

Companion skill for the Building Agents with eve course on Vercel Academy. Use when the user mentions "building agents with eve", "the eve course", "the bike…

คู่มือครอบคลุมสำหรับการสร้างส่วนประกอบ UI ที่ทันสมัย เข้าถึงได้ และประกอบได้ ครอบคลุมการจำแนกประเภทส่วนประกอบ (พื้นฐาน ส่วนประกอบ บล็อก เทมเพลต) หลักการออกแบบหลัก และการนำการเข้าถึงไปใช้ รวมถึง ARIA การนำทางด้วยแป้นพิมพ์ และการปฏิบัติตาม WCAG รวมถึงรูปแบบสำหรับ API ที่ประกอบได้ พหุสัณฐาน สถานะควบคุม/ไม่ควบคุม และรูปแบบ as-child สำหรับการประกอบองค์ประกอบที่ยืดหยุ่น ให้คำแนะนำเกี่ยวกับโทเค็นการออกแบบ ระบบธีม แนวทางการจัดสไตล์ และการใช้...

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js…

จัดเก็บและจัดการชุดทดสอบการตอบสนองของ API สำหรับการตรวจสอบการแยกวิเคราะห์ของผู้ให้บริการ ชุดทดสอบถูกจัดระเบียบในโฟลเดอร์ย่อย __fixtures__ ภายในแพ็กเกจของผู้ให้บริการ โดยใช้หลักการตั้งชื่อตามตัวอย่างที่มีอยู่ รองรับรูปแบบการทดสอบสองแบบ: generateText (บันทึกการตอบสนองดิบไปยังคอนโซลและคัดลอกไปยังชุดทดสอบ) และ streamText (ใช้ตัวช่วย includeRawChunks และ saveRawChunks เพื่อบันทึกชิ้นส่วนสตรีมมิ่ง) แนะนำให้จัดเก็บการตอบสนองจริงจากผู้ให้บริการ เว้นแต่ข้อจำกัดด้านขนาดจะต้องใช้การตัดที่คงความหมาย...

Debug Vercel CDN caching — cache hit rate, stale content, revalidation behavior, ISR + PPR, per-request cache reasons (cacheReason), and costs.

Channel webhook triage for vercel-openclaw Slack/Telegram/Discord/WhatsApp issues: prove deployment state, collect admin readiness endpoints, build…

Webhook route parity audit for channel delivery changes: ensure terminal paths log, record lastForward, classify failures, and refresh stale sandbox port URLs.

เขียนแชทบอทเพียงครั้งเดียว แล้วนำไปใช้บน Slack, Teams, Google Chat, Discord, GitHub และ Linear ชุดพัฒนา TypeScript แบบรวมศูนย์พร้อมตัวจัดการเหตุการณ์ที่ไม่ขึ้นกับแพลตฟอร์ม (การกล่าวถึง ข้อความ ปฏิกิริยา คำสั่งแบบสแลช การดำเนินการ) และรูปแบบข้อความที่ปรับให้เป็นมาตรฐานในทุกแพลตฟอร์ม รองรับการสตรีมในตัวสำหรับการตอบสนองของ AI ผ่านการผสานรวม AI SDK พร้อมการ์ดแบบโต้ตอบที่ใช้ JSX ซึ่งมีปุ่ม เมนูแบบเลื่อนลง และโมดอลฟอร์ม ตัวปรับสถานะแบบเสียบได้สำหรับ Redis, PostgreSQL หรือการคงอยู่ของข้อมูลในหน่วยความจำ ตัวจัดการเว็บฮุค...

คำแนะนำจากผู้เชี่ยวชาญ Vercel Chat SDK ใช้เมื่อสร้างแชทบอทข้ามแพลตฟอร์ม — Slack, Telegram, Microsoft Teams, Discord, Google Chat, GitHub, Linear — ด้วย...

SDK TypeScript แบบรวมสำหรับสร้างแชทบอทที่ทำงานบน Slack, Teams, Google Chat, Discord, Telegram, GitHub, Linear และ WhatsApp เขียนตรรกะบอทครั้งเดียว ใช้งานได้ทุกที่

Use for packages/cli changes that affect command UX, prompts, help, output layout, progress, success, warnings, errors, JSON/stdout/stderr contracts,…

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

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

ยูทิลิตี้สำหรับการสร้างโค้ดสำหรับ json-render ใช้เมื่อสร้างโค้ดจากสเปก UI สร้างตัวส่งออกโค้ดแบบกำหนดเอง ตรวจสอบสเปก หรือจัดลำดับพร็อพสำหรับ...

รูปแบบการจัดองค์ประกอบ React ที่ปรับขนาดได้ ใช้เมื่อปรับโครงสร้างคอมโพเนนต์ที่มีการแพร่กระจายของ boolean prop, สร้างไลบรารีคอมโพเนนต์ที่ยืดหยุ่น, หรือออกแบบ…

We need to translate the given English text into Thai. The text is about schema definition, catalog creation, AI prompt generation for json-render specs. It mentions functions like defineSchema, createSpecStreamCompiler, and dynamic prop expressions. We must preserve product names, protocol names, URLs, numbers, technical terms. The name "core" is not in the text, so we don't include it. We translate only the text inside <text>. No extra commentary, no labels. Let's translate carefully: "Schema definition, catalog creation, and AI prompt generation for json-render specs." -> "คำจำกัดความของสคีมา การสร้างแคตตาล็อก และการสร้างพรอมต์ AI สำหรับสเปก json-render" "Define schemas with typed specs and catalogs using defineSchema , then create catalogs mapping component names to their props and descriptions" -> "กำหนดสคีมาด้วยสเปกและแคตตาล็อกที่มีชนิดโดยใช้ defineSchema จากนั้นสร้างแคตตาล็อกที่แมป

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

สร้างวิดีโอ Remotion โดยใช้สุนทรียศาสตร์ของระบบออกแบบ Geist ใช้เมื่อถูกขอให้สร้างวิดีโอ อนิเมชั่น หรือกราฟิกเคลื่อนไหวที่ควรเป็นไปตามสไตล์ของ Vercel…

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

Cron and watchdog debugging for vercel-openclaw: Vercel Cron auth, persisted OpenClaw jobs, cron wake keys, token refresh, restore oracle, hot spare, and…

วิเคราะห์และแปลงข้อมูล CSV โดยใช้เครื่องมือ bash

บูตสแทรป d3k ในแอป AI แบบสแตนด์อโลน (Codex, Cursor, Claude Code): ตรวจจับ/ติดตั้ง dev3000, เริ่ม d3k เป็นรันไทม์, และใช้ล็อกแบบรวมกับเบราว์เซอร์ CDP…

ใช้ทักษะนี้เมื่อต้องการเปลี่ยนเส้นทาง require() แบบมีเงื่อนไข การนำเข้าเฉพาะ Node หรือการแยกสาขา edge/runtime

รัน DeepSec กับโปรเจกต์ Vercel ที่เช็คเอาท์จาก dev3000 ใช้สำหรับการตั้งค่า DeepSec แบบคลิกเดียว การบูตสแตรปบริบทโปรเจกต์ การประมวลผลรอบแรกแบบมีขอบเขต และ…

ใช้ deepsec (เครื่องสแกนช่องโหว่ที่ขับเคลื่อนด้วย AI) — เรียกใช้การสแกน กำหนดค่าโปรเจกต์ เขียนตัวจับคู่ และสร้างปลั๊กอิน เปิดใช้งานเมื่อผู้ใช้ถาม…

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

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

We need to translate the given English text to Thai. The text describes a skill for deploying to Vercel. We must preserve the name "deploy-to-vercel" but it's not in the text, so we don't include it. We translate the description, keeping technical terms like "Vercel", "git", "CLI", "URLs", "project.json", "repo.json", "--scope" as is. Also preserve numbers and protocol names. No extra commentary. The text: "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..." Note: There is a missing period after "environments" and before "Automatically

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

สคริปต์สำหรับการพัฒนาและตรวจสอบฟังก์ชัน AI SDK ในหลายผู้ให้บริการและความสามารถ จัดหมวดหมู่ตามประเภทฟังก์ชัน AI SDK (การสร้างข้อความ, การสตรีม, ผลลัพธ์ที่มีโครงสร้าง, เอ็มเบ็ดดิ้ง, การสร้างภาพ, เสียงพูด, การถอดเสียง, การจัดอันดับใหม่, และเอเจนต์) รูปแบบการตั้งชื่อไฟล์จะจับคู่ผู้ให้บริการและคุณสมบัติ (เช่น openai-tool-call.ts, amazon-bedrock-anthropic-cache-control.ts) เพื่อการระบุที่รวดเร็ว รวมถึงตัวช่วยยูทิลิตี้ที่ใช้ร่วมกันสำหรับการจัดการข้อผิดพลาด, การโหลดสภาพแวดล้อม,...

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

คำสั่งที่สร้างไว้ล่วงหน้าสำหรับ json-render — การจัดรูปแบบ คณิตศาสตร์ การจัดการสตริง และ i18n ใช้เมื่อทำงานกับ @json-render/directives การกำหนดคำสั่งที่กำหนดเอง…

Discord channel specialist workflow: debug interaction webhooks, Ed25519 signatures, deferred replies, workflow forwarding to /discord-webhook, integration…

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

แนวทางการรวมระบบส่งอีเมล — Resend (Vercel Marketplace ดั้งเดิม) พร้อมเทมเพลต React Email ครอบคลุมการตั้งค่า API, อีเมลธุรกรรม, โดเมน…

ทักษะนี้เข้ารหัสปรัชญาของ Emil Kowalski เกี่ยวกับการตกแต่ง UI การออกแบบคอมโพเนนต์ การตัดสินใจเรื่องแอนิเมชัน และรายละเอียดที่มองไม่เห็นซึ่งทำให้ซอฟต์แวร์รู้สึกดี

โปรแกรมจำลอง API แบบ drop-in สำหรับ Vercel, GitHub, Google, Slack, Apple, Microsoft และ AWS ใช้เมื่อผู้ใช้ต้องการเริ่มบริการจำลอง กำหนดค่า seed…

Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.

Enable next-intl-based i18n in the shop template — locale-prefixed URLs, per-locale message catalogs, and a locale switcher. Use when the user wants "locale…

Wire Shopify metaobjects as the CMS for homepage and marketing page content. Adds GraphQL queries for cms_homepage and cms_page metaobject types and transforms…

Enable Shopify Markets with multi-locale routing using next-intl. Use when the user wants to add internationalization, multi-locale support, locale-prefixed…

Replace the hardcoded nav and footer menus with Shopify-powered menus.

ผู้เชี่ยวชาญด้านคำแนะนำตัวแปรสภาพแวดล้อมของ Vercel ใช้เมื่อทำงานกับไฟล์ .env คำสั่ง vercel env โทเค็น OIDC หรือการจัดการการกำหนดค่าตามสภาพแวดล้อม

Build durable backend AI agents with the eve framework. Use when creating, editing, or debugging an eve project — agent instructions, skills, tools,…

Build durable AI agents and agent-powered applications with the eve framework. Use when creating, editing, or debugging an eve project, or when choosing…

Use Shopify AI Toolkit to inspect live Storefront and Customer Account GraphQL schemas for Vercel Shop work.

คุณเป็นผู้ช่วยสอนที่มีความรู้สำหรับหลักสูตร Building Filesystem Agents บน Vercel Academy คุณช่วยนักเรียนสร้างเอเจนต์ที่นำทางระบบไฟล์ด้วย bash เพื่อตอบคำถามเกี่ยวกับข้อมูลที่มีโครงสร้าง

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

Firewall and Vercel AI Gateway debugging for vercel-openclaw: network policy allowlists, OIDC token refresh, AI Gateway transform rules, firewall…

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

Flags SDK (แพ็คเกจ npm flags) เป็นชุดเครื่องมือสำหรับฟีเจอร์แฟล็กใน Next.js และ SvelteKit โดยจะเปลี่ยนฟีเจอร์แฟล็กแต่ละตัวให้เป็นฟังก์ชันที่เรียกใช้ได้ ทำงานร่วมกับผู้ให้บริการแฟล็กใดๆ ผ่านอะแดปเตอร์ และทำให้หน้าเว็บเป็นแบบคงที่โดยใช้รูปแบบการคำนวณล่วงหน้า Vercel Flags เป็นผู้ให้บริการหลัก ช่วยให้คุณจัดการแฟล็กจากแดชบอร์ด Vercel หรือ CLI vercel flags

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

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

Gateway and proxy debugging for vercel-openclaw: /gateway routing, HTML injection, WebSocket rewrite, gateway-token handoff, waiting page, status heartbeat,…

คำแนะนำจากผู้เชี่ยวชาญสำหรับ Geist ระบบการพิมพ์และตระกูลฟอนต์เริ่มต้นของ Vercel สำหรับอินเทอร์เฟซ Next.js ที่แม่นยำ ใช้เมื่อกำหนดค่า Geist Sans, Geist Mono หรือ…

สร้างประสบการณ์การเรียนรู้แบบสำรวจและโต้ตอบได้ในรูปแบบแอป Next.js โดยใช้ระบบออกแบบ Geist ใช้เมื่อสร้างบทเรียนแบบฝึกหัด คำอธิบายที่สามารถสำรวจได้…

คำแนะนำจากผู้เชี่ยวชาญสำหรับ Geistdocs เทมเพลตเอกสารของ Vercel ที่สร้างด้วย Next.js และ Fumadocs — การเขียน MDX, การกำหนดค่า, แชท AI, i18n, ข้อเสนอแนะ,…

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

Add GitHub API tools to AI agents using @github-tools/sdk — AI SDK, eve, Vercel Workflow, and Chat SDK. Covers tools, presets, approval control, token scoping,…

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

Use when building Hono web applications deployed to Vercel, or when the user asks about Hono APIs, routing, middleware, JSX, validation, testing, or streaming.…

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

Initialize a new Vercel Shop storefront with the official create-vercel-shop CLI. Use when the user wants to create, scaffold, start, or initialize a Vercel…

โปรแกรมเรนเดอร์เทอร์มินัลสำหรับ json-render ที่แปลงสเปก JSON เป็น UI เทอร์มินัลแบบโต้ตอบ ใช้เมื่อทำงานกับ @json-render/ink สร้าง UI เทอร์มินัลจาก...

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…

ผู้ประสานงานการดีบักที่ถูกจัดระบบ ทำงานเมื่อตรวจพบสัญญาณความหงุดหงิด (ติดขัด, ค้าง, เสีย, รอคอย) และดำเนินการคัดแยกอย่างเป็นระบบ: บันทึกการทำงานของรันไทม์ → สถานะเวิร์กโฟลว์ →…

วิธีการได้รับการช่วยเหลือจากเกาะร้าง

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

แนวทางการแสดงผลการตอบกลับของแชท AI — การจัดการส่วนประกอบของ UIMessage, การแสดงผลการเรียกใช้เครื่องมือ, สถานะการสตรีม, และการนำเสนอข้อมูลที่มีโครงสร้าง ใช้เมื่อสร้าง...

คำจำกัดความของสคีมา การสร้างแค็ตตาล็อก และการสตรีมสเปกสำหรับการเรนเดอร์ JSON ที่ขับเคลื่อนด้วย AI กำหนดสคีมาด้วยสเปกแบบมีชนิดและแค็ตตาล็อกส่วนประกอบโดยใช้ defineSchema และ defineCatalog สร้างพรอมต์ AI โดยอัตโนมัติหรือด้วยกฎที่กำหนดเอง รองรับนิพจน์พร็อพแบบไดนามิกรวมถึงการผูกสถานะ ($state, $bindState), เงื่อนไข ($cond), เทมเพลต และฟังก์ชันที่คำนวณได้ สตรีมการตอบสนองของ AI เป็นแพตช์ JSONL โดยใช้ createSpecStreamCompiler สำหรับการสร้างสเปกแบบค่อยเป็นค่อยไป การตรวจสอบความถูกต้องในตัว...

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

แปลงข้อกำหนด JSON เป็นโครงสร้างต้นไม้คอมโพเนนต์ React ที่ปลอดภัยต่อชนิดข้อมูล พร้อมการจัดการสถานะและนิพจน์แบบไดนามิก รองรับข้อกำหนด UI แบบประกาศพร้อมโครงสร้างต้นไม้องค์ประกอบ การผูกข้อมูลสองทางผ่าน $bindState การเรนเดอร์แบบมีเงื่อนไข และนิพจน์ที่คำนวณได้ การจัดการสถานะในตัวผ่าน StateProvider พร้อมการผสานรวมกับที่เก็บสถานะภายนอกที่เป็นทางเลือก (Redux, Zustand, XState) และเส้นทางสถานะแบบ JSON Pointer ระบบเหตุการณ์พร้อมการส่งแอ็กชัน ตัวเฝ้าดูสถานะ และแอ็กชันในตัวสี่รายการ: setState,...

React Email renderer สำหรับ json-render ที่แปลงสเปก JSON เป็นอีเมล HTML หรือข้อความธรรมดาโดยใช้ @react-email/components และ @react-email/render ใช้เมื่อ...

React Native renderer สำหรับ json-render ที่แปลง JSON specs เป็น native mobile UIs ใช้เมื่อทำงานกับ @json-render/react-native, สร้าง React Native UIs…

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

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

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

Create or modify a konsistent.json configuration file that enforces structural conventions in a TypeScript codebase. Use when the user wants to enforce…

Run the konsistent CLI, review all reported violations, and fix them in the codebase. Use when the user wants to "fix konsistent violations", "resolve…

Writing and maintaining lat.md documentation files — structured markdown that describes a project's architecture, design decisions, and test specs. Use when…

Launch verification and remote smoke debugging for vercel-openclaw: preflight, queue ping, ensureRunning, chatCompletions, wakeFromSleep, restorePrepared,…

Emulated Linear GraphQL API for local development and testing. Use when the user needs to test Linear integrations locally, emulate Linear issues, comments,…

ตรวจสอบเนื้อหา tarball ของแพ็กเกจ npm ก่อนเผยแพร่เพื่อยืนยันว่าไฟล์ใดจะถูกแจกจ่าย แสดงรายการไฟล์ที่แน่นอนที่จะอัปโหลดไปยัง npm ช่วยตรวจจับการรวมที่ขาดหายหรือไม่ต้องการก่อนเผยแพร่ เคารพฟิลด์ files ใน package.json, .npmignore และกฎ .gitignore เพื่อแสดงเนื้อหาบันเดิลจริง สร้างแพ็กเกจโดยอัตโนมัติ สร้าง tarball แสดงเนื้อหา และทำความสะอาดในคำสั่งเดียว รันจากไดเรกทอรีแพ็กเกจด้วยสคริปต์ bash อย่างง่าย มีประโยชน์สำหรับ...

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

บริบทสำหรับการทำงานในเวอร์ชันหลักถัดไปของ AI SDK จะใช้เฉพาะเมื่อผู้ใช้เรียกใช้อย่างชัดเจน (เช่น ผ่าน '/major-version-mode') ห้ามทริกเกอร์…

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

เพิ่มการผสานรวม AI Skills (Brand Review API) เข้ากับแอป Sitecore Marketplace ใช้เมื่อผู้ใช้ต้องการเพิ่มการวิเคราะห์เนื้อหาที่ขับเคลื่อนด้วย AI การตรวจสอบแบรนด์ หรือแบรนด์…

เพิ่มเส้นทางจุดขยายใหม่ให้กับแอป Sitecore Marketplace ใช้เมื่อผู้ใช้ต้องการเพิ่มฟิลด์ที่กำหนดเอง วิดเจ็ตแดชบอร์ด แผงบริบท เต็มหน้าจอ…

เพิ่มการรวม XM Cloud API เข้ากับแอป Sitecore Marketplace ใช้เมื่อผู้ใช้ต้องการเข้าถึง Sites, Pages, Authoring, Content Transfer, Search หรือ Agent APIs…

สร้างส่วนประกอบ UI โดยใช้ระบบออกแบบ Blok สำหรับแอปพลิเคชัน Sitecore Marketplace ใช้เมื่อผู้ใช้ต้องการสร้าง UI เพิ่มส่วนประกอบ สร้างเค้าโครงหน้า หรือ…

ปรับใช้แอป Sitecore Marketplace ไปยัง Vercel พร้อมด้วย CSP headers และการกำหนดค่าที่ถูกต้อง

สร้างโครงร่างแอป Sitecore Marketplace ใหม่โดยใช้ SDK อย่างเป็นทางการ ใช้เมื่อผู้ใช้ต้องการสร้างแอป Marketplace ใหม่ เริ่มโปรเจกต์ Sitecore ใหม่ หรือ…

เอกสารอ้างอิง API ของ Sitecore Marketplace SDK ใช้เมื่อผู้ใช้สอบถามเกี่ยวกับเมธอด, ชนิดข้อมูล, คำสั่งค้นหา, การกลายพันธุ์, การสมัครรับข้อมูลของ SDK หรือวิธีการใช้งาน Sitecore…

การรวม MCP Apps สำหรับ json-render ใช้เมื่อสร้างเซิร์ฟเวอร์ MCP ที่แสดง UI แบบโต้ตอบใน Claude, ChatGPT, Cursor หรือ VS Code หรือเมื่อรวม…

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

Emulated Microsoft Entra ID (Azure AD) OAuth 2.0 / OpenID Connect สำหรับการพัฒนาและทดสอบในเครื่อง ใช้เมื่อผู้ใช้ต้องการทดสอบการลงชื่อเข้าใช้ Microsoft ในเครื่อง…

Migrate applications from AI SDK 6.x to AI SDK 7.0. Use when upgrading Vercel AI SDK packages, fixing v7 migration errors, or when the user mentions AI SDK v6,…

โยกย้ายเวิร์กโฟลว์ของ Temporal, Inngest, Trigger.dev และ AWS Step Functions ไปยัง Workflow SDK ใช้เมื่อต้องการย้าย Activities, Workers, Signals, step.run(),…

Discovery skill for the Native SDK, the complete toolkit for building native desktop applications - views are declarative Native markup (.native), logic is…

คำแนะนำจากผู้เชี่ยวชาญสำหรับ @vercel/ncc — CLI อย่างง่ายสำหรับการคอมไพล์โมดูล Node.js ให้เป็นไฟล์เดียวพร้อมรวม dependencies ทั้งหมด ใช้เมื่อต้องการรวมไฟล์สำหรับ serverless…

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

โปรแกรมเรนเดอร์ Next.js สำหรับ json-render ที่แปลงสเปก JSON เป็นแอปพลิเคชัน Next.js แบบสมบูรณ์ พร้อมเส้นทาง เลย์เอาต์ SSR และเมทาดาตา ใช้เมื่อทำงานกับ…

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

แนวทางการพัฒนา Next.js อย่างครอบคลุม ครอบคลุมโครงสร้างไฟล์ รูปแบบ RSC การดึงข้อมูล การเพิ่มประสิทธิภาพ และการจัดการข้อผิดพลาด ครอบคลุมหัวข้อมากกว่า 15 หัวข้อ รวมถึงข้อกำหนดของไฟล์ ส่วนของเส้นทาง ขอบเขต RSC รูปแบบ async การสร้าง metadata และการเพิ่มประสิทธิภาพรูปภาพ/ฟอนต์ ให้คำแนะนำในการเลือก runtime การใช้ directive และกลยุทธ์การจัดการข้อผิดพลาดพร้อมข้อกำหนดของไฟล์เฉพาะ เช่น error.tsx และ not-found.tsx รวมถึงรูปแบบการดึงข้อมูล แนวทางปฏิบัติที่ดีที่สุดสำหรับ route handler...

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

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

หาก next-browser ยังไม่ได้อยู่ใน PATH ให้ติดตั้ง @vercel/next-browser แบบโกลบอลด้วยตัวจัดการแพ็กเกจของผู้ใช้ จากนั้นรัน playwright install chromium

คำแนะนำส่วนประกอบแคช Next.js 16 — PPR, คำสั่ง use cache, cacheLife, cacheTag, updateTag, และการย้ายจาก unstable_cache ใช้เมื่อนำไปใช้งาน…

We need to translate the given text from English to Thai. The text describes a Next.js feature: Partial Prerendering with cache components. We must preserve the name "next-cache-components" if it appears, but it doesn't appear in the text. The text includes technical terms like "Next.js", "Partial Prerendering", "cacheComponents", "next.config.ts", "experimental.ppr", "use cache", "cacheLife()", etc. We should keep those as is. Also preserve numbers, URLs, etc. No extra commentary. Just translate the descriptive parts. Let's break down the text: "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

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

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

We need to translate the given English text into Thai. The text describes an automated Next.js version upgrade tool. We must preserve the name "next-upgrade" if it appears, but it doesn't appear in the text. The text is a single paragraph. We should translate naturally, keeping technical terms like "Next.js", "package.json", "codemods", "React", "React DOM" as is. Also preserve numbers and version numbers like "13 → 14 → 15". No extra commentary. Translation: "การอัปเกรดเวอร์ชัน Next.js แบบอัตโนมัติพร้อมการผสานรวม codemods อย่างเป็นทางการและคู่มือการย้ายข้อมูล ตรวจจับเวอร์ชัน Next.js ปัจจุบันจาก package.json และดึงเอกสารการอัปเกรดเฉพาะเวอร์ชันจากคู่มืออย่างเป็นทางการ เรียกใช้ Next.js codemods โดยอัตโนมัติเพื่อจัดการกับการเปลี่ยนแปลงที่ทำให้เกิดปัญหา เช่น async Request APIs, การย้าย

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

คำแนะนำผู้เชี่ยวชาญ Next.js App Router ใช้เมื่อสร้าง แก้ไข หรือออกแบบสถาปัตยกรรมแอปพลิเคชัน Next.js — การกำหนดเส้นทาง, Server Components, Server Actions, Cache…

Migrate a Next.js application from Webflow Cloud to Vercel. Use this skill when a user wants to move, migrate, or port a Next.js app off Webflow Cloud onto…

Structured diagnostic code library for JavaScript/TypeScript. Turns errors and other conditions into typed, machine-readable `Diagnostic` instances with stable…

Nuxt adapter for embedding emulators directly in a Nuxt app via @emulators/adapter-nuxt. Use when the user needs to embed emulators in Nuxt, set up same-origin…

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

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

OpenClaw bootstrap, bundle, config, and restore-asset debugging for vercel-openclaw: openclaw.bundle sidecars, plugin discovery, channel catalog, restart…

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

คำแนะนำการรวมระบบชำระเงิน Stripe — การตั้งค่า Vercel Marketplace แบบเนทีฟ, เซสชันชำระเงิน, การจัดการเว็บฮุค, การเรียกเก็บเงินแบบสมัครสมาชิก และ Stripe SDK ใช้เมื่อ...

Use when building, reviewing, or optimizing web animations OR rendering performance (frame loops, scroll/viewport reveals, mount/unmount transitions,…

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

ตรวจสอบประสิทธิภาพของ vercel-plugin ในโปรเจกต์จริง โดยดึงการเรียกใช้เครื่องมือจากบันทึกการสนทนาของ Claude Code ทดสอบการจับคู่ฮุคกับอินพุตจริง…

We need to translate the given English text into Thai. The text describes a tool or skill named "portless" that provides .localhost URLs for dev servers, eliminates port conflicts, assigns random free ports, routes named subdomains, auto-detects git worktrees, supports HTTP/2 with HTTPS via local CA certificates, and includes CLI commands. We must preserve the name "portless" if it appears in the source text. The source text does not include the name "portless" explicitly; it starts with "Named .localhost URLs..." So we don't need to include the name. We must not add any extra commentary, labels, or formatting. Just translate the text as is. The text: "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

ใช้ทักษะนี้เมื่อผู้ใช้สอบถามเกี่ยวกับสถานะ PR, ความล้มเหลวของ CI หรือความคิดเห็นในการตรวจสอบใน monorepo ของ Next.js

ไลบรารีเชเดอร์ WebGPU ขนาดเล็กสำหรับการเขียนโค้ดเชิงสร้างสรรค์และกราฟิกแบบเรียลไทม์ รองรับพาสแบบเต็มหน้าจอ อนุภาค เชเดอร์คำนวณ เป้าหมายการเรนเดอร์ และการสลับบัฟเฟอร์แบบปิงปอง…

แปลงสเปก 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 สำหรับไฟล์ TSX ทำงานหลังจากแก้ไขคอมโพเนนต์ TSX หลายตัวเพื่อรันรายการตรวจสอบคุณภาพแบบย่อที่ครอบคลุมโครงสร้างคอมโพเนนต์…

โปรแกรมเรนเดอร์ React Email สำหรับ json-render ที่แปลงสเปก JSON เป็นอีเมล HTML หรือข้อความธรรมดาโดยใช้ @react-email/components และ @react-email/render ใช้เมื่อ...

React Native renderer สำหรับ json-render ที่แปลงสเปก JSON เป็น UI เนทีฟบนมือถือ ใช้เมื่อทำงานกับ @json-render/react-native, สร้าง UI React Native…

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing…

React PDF renderer สำหรับ json-render ใช้เมื่อสร้างเอกสาร PDF จากสเปก JSON ทำงานกับ @json-render/react-pdf หรือเรนเดอร์สเปกเป็น PDF…

React Three Fiber 3D renderer สำหรับ json-render ใช้เมื่อทำงานกับ @json-render/react-three-fiber, สร้างฉาก 3D จากสเปก JSON, เรนเดอร์...

ใช้ทักษะนี้สำหรับการเปลี่ยนแปลงที่เกี่ยวข้องกับ React ที่ถูก vendor, react-server-dom-webpack/* หรือขอบเขตเลเยอร์ react-server

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

ปลั๊กอิน Vercel สำหรับการปล่อย — รัน gates, เพิ่มเวอร์ชัน, สร้าง artifacts, คอมมิต และพุช ใช้เมื่อถูกขอให้ "release", "ship", "bump and push" หรือ "cut a release

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Remotion - การสร้างวิดีโอใน React

ลบข้อจำกัดการสาธิตที่โฮสต์โดย Open Harness ออกจาก fork ใช้เมื่อผู้ดูแลต้องการลบขีดจำกัดการทดลองใช้เทมเพลตที่มีการจัดการ การจำกัดการปรับใช้ที่โฮสต์ หรือ…

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

ใช้ทักษะนี้เมื่อเขียนหรือปรับเปลี่ยนการทดสอบที่เกี่ยวข้องกับคำขอ prefetch การนำทางของเราเตอร์ไคลเอ็นต์ หรือแคชเซกเมนต์ ยูทิลิตี createRouterAct จาก test/lib/router-act.ts ช่วยให้คุณยืนยันผลลัพธ์ของ prefetch และการนำทางในลักษณะ end-to-end โดยไม่ต้องผูกติดกับจำนวนคำขอที่แน่นอนหรือรายละเอียดโปรโตคอล นี่คือเหตุผลที่การทดสอบส่วนใหญ่ที่เกี่ยวข้องกับเราเตอร์ไคลเอ็นต์ใช้รูปแบบนี้

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

Vercel Runtime Cache API คำแนะนำ — แคชคีย์-ค่าแบบชั่วคราวต่อภูมิภาค พร้อมการทำให้เป็นโมฆะตามแท

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

สร้าง Linux MicroVM ที่แยกเป็นสัดส่วนโดยใช้ Vercel Sandbox SDK ใช้เมื่อสร้างสภาพแวดล้อมสำหรับรันโค้ด รันโค้ดที่ไม่น่าเชื่อถือ เปิดเซิร์ฟเวอร์สำหรับพัฒนา และอื่นๆ

Sandbox lifecycle debugging for vercel-openclaw: create, resume, stop, snapshotting, reset, stale-running reconciliation, persistent Sandbox v2 behavior, hot…

Vercel Sandbox v2 lifecycle expertise for vercel-openclaw: named persistent OpenClaw sandbox create/resume/stop/delete, persistent auto-save truth, manual…

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.

ตั้งค่า Vercel CLI และการกำหนดค่าโปรเจกต์ ใช้เมื่อผู้ใช้พูดว่า "set up Vercel", "configure Vercel", "link to Vercel" หรือ "vercel init

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

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

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

Integrate Shopify-validated Storefront or Customer Account GraphQL into Vercel Shop. Use after Shopify AI Toolkit has supplied and validated an API operation,…

คำแนะนำการลงชื่อเข้าใช้ด้วย Vercel — ผู้ให้บริการระบุตัวตน OAuth 2.0/OIDC สำหรับการยืนยันตัวตนผู้ใช้ผ่านบัญชี Vercel ใช้เมื่อต้องการให้ผู้ใช้เข้าสู่ระบบด้วย Vercel ในฐานะ…

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

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

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

ใช้เมื่อทำงานกับโค้ดเอเจนต์/บอทของ Slack, แอปพลิเคชัน Chat SDK, โปรเจกต์ Bolt สำหรับ JavaScript หรือโปรเจกต์ที่ใช้ @chat-adapter/slack หรือ @slack/bolt ให้...

Slack channel specialist workflow: debug Slack OAuth vs delivery-ready, /slack/events fast path, raw-body signatures, route repair, boot-message cleanup, and…

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

ผู้เชี่ยวชาญด้านการแนะนำสตรีมมิง-มาร์กดาวน์ ใช้เมื่อเรนเดอร์มาร์กดาวน์แบบสตรีมมิงจากโมเดล AI สร้าง UI แชทที่มีเนื้อหาแบบเรียลไทม์ หรือแทนที่…

We need to translate the given English text into Thai. The text describes a "streamdown" agent skill, which is a streaming-optimized React Markdown renderer. We must preserve the name "streamdown" if it appears, but it does not appear in the provided text. The text includes technical terms like "React Markdown renderer", "syntax highlighting", "Shiki", "Mermaid diagrams", "LaTeX math rendering", "CJK text support", "streaming", "static", "AI chat", "link safety modals", "HTML tag filtering", "URL sanitization". We should keep these terms as is or use common Thai translations where appropriate. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. So we keep "React Markdown renderer", "Shiki", "Mermaid", "LaTeX", "CJK", "AI chat", etc. We also need to ensure the translation is natural in Thai. Let's translate sentence by sentence: "Streaming-optimized React Markdown renderer

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

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

โปรแกรมเรนเดอร์ Svelte 5 สำหรับ json-render ที่แปลงสเปก JSON เป็นโครงสร้างคอมโพเนนต์ Svelte ใช้เมื่อทำงานกับ @json-render/svelte, สร้าง UI ของ Svelte จาก JSON,…

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

Migrate a TanStack Start application from Cloudflare Workers to Vercel. Use this skill when a user wants to move, migrate, or port a TanStack Start (or…

Migrate a TanStack Start application from Netlify to Vercel. Use this skill when a user wants to move, migrate, or port a TanStack Start (or TanStack) app off…

Telegram channel specialist workflow: debug /api/channels/telegram/webhook, native port 8787 /telegram-webhook, webhookSecret, boot cleanup, and post-accept…

วิเคราะห์และแปลงไฟล์ข้อความโดยใช้เครื่องมือ bash

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

คำแนะนำจากผู้เชี่ยวชาญ Turborepo ใช้เมื่อตั้งค่าหรือปรับแต่งการสร้างโมโนรีโป การกำหนดค่าแคชงาน แคชระยะไกล การทำงานแบบขนาน หรือ --affected…

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

Semantic spacing system for Tailwind CSS v4 using block (32px) and tab (4px) units. Use when building UIs with consistent spacing, dashboards, admin panels,…

Emulated Twilio REST APIs for local development and testing. Use when the user needs to test Twilio Messaging, Verify, Voice, phone numbers, webhooks, status…

เมื่อจำเป็นต้องโคลน:

เวิร์กโฟลว์แนะนำสำหรับการอัปเดตเอกสาร Next.js ตามการเปลี่ยนแปลงโค้ดและการตรวจสอบ PR วิเคราะห์ git diffs เพื่อระบุไฟล์เอกสารที่ได้รับผลกระทบโดยใช้การอ้างอิงการแมปโค้ดไปยังเอกสาร ให้เทมเพลตและข้อกำหนดสำหรับการสร้างเอกสารฟีเจอร์ใหม่ (คอมโพเนนต์ ฟังก์ชัน การกำหนดค่า คู่มือ ข้อกำหนดไฟล์) ดำเนินการอัปเดตเอกสารที่มีอยู่ทีละขั้นตอนพร้อมการยืนยันจากผู้ใช้ก่อนการเปลี่ยนแปลงแต่ละครั้ง รวมถึงรายการตรวจสอบการตรวจสอบความถูกต้องและคำสั่ง linting เพื่อให้แน่ใจว่ารูปแบบถูกต้อง...

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

Update an existing Vercel Shop storefront with newer template changes. Use when the user wants to check drift, plan an upgrade, or apply template updates to a…

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

ใช้ทักษะนี้เมื่อเขียนหรือปรับเส้นทางโค้ดที่สำคัญต่อประสิทธิภาพในส่วนภายในของเซิร์ฟเวอร์ Next.js โดยเฉพาะเส้นทางที่ถูกเรียกใช้บ่อยต่อคำขอ เช่น การเรนเดอร์ การสตรีม การกำหนดเส้นทาง และการแคช

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

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

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

Vercel AI SDK (Python) - รูปแบบสำหรับสร้างแอปที่ขับเคลื่อนด้วย LLM พร้อมการสตรีม เครื่องมือ ฮุค และเอาต์พุตที่มีโครงสร้าง

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

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

We need to translate the given text from English to Thai. The text describes a command-line interface for Vercel projects. We must preserve the name "vercel-cli" but it's not in the text, so we don't include it. Also preserve technical terms like "vercel link", "vercel dev", "vercel deploy", "vercel --prod", "CI/CD", "monorepos", "Node.js", etc. No extra commentary. Just translate the text inside <text>. The text: "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,..." We need to translate into Thai naturally. Keep technical terms in English as

ปรับใช้และจัดการโปรเจกต์บน Vercel โดยใช้การยืนยันตัวตนแบบโทเค็น ใช้เมื่อทำงานกับ Vercel CLI โดยใช้โทเค็นการเข้าถึงแทนการเข้าสู่ระบบ

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing…

รูปแบบการจัดองค์ประกอบ React สำหรับการปรับขนาดคอมโพเนนต์และหลีกเลี่ยงการเพิ่มจำนวนพร็อพแบบบูลีน ครอบคลุมสี่หมวดหมู่ลำดับความสำคัญ: สถาปัตยกรรมคอมโพเนนต์ การจัดการสถานะ รูปแบบการนำไปใช้งาน และ API ของ React 19 โดยแต่ละหมวดหมู่มีกฎและตัวอย่างโค้ดเฉพาะ รวมถึงรูปแบบที่มีชื่อมากกว่า 10 รูปแบบที่เกี่ยวข้องกับคอมโพเนนต์แบบผสม ผู้ให้บริการบริบท การยกระดับสถานะ และตัวแปรที่ชัดเจน ออกแบบมาสำหรับการปรับโครงสร้างคอมโพเนนต์ที่ใหญ่เกินไป การสร้างไลบรารีที่นำกลับมาใช้ใหม่ได้ และการตรวจสอบการตัดสินใจด้านสถาปัตยกรรมคอมโพเนนต์ React...

vercel-composition-patterns — ทักษะที่สามารถติดตั้งได้สำหรับเอเจนต์ AI เผยแพร่โดย vercel-labs/openreview

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

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

คำแนะนำ Vercel Flags — แพลตฟอร์มฟีเจอร์แฟล็กที่มีแดชบอร์ดแบบรวม, Flags Explorer, การเปิดตัวแบบค่อยเป็นค่อยไป, การทดสอบ A/B, และอะแดปเตอร์สำหรับผู้ให้บริการ ใช้เมื่อ...

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

คู่มือสำหรับการสร้าง กำหนดค่า และปรับใช้ไมโครฟรอนต์เอนด์บน Vercel ใช้ทักษะนี้เมื่อผู้ใช้พูดถึงไมโครฟรอนต์เอนด์ โซนหลายโซน หรือการแยกแอปพลิเคชัน...

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

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

กำลังสร้างบริการแบ็กเอนด์ Python โดยใช้ API experimentalServices ของ Vercel ใช้เมื่อสร้างแบ็กเอนด์ Python หรือโปรเจกต์ที่มีหลายบริการซึ่งมีแบ็กเอนด์ Python…

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

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

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

React Native และ Expo แนวทางปฏิบัติที่ดีที่สุดสำหรับแอปมือถือที่มีประสิทธิภาพสูง ครอบคลุมการเรนเดอร์รายการ แอนิเมชัน การนำทาง และโมดูลเนทีฟ ประกอบด้วยกฎแปดหมวดหมู่ที่จัดลำดับตามผลกระทบ: ประสิทธิภาพรายการ (FlashList, memoization, ความเสถียรของ callback), แอนิเมชัน (

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

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

คำแนะนำ Vercel Sandbox — ไมโคร VM Firecracker แบบชั่วคราวสำหรับรันโค้ดที่ไม่น่าเชื่อถืออย่างปลอดภัย รองรับ AI agents, การสร้างโค้ด และการทดลอง ใช้เมื่อ...

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

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

การตรวจสอบเรื่องราวทั้งหมด — อนุมานสิ่งที่ผู้ใช้กำลังสร้าง จากนั้นตรวจสอบโฟลว์ทั้งหมดแบบ end-to-end: เบราว์เซอร์ → API → ข้อมูล → การตอบสนอง เริ่มทำงานบนเซิร์ฟเวอร์สำหรับพัฒนา…

โปรแกรมเรนเดอร์ Vue 3 สำหรับ json-render ใช้เมื่อสร้าง UI ของ Vue จากสเปก JSON ทำงานกับ @json-render/vue กำหนดรีจิสทรีคอมโพเนนต์ Vue หรือเรนเดอร์…

ตรวจสอบโค้ด UI เพื่อให้สอดคล้องกับ Web Interface Guidelines ใช้

web-animation-design — ทักษะที่สามารถติดตั้งได้สำหรับเอเจนต์ AI เผยแพร่โดย vercel-labs/open-agents

ตรวจสอบโค้ด 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…

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

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

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

WhatsApp channel specialist workflow: debug Meta webhook verification/signatures, link-state projection, /whatsapp-webhook fast path, boot messages, and…

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

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

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

ติดตั้งและกำหนดค่า Vercel Workflow SDK ก่อนที่จะมีอยู่ใน node_modules ใช้เมื่อผู้ใช้ขอให้ "ติดตั้ง workflow", "ตั้งค่า workflow", "เพิ่ม durable…

สร้างหน้าเอกสารอ้างอิง API ที่บันทึกพื้นผิว API เดียว (ฟังก์ชัน คอมโพเนนต์ ข้อตกลงของไฟล์ ไดเรกทีฟ หรือตัวเลือกการกำหนดค่า) หน้าควรกระชับ อ่านง่าย และขับเคลื่อนด้วยตัวอย่าง

ผลิตคู่มือทางเทคนิคที่สอนกรณีการใช้งานในโลกจริงผ่านตัวอย่างแบบค่อยเป็นค่อยไป แนวคิดจะถูกนำเสนอเมื่อผู้อ่านต้องการเท่านั้น

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

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

รูปแบบสาย YAML สำหรับการเรนเดอร์ json พร้อมตัวแยกวิเคราะห์แบบสตรีม การสร้างพรอมต์ และการแปลง AI SDK ใช้เมื่อทำงานกับ @json-render/yaml, ข้อกำหนดที่ใช้ YAML…

Install Zero and load version-matched workflows with zero skills.

Discovery skill for zero-native, a Zig desktop app shell for building native apps with web UIs. Use when the user asks what zero-native is, how to build a…

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