New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Vercel Architecture Variants

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Choose and implement Vercel architecture blueprints for different scales and use cases.

MITAuto-check passedDevelopment

Install Vercel Architecture Variants

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-architecture-variants -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace vercel-architecture-variants --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/vercel-architecture-variants .claude/skills/vercel-architecture-variants && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vercel-architecture-variants
GitHub stars
2.8k
Token cost
~2.1k tokens
SKILL.md length
506 words
Files
6 (incl. references)
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Choose and implement Vercel architecture blueprints for different scales and use cases.

  • Designing new Vercel projects
  • SKILL.md covers Overview, Prerequisites, Instructions and Architecture Decision Matrix, plus 6 more sections
  • Calls npx
  • Choosing between static

What it does

Vercel Architecture Variants is an agent skill from jeremylongshore/tons-of-skills-marketplace. Choose and implement Vercel architecture blueprints for different scales and use cases. Use when designing new Vercel projects, choosing between static, serverless, and edge architectures, or planning how to structure a multi-project Vercel deployment. Trigger with phrases like "vercel architecture", "vercel blueprint", "how to structure vercel", "vercel monorepo", "vercel multi-project".

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `references/errors.md`, `references/examples.md` and `references/variant-a-monolith-(simple).md`). Compatibility notes: Designed for Claude Code

It sits in Development, covering Monorepo tooling, Serverless and Deployment. It works with Vercel. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Designing new Vercel projects
  • Choosing between static
  • Edge architectures
  • Planning how to structure a multi-project Vercel deployment

Example prompts

  • “vercel architecture”
  • “vercel blueprint”
  • “how to structure vercel”
  • “/vercel-architecture-variants”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Grep

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • vercel.com
    • nextjs.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Vercel Architecture Variants loads about 2.1k tokens when it runs, and up to ~3.5k if it reads all its reference files. Until then it costs about 105 tokens; SKILL.md has 506 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~105
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 506 words, ~2,124 tokens.

Download SKILL.mdSave it as .claude/skills/vercel-architecture-variants/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
vercel-architecture-variants
description
Choose and implement Vercel architecture blueprints for different scales and use cases. Use when designing new Vercel projects, choosing between static, serverless, and edge architectures, or planning how to structure a multi-project Vercel deployment. Trigger with phrases like "vercel architecture", "vercel blueprint", "how to structure vercel", "vercel monorepo", "vercel multi-project".
allowed-tools
Read, Write, Edit, Grep
compatibility
Designed for Claude Code
version
1.18.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, vercel, architecture, scaling, patterns

Vercel Architecture Variants

Overview

Choose the right Vercel architecture based on team size, traffic patterns, and technical requirements. Covers five validated blueprints from static site to multi-project enterprise deployment, with migration paths between them.

Prerequisites

  • Understanding of team size and traffic requirements
  • Knowledge of Vercel deployment model (edge, serverless, static)
  • Clear SLA requirements

Instructions

Variant 1: Static Site (JAMstack)

Best for: Marketing sites, docs, blogs, landing pages Team size: 1-3 developers Traffic: Any (fully CDN-served)

project/
├── public/           # Static assets
├── src/
│   ├── pages/        # Static pages (SSG)
│   └── components/   # React components
├── vercel.json       # Headers, redirects
└── package.json
json
// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=3600, stale-while-revalidate=86400" }
      ]
    }
  ]
}

Key decisions:

  • No serverless functions needed
  • All pages pre-rendered at build time
  • ISR for pages that update periodically
  • Cost: minimal (mostly bandwidth)
Variant 2: Full-Stack Next.js (Most Common)

Best for: SaaS applications, dashboards, e-commerce Team size: 2-10 developers Traffic: Low to high

project/
├── src/
│   ├── app/
│   │   ├── api/           # Serverless API routes
│   │   ├── (marketing)/   # Static public pages
│   │   └── dashboard/     # Dynamic authenticated pages
│   ├── lib/               # Shared utilities
│   ├── components/        # UI components
│   └── middleware.ts      # Edge auth + routing
├── prisma/                # Database schema
├── vercel.json
└── package.json
json
// vercel.json
{
  "regions": ["iad1"],
  "functions": {
    "src/app/api/**/*.ts": {
      "maxDuration": 30,
      "memory": 1024
    }
  }
}

Key decisions:

  • Mixed rendering: SSG for marketing, SSR for dashboard
  • API routes in app/api/ for backend logic
  • Edge Middleware for auth (runs before every request)
  • Database in same region as functions
Variant 3: API-Only Backend

Best for: Mobile app backends, microservices, webhook processors Team size: 1-5 developers Traffic: API-driven

