swag-store

Use this skill any time you're working with images, fonts, third-party scripts, metadata, OG/social images, or measuring web performance in a Next.js 16 app. Triggers include next/image, the Image component, priority, sizes, srcSet, image optimization, remotePatterns, blur placeholders, next/font, font subsetting, font display, FOUT/FOIT, next/script, strategy="afterInteractive", Open Graph images, generateMetadata, opengraph-image.tsx, ImageResponse, twitter-image, viewport.themeColor, theme-color meta tag, generator meta tag, the vswag-cert-v3 generator value, Lighthouse, Core Web Vitals, LCP, CLS, INP, web-vitals package, or any "make it faster" / "improve SEO image" task. Bundles Vercel Academy topics images-next-image, advanced-image-optimization, fonts-with-next-font, core-web-vitals-and-measurement, third-party-scripts, and dynamic-metadata-done-right.

Use this skill any time you're configuring environment variables, securing API access, writing or modifying proxy.ts (formerly middleware.ts), reviewing what's exposed to the client, or doing a pre-deploy security pass on a Next.js 16 app. Triggers include process.env, NEXT_PUBLIC_, .env.local, env validation with Zod or T3 Env, secret leakage, server-only / client-only packages, proxy.ts, the proxy() export, request matchers, edge vs nodejs runtime, cookies(), auth tokens, session cookies, bypass tokens, x-vercel-protection-bypass, the SWAG_BYPASS_TOKEN env var, Vercel deployment protection, exposed API keys, API route hardening, CORS, CSP, or "is it safe to ship this". Bundles Vercel Academy topics env-and-security, security-review-apis-and-config, and proxy-basics.

Use this skill any time you're fetching data in a Next.js 16 app, deciding what to cache, designing Suspense boundaries, or troubleshooting why a page is slow or shows stale data. Triggers include any work with the "use cache" directive, Cache Components, cacheLife, cacheTag, the cacheComponents config flag, fetch() inside server components, parallel data fetching, request waterfalls, <Suspense> boundaries, loading.tsx, streaming, or revalidatePath/revalidateTag. Also use when designing the per-endpoint caching strategy for a new feature, when an endpoint that should be dynamic is returning stale data (or vice versa), or when verifying that "Cache Components are enabled" in the project config. Bundles Vercel Academy topics cache-components, data-fetching-without-waterfalls, query-performance-patterns, and suspense-and-streaming.

Use this skill any time you're designing or troubleshooting how a Next.js 16 app handles failures, missing resources, or loading states. Triggers include error.tsx, global-error.tsx, not-found.tsx, the notFound() function from next/navigation, the redirect() function, throwing errors from server components, ErrorBoundary, "Something went wrong" UI, 404 pages, segment-level error fallbacks, retry/reset patterns, or any work where you need to decide between "throw notFound()" vs. "return null" vs. "render an error UI". Bundles Vercel Academy topics errors-and-not-found and not-found-and-error-surfaces.

Use this skill any time you're creating, modifying, or reasoning about routes, layouts, or navigation in a Next.js 16 App Router project. Triggers include any work involving app/ directory route folders, page.tsx, layout.tsx, dynamic segments like [id] or [...slug], route groups (folder), parallel routes (@slot), intercepting routes ((..)folder), the Link component, useRouter, useParams, useSearchParams, generateStaticParams, or async params/searchParams. Also use when planning route structure for a new feature or migrating from Pages Router. Bundles Vercel Academy topics app-router-basics, dynamic-routing, nested-layouts, navigation, multi-app-routing, and params-vs-searchparams.

Use this skill any time you're handling form submissions, mutations, or any user-triggered server-side work in a Next.js 16 app. Triggers include "use server", Server Actions, action prop on a form, FormData, useFormStatus, useActionState, useFormState, revalidatePath, revalidateTag, redirect from next/navigation, optimistic updates with useOptimistic, or any "submit", "save", "delete", "update" interaction. Also use when wiring buttons that need to mutate server state (add to cart, like, follow, vote). Bundles Vercel Academy topic server-actions-for-forms.

Use this skill any time you're deciding whether a component should run on the server or the client, drawing the boundary between them, or composing components across that boundary. Triggers include any work with "use client", "use server" directives, passing props from server to client components, fetching data inside components, hydration errors, "Cannot import server-only code into a Client Component" errors, useState/useEffect being used in a Next.js component, or designing a new component's split. Also use when refactoring to push state down or pull data up. Bundles Vercel Academy topics server-and-client-components, client-server-boundaries, and component-composition-patterns.