Vercel
Vercel is a cloud platform for static sites and serverless functions, designed to optimize the performance of web applications through features like automatic scaling and global content delivery.
Featured Skills
Build a complete Supabase + Vercel e-commerce platform with CMS and admin panel. Use for shop setup, online store creation, stripe integration, product catalog, admin dashboard, or CMS projects. Includes database schema, RBAC authentication, content management, checkout flow, and zero-hardcoding architecture with mandatory testing.
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".
Guide for integrating Vercel AI SDK into Remix apps. Build AI chatbots, text completion, and agents within your Shopify app.
Strategies for deploying Shopify Apps. Focus on overcoming Vercel/Serverless timeouts, using VPS (Coolify/Dokku), and handling long-running background jobs.
Create distinctive, high-converting landing pages combining proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages with Next.js 14+ and ShadCN UI that avoid generic AI aesthetics.