project/
├── api/                   # Serverless functions (one per route)
│   ├── users/
│   │   ├── index.ts       # GET/POST /api/users
│   │   └── [id].ts        # GET/PUT/DELETE /api/users/:id
│   ├── webhooks/
│   │   └── stripe.ts      # POST /api/webhooks/stripe
│   └── health.ts          # GET /api/health
├── lib/                   # Shared utilities
├── vercel.json
└── package.json
json
// vercel.json
{
  "regions": ["iad1", "cdg1"],
  "rewrites": [
    { "source": "/v1/(.*)", "destination": "/api/$1" }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "https://myapp.com" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,POST,PUT,DELETE" }
      ]
    }
  ]
}

Key decisions:

  • No frontend — pure API
  • CORS headers for cross-origin access
  • Version routing via rewrites (/v1/* → /api/*)
  • Multi-region for global API latency
Variant 4: Monorepo with Turborepo

Best for: Multiple related apps, shared component libraries Team size: 5-20 developers Traffic: Varies per app

monorepo/
├── apps/
│   ├── web/               # Main website (Vercel project 1)
│   │   ├── src/
│   │   ├── vercel.json
│   │   └── package.json
│   ├── docs/              # Documentation site (Vercel project 2)
│   │   ├── src/
│   │   ├── vercel.json
│   │   └── package.json
│   └── admin/             # Admin dashboard (Vercel project 3)
│       ├── src/
│       ├── vercel.json
│       └── package.json
├── packages/
│   ├── ui/                # Shared component library
│   ├── config/            # Shared ESLint, TS config
│   └── utils/             # Shared utilities
├── turbo.json
├── pnpm-workspace.yaml
└── package.json

Vercel auto-detects monorepos and builds only the affected app:

json
// apps/web/vercel.json
{
  "ignoreCommand": "npx turbo-ignore"
}

Each app in apps/ is a separate Vercel project with its own domain, env vars, and deployment settings.

Variant 5: Multi-Zone Micro-Frontends (Enterprise)

Best for: Large organizations with independent teams Team size: 20+ developers across multiple teams Traffic: High

Each zone is an independent Vercel project:

Zone 1: marketing.company.com → Marketing team's Next.js app
Zone 2: app.company.com → Product team's Next.js app
Zone 3: docs.company.com → Docs team's Next.js app
Zone 4: api.company.com → Platform team's API-only project

Main project uses multi-zones (next.config.js):
javascript
// Main app: next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/docs/:path*',
        destination: 'https://docs.company.com/docs/:path*',
      },
      {
        source: '/blog/:path*',
        destination: 'https://marketing.company.com/blog/:path*',
      },
    ];
  },
};

Key decisions:

  • Independent deploy cycles per team
  • Shared auth via Edge Middleware or external IdP
  • Consistent design system via shared npm packages
  • Each zone has its own env vars and scaling
Show full SKILL.md (218 more words)Show less

Architecture Decision Matrix

FactorStaticFull-StackAPI-OnlyMonorepoMulti-Zone
Team size1-32-101-55-2020+
Deploy independenceN/ASingleSinglePer-appPer-team
FrontendYesYesNoYesYes
DatabaseNoYesYesPer-appPer-zone
ComplexityLowMediumLowMediumHigh
CostLowMediumLowMediumHigh

Migration Path

Static Site → Full-Stack Next.js → Monorepo → Multi-Zone
     ↑              ↑                  ↑           ↑
   Start here    Add API routes    Add shared    Split teams
                 Add auth          packages      Independent
                 Add database                    deployments

Output

  • Architecture variant selected based on team size and requirements
  • Project structure implemented following the chosen blueprint
  • Vercel configuration optimized for the architecture
  • Migration path documented for future scaling

Error Handling

ErrorCauseSolution
Monorepo builds all appsMissing ignoreCommandAdd npx turbo-ignore
Multi-zone routing conflictOverlapping pathsEnsure rewrites don't conflict
Shared package not foundpnpm workspace misconfiguredCheck pnpm-workspace.yaml includes
API-only 404 on rootNo public/index.htmlAdd a minimal index or redirect

Examples

Choose a reversible multi-zone boundary

For a growing product, keep /app/* in the existing Next.js deployment and place a new independently released documentation zone under /docs/*. Write explicit non-overlapping rewrites, use a shared identity provider rather than forwarding session secrets, and deploy the new zone behind a preview hostname. Exercise both routes, a signed-out flow, and the rollback rewrite before moving production traffic; retain the prior routing configuration until the cutover has been observed.

Resources

Next Steps

For known pitfalls and anti-patterns, see vercel-known-pitfalls.

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in skills/.curated/vercel-architecture-variants of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • references/errors.md
  • references/examples.md
  • references/variant-a-monolith-(simple).md
  • references/variant-b-service-layer-(moderate).md
  • references/variant-c-microservice-(complex).md

Open the folder on GitHubat commit cfae287

Compare with similar skills

Vercel Architecture Variants next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Vercel Architecture Variants compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vercel Architecture Variants this skilljeremylongshore/tons-of-skills-marketplace2.8k—~2.1kAutomated safety check: PassMIT
Deploy Verceljohnku2011/boilerplates-with-ai-skills240—~660Automated safety check: NotesMIT
Vercel Deploymentdavila7/claude-code-templates33k5 repos~534Automated safety check: PassMIT
Frontmcp Deploymentagentfront/frontmcp146—~9.2kAutomated safety check: NotesApache-2.0
Deploy Fullstack Vercelvellum-ai/vellum-assistant1.4k—~2.8kAutomated safety check: PassMIT
Vercelhoodini/ai-agents-skills282—~1.1kAutomated safety check: NotesNone

Similar skills

  • Deploy Vercel

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when deploying or configuring this project on Vercel — env vars, build settings, serverless limits, and production checks for Next.js or Express.

    240 GitHub stars~660 tokensUpdated 1 mo ago
    Backend & APIsAuto-check: notes

  • Vercel Deployment

    davila7/claude-code-templates

    Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.

    33k GitHub starsUsed in 5 repos~534 tokens
    DevOps & CloudAuto-check passed

  • Frontmcp Deployment

    agentfront/frontmcp

    A skill your agent uses when deploying, building for production, packaging, or shipping a FrontMCP server.

    146 GitHub stars~9.2k tokensUpdated today
    DevOps & CloudAuto-check: notes

  • Deploy Fullstack Vercel

    vellum-ai/vellum-assistant

    Build and deploy a full-stack app (React frontend + Python/FastAPI backend) or a Vellum app to Vercel as a serverless demo with seeded data

    1.4k GitHub stars~2.8k tokensUpdated 2 days ago
    Backend & APIsAuto-check passed

  • Vercel

    hoodini/ai-agents-skills

    Deploy and configure applications on Vercel. An agent skill from hoodini/ai-agents-skills.

    282 GitHub stars~1.1k tokensUpdated 3 mo ago
    Backend & APIsAuto-check: notes

  • Nuxt Content

    secondsky/claude-skills

    Nuxt Content v3 Git-based CMS for Markdown/MDC content sites.

    227 GitHub stars~4.3k tokensUpdated 13 days ago
    Frontend & DesignAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo

  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes

  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed

  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Vercel Architecture Variants

What does Vercel Architecture Variants do?

Choose and implement Vercel architecture blueprints for different scales and use cases. Vercel Architecture Variants is an agent skill from jeremylongshore/tons-of-skills-marketplace. Choose and implement Vercel architecture blueprints for different scales and use cases.

When should I use Vercel Architecture Variants?

Vercel Architecture Variants fits situations like: designing new Vercel projects; choosing between static; edge architectures; planning how to structure a multi-project Vercel deployment.

How do I install Vercel Architecture Variants in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-architecture-variants -a claude-code`. Or copy the skill folder (skills/.curated/vercel-architecture-variants in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/vercel-architecture-variants in your project. Claude Code loads it when a task matches its description.

How do I install Vercel Architecture Variants in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-architecture-variants -a codex`. Or copy the skill folder (skills/.curated/vercel-architecture-variants in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/vercel-architecture-variants in your project. Codex loads it when a task matches its description.

Can I use Vercel Architecture Variants in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill vercel-architecture-variants -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-architecture-variants, .gemini/skills/vercel-architecture-variants, .github/skills/vercel-architecture-variants and .opencode/skills/vercel-architecture-variants in your project.

What does Vercel Architecture Variants need to run?

Going by SKILL.md and its folder, Vercel Architecture Variants needs the command-line tools its instructions call (npx). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Write, Edit, Grep. Compatibility (from SKILL.md): Designed for Claude Code.

Does Vercel Architecture Variants access the network?

SKILL.md names 2 domains. As links in the text: vercel.com and nextjs.org. This is read from the text; nothing was executed.

Is Vercel Architecture Variants safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Vercel Architecture Variants use?

Vercel Architecture Variants is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vercel Architecture Variants use?

About 2.1k tokens (SKILL.md is roughly 8.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.4k tokens, read only when the agent opens those files.

What are the alternatives to Vercel Architecture Variants?

Skills that share tags, products or a category with Vercel Architecture Variants: Deploy Vercel (johnku2011/boilerplates-with-ai-skills, 240 stars), Vercel Deployment (davila7/claude-code-templates, 33k stars), Frontmcp Deployment (agentfront/frontmcp, 146 stars) and Deploy Fullstack Vercel (vellum-ai/vellum-assistant, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vercel Architecture Variants?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.