[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6H9DS1H57RG46GDK307QKDZ":3,"skill-same:01M6H9DS1H57RG46GDK307QKDZ":87},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":54,"install":55,"resources":68},"01M6H9DS1H57RG46GDK307QKDZ","vercel-reference-architecture",null,"Implement Vercel reference architecture with best-practice project layout.\nUse when designing new Vercel integrations, reviewing project structure,\nor establishing architecture standards for Vercel applications.\nTrigger with phrases like \"vercel architecture\", \"vercel best practices\",\n\"vercel project structure\", \"how to organize vercel\", \"vercel layout\".","micsapp\u002Fmicstec-skills","micsapp","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F82411001?v=4","01M6GWCFQ6D3PV8EHNY62NN5VW","01M6GWCFVE1PA5HG0DKC7AMFJ3",4,"MIT","https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fclaude-code\u002Fplugins-plus-skills\u002Fplugins\u002Fsaas-packs\u002Fvercel-pack\u002Fskills\u002Fvercel-reference-architecture\u002FSKILL.md",[],[18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"architecture","vercel reference architecture","reference","vercel","applications","integrations","use","best practices","best-practice","standards","code","structure","project","io","trigger","how to","architecture standards","with","implement","for","2026-11-10 10:12:30",false,"---\nname: vercel-reference-architecture\ndescription: |\n  Implement Vercel reference architecture with best-practice project layout.\n  Use when designing new Vercel integrations, reviewing project structure,\n  or establishing architecture standards for Vercel applications.\n  Trigger with phrases like \"vercel architecture\", \"vercel best practices\",\n  \"vercel project structure\", \"how to organize vercel\", \"vercel layout\".\nallowed-tools: Read, Grep\nversion: 1.0.0\nlicense: MIT\nauthor: Jeremy Longshore \u003Cjeremy@intentsolutions.io>\ncompatible-with: claude-code, codex, openclaw\n---\n# Vercel Reference Architecture\n\n## Prerequisites\n- Understanding of layered architecture\n- Vercel SDK knowledge\n- TypeScript project setup\n- Testing framework configured\n\n## Instructions\n\nA well-structured Vercel project separates concerns across distinct layers that align with Vercel's deployment model: the edge layer (middleware and edge functions for authentication, redirects, and A\u002FB routing), the server layer (serverless API routes and server-side rendered pages), the client layer (static assets and client components), and the configuration layer (environment variables, headers, and rewrite rules). This separation makes each layer independently testable and ensures that decisions about caching, authentication, and data fetching are made at the optimal layer for the use case.\n\n### Step 1: Create Directory Structure\nSet up the project layout following the reference structure above. Organize API routes by domain feature rather than by HTTP method to keep related functionality co-located. Place middleware in the root-level `middleware.ts` file and scope it with path matchers to avoid running authentication logic on public static assets.\n\n### Step 2: Implement Client Wrapper\nCreate a typed wrapper around any external API clients used by your serverless functions. The wrapper should handle authentication header injection, response parsing, and error normalization so that calling code does not need to handle Vercel-specific fetch patterns directly.\n\n### Step 3: Add Error Handling\nImplement a consistent error response format for API routes that distinguishes client errors (4xx with actionable messages) from server errors (5xx with request IDs for log correlation). Avoid leaking internal error details in production responses — log the full error server-side and return only a sanitized message to the client.\n\n### Step 4: Configure Health Checks\nAdd a `\u002Fapi\u002Fhealth` endpoint that verifies connectivity to your external dependencies (databases, third-party APIs) and returns a structured status response. Configure Vercel's deployment protection rules to run health checks after each deployment before promoting to production traffic.\n\n## Output\n- Structured project layout with clear separation across edge, server, and client layers\n- Typed API client wrappers with consistent error normalization\n- Standardized error response format with log correlation IDs\n- Health check endpoint integrated into the deployment promotion flow\n\n## Error Handling\n\nSee `${CLAUDE_SKILL_DIR}\u002Freferences\u002Ferrors.md` for comprehensive error handling.\n\n## Examples\n\nSee `${CLAUDE_SKILL_DIR}\u002Freferences\u002Fexamples.md` for detailed examples.\n\n## Resources\n- [Vercel SDK Documentation](https:\u002F\u002Fvercel.com\u002Fdocs\u002Fsdk)\n- [Vercel Best Practices](https:\u002F\u002Fvercel.com\u002Fdocs\u002Fbest-practices)\n\n## Overview\n\nImplement Vercel reference architecture with best-practice project layout.","# Vercel Reference Architecture\n\n## Prerequisites\n- Understanding of layered architecture\n- Vercel SDK knowledge\n- TypeScript project setup\n- Testing framework configured\n\n## Instructions\n\nA well-structured Vercel project separates concerns across distinct layers that align with Vercel's deployment model: the edge layer (middleware and edge functions for authentication, redirects, and A\u002FB routing), the server layer (serverless API routes and server-side rendered pages), the client layer (static assets and client components), and the configuration layer (environment variables, headers, and rewrite rules). This separation makes each layer independently testable and ensures that decisions about caching, authentication, and data fetching are made at the optimal layer for the use case.\n\n### Step 1: Create Directory Structure\nSet up the project layout following the reference structure above. Organize API routes by domain feature rather than by HTTP method to keep related functionality co-located. Place middleware in the root-level `middleware.ts` file and scope it with path matchers to avoid running authentication logic on public static assets.\n\n### Step 2: Implement Client Wrapper\nCreate a typed wrapper around any external API clients used by your serverless functions. The wrapper should handle authentication header injection, response parsing, and error normalization so that calling code does not need to handle Vercel-specific fetch patterns directly.\n\n### Step 3: Add Error Handling\nImplement a consistent error response format for API routes that distinguishes client errors (4xx with actionable messages) from server errors (5xx with request IDs for log correlation). Avoid leaking internal error details in production responses — log the full error server-side and return only a sanitized message to the client.\n\n### Step 4: Configure Health Checks\nAdd a `\u002Fapi\u002Fhealth` endpoint that verifies connectivity to your external dependencies (databases, third-party APIs) and returns a structured status response. Configure Vercel's deployment protection rules to run health checks after each deployment before promoting to production traffic.\n\n## Output\n- Structured project layout with clear separation across edge, server, and client layers\n- Typed API client wrappers with consistent error normalization\n- Standardized error response format with log correlation IDs\n- Health check endpoint integrated into the deployment promotion flow\n\n## Error Handling\n\nSee `${CLAUDE_SKILL_DIR}\u002Freferences\u002Ferrors.md` for comprehensive error handling.\n\n## Examples\n\nSee `${CLAUDE_SKILL_DIR}\u002Freferences\u002Fexamples.md` for detailed examples.\n\n## Resources\n- [Vercel SDK Documentation](https:\u002F\u002Fvercel.com\u002Fdocs\u002Fsdk)\n- [Vercel Best Practices](https:\u002F\u002Fvercel.com\u002Fdocs\u002Fbest-practices)\n\n## Overview\n\nImplement Vercel reference architecture with best-practice project layout.",{"name":5,"author":43,"license":14,"version":44,"description":45,"allowed-tools":46,"compatible-with":47},"Jeremy Longshore \u003Cjeremy@intentsolutions.io>","1.0.0","Implement Vercel reference architecture with best-practice project layout.\nUse when designing new Vercel integrations, reviewing project structure,\nor establishing architecture standards for Vercel applications.\nTrigger with phrases like \"vercel architecture\", \"vercel best practices\",\n\"vercel project structure\", \"how to organize vercel\", \"vercel layout\".\n","Read, Grep","claude-code, codex, openclaw","master","3f5d983eb4ef375b749adcd6b07ec03bd82ae8a8","claude-code\u002Fplugins-plus-skills\u002Fplugins\u002Fsaas-packs\u002Fvercel-pack\u002Fskills\u002Fvercel-reference-architecture",0,"https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills","https:\u002F\u002Fgithub.com\u002Fmicsapp","2026-03-20 11:24:18",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add micsapp\u002Fmicstec-skills --skill vercel-reference-architecture",{"tool":61,"command":62},"bunx","bunx skills add micsapp\u002Fmicstec-skills --skill vercel-reference-architecture",{"tool":64,"command":65},"pnpm","pnpm dlx skills add micsapp\u002Fmicstec-skills --skill vercel-reference-architecture","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fclaude-code\u002Fplugins-plus-skills\u002Fplugins\u002Fsaas-packs\u002Fvercel-pack\u002Fskills\u002Fvercel-reference-architecture\u002FSKILL.md",true,[69,75,79,83],{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"references\u002Ferrors.md","REFERENCE","参考文档",337,"https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fclaude-code\u002Fplugins-plus-skills\u002Fplugins\u002Fsaas-packs\u002Fvercel-pack\u002Fskills\u002Fvercel-reference-architecture\u002Freferences\u002Ferrors.md",{"path":76,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":77,"sourceHtmlUrl":78},"references\u002Fexamples.md",238,"https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fclaude-code\u002Fplugins-plus-skills\u002Fplugins\u002Fsaas-packs\u002Fvercel-pack\u002Fskills\u002Fvercel-reference-architecture\u002Freferences\u002Fexamples.md",{"path":80,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":81,"sourceHtmlUrl":82},"references\u002Fkey-components.md",1388,"https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fclaude-code\u002Fplugins-plus-skills\u002Fplugins\u002Fsaas-packs\u002Fvercel-pack\u002Fskills\u002Fvercel-reference-architecture\u002Freferences\u002Fkey-components.md",{"path":84,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":85,"sourceHtmlUrl":86},"references\u002Fproject-structure.md",1342,"https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fclaude-code\u002Fplugins-plus-skills\u002Fplugins\u002Fsaas-packs\u002Fvercel-pack\u002Fskills\u002Fvercel-reference-architecture\u002Freferences\u002Fproject-structure.md",[88,123,152,172,192,216],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":104,"publishedAt":38},"01M6HBTJ02FXBFG9NYEHHYAP52","azure-apim-architecture","Analyzes and explains Azure API Management architecture decisions for enterprise API marketplace implementations using VNet Internal mode, Front Door, hybrid authentication, and multi-environment strategies. Use when discussing APIM component selection, network topology, cost optimization, or comparing alternatives like workspaces vs instances, VNet Internal vs External mode, or Front Door vs Application Gateway.","https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fcopilot-cli\u002Fcopilot-agent-skills\u002F.github\u002Fskills\u002Fazure-apim-architecture\u002FSKILL.md",[94,99],{"categoryNo":95,"categoryName":96,"taxonomyType":97,"taxonomyTypeDesc":98},"01JBSEEDCAT000000000000010","后端与接口","SCENARIO","使用场景",{"categoryNo":100,"categoryName":101,"taxonomyType":102,"taxonomyTypeDesc":103},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[18,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,37],"azure","azure apim architecture","component","authentication","gateway","topology","Optimization","network","api","team","environment","multi-environment","workspaces","instances","selection","strategies","azure api management","mode",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":137,"publishedAt":38},"01M6HBT7J4H082JEEA670B3EQ9","apiops-deployment","Guides deployment of Azure API Management infrastructure using Infrastructure as Code (Bicep\u002FTerraform), CI\u002FCD pipelines (GitHub Actions\u002FAzure DevOps), and APIOps workflows. Use when deploying APIM, creating pipelines, or implementing dev→test→prod promotion strategies.","https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fcopilot-cli\u002Fcopilot-agent-skills\u002F.github\u002Fskills\u002Fapiops-deployment\u002FSKILL.md",[129,130,133,136],{"categoryNo":95,"categoryName":96,"taxonomyType":97,"taxonomyTypeDesc":98},{"categoryNo":131,"categoryName":132,"taxonomyType":97,"taxonomyTypeDesc":98},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":134,"categoryName":135,"taxonomyType":97,"taxonomyTypeDesc":98},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":100,"categoryName":101,"taxonomyType":102,"taxonomyTypeDesc":103},[138,139,140,141,105,142,28,143,144,145,146,147,113,114,120,148,149,121,150,151],"deployment","apiops deployment","workflows","azure devops","infrastructure","infrastructure as code","actions","ci","github actions","github-actions","as","guides","CI\u002FCD","implementing",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":159,"publishedAt":38},"01M6HBT2HEA23THNE9E00GYQBE","apim-policy-authoring","Creates production-ready Azure API Management policy XML for authentication (OAuth 2.0, JWT validation, subscription keys), rate limiting, CORS configuration, error handling, and API transformations. Use when implementing API security, access control, or request\u002Fresponse processing logic.","https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fcopilot-cli\u002Fcopilot-agent-skills\u002F.github\u002Fskills\u002Fapim-policy-authoring\u002FSKILL.md",[158],{"categoryNo":95,"categoryName":96,"taxonomyType":97,"taxonomyTypeDesc":98},[160,161,162,163,105,108,113,114,164,24,165,166,167,168,169,121,170,171,151,37],"policy","authoring","apim policy authoring","security","access","ready","api security","Access Control","error","processing","cors configuration","production-ready",{"skillNo":173,"name":174,"nameZh":6,"description":175,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":176,"categories":177,"keywords":180,"publishedAt":38},"01M6HBSY65SB29J9WE9KYD0K6T","api-security-review","Reviews Azure API Management configurations for security vulnerabilities, OWASP API Security Top 10 compliance, VNet Internal mode validation, Private Link verification, and Azure Security Benchmark alignment. Use when performing security audits, pre-deployment validation, or compliance reviews.","https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fcopilot-cli\u002Fcopilot-agent-skills\u002F.github\u002Fskills\u002Fapi-security-review\u002FSKILL.md",[178,179],{"categoryNo":95,"categoryName":96,"taxonomyType":97,"taxonomyTypeDesc":98},{"categoryNo":100,"categoryName":101,"taxonomyType":102,"taxonomyTypeDesc":103},[181,163,182,113,166,183,105,138,184,185,186,187,114,188,121,189,190,191,122,37],"review","security review","api security review","benchmark","verification","owasp","owasp-api","alignment","azure security","reviews","top",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":198,"publishedAt":38},"01M6HBSRW4PDFE6K4F8JYPZQ05","jira-cli","Interact with Jira from the command line to create, list, view, edit, and transition issues, manage sprints and epics, and perform common Jira workflows. Use when the user asks about Jira tasks, tickets, issues, sprints, or needs to manage project work items.","https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fcopilot-cli\u002Fawesome-copilot-agents\u002Fskills\u002Fjira-cli\u002FSKILL.md",[],[199,200,201,140,202,203,204,205,113,206,207,208,209,210,211,30,212,213,214,215],"cli","jira","jira cli","init","tasks","create","issues","common","work","command","edit","list","view","project work","token","line","sprints",{"skillNo":217,"name":218,"nameZh":6,"description":219,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":220,"categories":221,"keywords":222,"publishedAt":38},"01M6HBSNS3JHMW603G47TWE31H","calculator","Performs arbitrary-precision arithmetic calculations including addition, subtraction, multiplication, division, and exponents. Use when the user asks to calculate, compute, or evaluate math expressions, or when precise decimal arithmetic is needed to avoid floating-point errors.","https:\u002F\u002Fgithub.com\u002Fmicsapp\u002Fmicstec-skills\u002Fblob\u002Fmaster\u002Fcopilot-cli\u002Fawesome-copilot-agents\u002Fskills\u002Fcalculator\u002FSKILL.md",[],[218,223,224,225,226,227,228,24,229,230],"npm","js","calculate","node","math","user","compute","errors"]