[microfrontends] point demo CTAs at official docs

microfrontends/nextjs-multi-zones/README.md

@@ -8,7 +8,7 @@
 
 This example showcases how to build and deploy a [Next.js Multi-Zones](https://nextjs.org/docs/pages/guides/multi-zones) microfrontends application using [Vercel Microfrontends](https://vercel.com/docs/microfrontends) with [Next.js App Router](https://nextjs.org/docs/app/building-your-application/routing). Learn how to architect independent, deployable frontend applications that work together seamlessly while maintaining team autonomy and deployment independence.
 
-Demo URL: https://vercel-microfrontends-multi-zones.vercel.app/
+Demo URL: https://microfrontends-marketing-three.vercel.app/
 
 ## 🚀 Deploy to Vercel
 
@@ -23,6 +23,36 @@ This example consists of two separate microfrontends that can be deployed indepe
 
 ## Getting Started
 
+### Set up with an agent
+
+The fastest way to run this example, or apply the same architecture to your own apps, is to give your coding agent the Vercel `microfrontends` skill.
+
+Install the [Vercel plugin](https://vercel.com/docs/agent-resources/vercel-plugin) (includes the `microfrontends` skill):
+
+```bash
+npx plugins add vercel/vercel-plugin
+```
+
+In Cursor you can also run `/add-plugin vercel`. To install only the skill:
+
+```bash
+npx skills add vercel/microfrontends
+```
+
+Then ask your agent:
+
+```
+Use the microfrontends skill to set up this Next.js multi-zones example. Install dependencies and start local development.
+```
+
+To wire the same pattern into your own projects:
+
+```
+Use the microfrontends skill to create a microfrontends group, add these projects, and configure the default app and /docs routing.
+```
+
+See the [Microfrontends skill](https://vercel.com/changelog/manage-vercel-microfrontends-with-ai-agents-and-the-cli) and [Vercel Microfrontends docs](https://vercel.com/docs/microfrontends).
+
 ### Prerequisites
 
 Ensure you have the following installed:

microfrontends/nextjs-multi-zones/apps/docs/app/docs/page.tsx

@@ -1,8 +1,31 @@
+import type { ReactNode } from 'react';
 import Image from 'next/image';
 import { Link } from '@vercel/microfrontends/next/client';
+import { ExternalLink } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import mfeIcon from '../../public/mfe-icon-dark.png';
 
+function ExternalTextLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: ReactNode;
+}) {
+  return (
+    <a
+      className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800"
+      href={href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {children}
+      <ExternalLink aria-hidden="true" className="size-3.5" />
+      <span className="sr-only">(opens in a new tab)</span>
+    </a>
+  );
+}
+
 export default function DocsPage() {
   return (
     <div className="flex flex-col min-h-screen">
@@ -31,9 +54,9 @@ export default function DocsPage() {
               <li>
                 <Link
                   className="text-gray-600 hover:text-gray-900"
-                  href="#examples"
+                  href="#learn-more"
                 >
-                  Examples
+                  Learn more
                 </Link>
               </li>
               <li>
@@ -57,28 +80,58 @@ export default function DocsPage() {
               Getting Started
             </h3>
             <p className="text-gray-600 mb-4">
-              Welcome to Vercel Microfrontends documentation. This guide will
-              help you get started with implementing microfrontends in your
-              project.
+              This <code>/docs</code> page is a separate Next.js app, routed
+              here by Vercel Microfrontends. The fastest way to set up the same
+              architecture is to give your coding agent the{' '}
+              <code>microfrontends</code> skill.
+            </p>
+            <p className="text-gray-600 mb-2">
+              Install the{' '}
+              <ExternalTextLink href="https://vercel.com/docs/agent-resources/vercel-plugin">
+                Vercel plugin
+              </ExternalTextLink>{' '}
+              (includes the skill), or install the skill on its own:
+            </p>
+            <pre className="mb-4 overflow-x-auto rounded-md bg-gray-900 p-4 text-sm text-gray-100">
+              <code>{`npx plugins add vercel/vercel-plugin\n# or\nnpx skills add vercel/microfrontends`}</code>
+            </pre>
+            <p className="text-gray-600 mb-2">Then ask your agent:</p>
+            <blockquote className="mb-4 border-l-4 border-blue-600 bg-blue-50 px-4 py-3 text-gray-700">
+              Use the microfrontends skill to set up this Next.js multi-zones
+              example. Install dependencies and start local development.
+            </blockquote>
+            <p className="text-gray-600">
+              In Cursor you can also run{' '}
+              <code className="rounded bg-gray-100 px-1 py-0.5 text-sm">
+                /add-plugin vercel
+              </code>
+              .
             </p>
-            <ol className="list-decimal list-inside text-gray-600">
-              <li className="mb-2">Install the Microfrontends CLI tool</li>
-              <li className="mb-2">Create your first microfrontend</li>
-              <li className="mb-2">Configure the host application</li>
-              <li>Deploy your microfrontends</li>
-            </ol>
           </section>
 
-          <section className="mb-12" id="examples">
-            <h3 className="text-2xl font-bold text-gray-900 mb-4">Examples</h3>
+          <section className="mb-12" id="learn-more">
+            <h3 className="text-2xl font-bold text-gray-900 mb-4">
+              Learn more
+            </h3>
             <p className="text-gray-600 mb-4">
-              Check out these examples to see Vercel Microfrontends in action:
+              Official docs and the skill your agent should use:
             </p>
             <ul className="list-disc list-inside text-gray-600">
-              <li className="mb-2">Basic microfrontend setup</li>
-              <li className="mb-2">Communication between microfrontends</li>
-              <li className="mb-2">Shared state management</li>
-              <li>Microfrontend with different frameworks</li>
+              <li className="mb-2">
+                <ExternalTextLink href="https://vercel.com/docs/microfrontends">
+                  Vercel Microfrontends documentation
+                </ExternalTextLink>
+              </li>
+              <li className="mb-2">
+                <ExternalTextLink href="https://vercel.com/docs/agent-resources/vercel-plugin">
+                  Vercel plugin for coding agents
+                </ExternalTextLink>
+              </li>
+              <li>
+                <ExternalTextLink href="https://vercel.com/changelog/manage-vercel-microfrontends-with-ai-agents-and-the-cli">
+                  Microfrontends skill and CLI
+                </ExternalTextLink>
+              </li>
             </ul>
           </section>
 
@@ -93,7 +146,7 @@ export default function DocsPage() {
       <footer className="bg-gray-100">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           <p className="text-center text-gray-500">
-            &copy; 2025 Vercel Microfrontends All rights reserved.
+            &copy; 2026 Vercel Microfrontends All rights reserved.
           </p>
         </div>
       </footer>

microfrontends/nextjs-multi-zones/apps/marketing/app/page.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import { Link } from '@vercel/microfrontends/next/client';
+import { ExternalLink } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import mfeIcon from '../public/mfe-icon-dark.png';
 
@@ -60,7 +61,7 @@ export default function Home() {
       <footer className="bg-gray-100">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
           <p className="text-center text-gray-500">
-            &copy; 2025 Vercel Microfrontends All rights reserved.
+            &copy; 2026 Vercel Microfrontends All rights reserved.
           </p>
         </div>
       </footer>
@@ -145,8 +146,16 @@ function CTASection() {
           Join the microfrontend revolution today and build better web
           applications.
         </p>
-        <Button size="lg" variant="secondary">
-          Start Free Trial
+        <Button asChild size="lg" variant="secondary">
+          <a
+            href="https://vercel.com/docs/microfrontends"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Read the docs
+            <ExternalLink aria-hidden="true" />
+            <span className="sr-only">(opens in a new tab)</span>
+          </a>
         </Button>
       </div>
     </section>

microfrontends/single-spa/apps/content/src/landing.tsx

@@ -3,6 +3,39 @@ import ReactDOMClient from 'react-dom/client';
 import singleSpaReact from 'single-spa-react';
 import './globals.css';
 
+const MICROFRONTENDS_DOCS_URL = 'https://vercel.com/docs/microfrontends';
+
+function DocsLink({ className }: { className: string }): React.JSX.Element {
+  return (
+    <a
+      className={className}
+      href={MICROFRONTENDS_DOCS_URL}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Read the docs
+      <svg
+        aria-hidden="true"
+        className="size-4"
+        fill="none"
+        height="16"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M15 3h6v6" />
+        <path d="M10 14 21 3" />
+        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      </svg>
+      <span className="sr-only">(opens in a new tab)</span>
+    </a>
+  );
+}
+
 function Landing(): React.JSX.Element {
   return (
     <>
@@ -321,8 +354,7 @@ function Landing(): React.JSX.Element {
                 Simple, Transparent Pricing
               </h2>
               <p className="mx-auto mt-4 max-w-[700px] text-muted-foreground md:text-xl">
-                Choose the plan that&apos;s right for your business. All plans
-                include a 14-day free trial.
+                Choose the plan that&apos;s right for your business.
               </p>
             </div>
             <div className="grid gap-8 md:grid-cols-3">
@@ -415,12 +447,7 @@ function Landing(): React.JSX.Element {
                   </ul>
                 </div>
                 <div className="mt-auto p-6 pt-0">
-                  <button
-                    className="w-full rounded-md border border-primary bg-background px-4 py-2 text-sm font-medium text-primary shadow-sm hover:bg-primary/5 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-                    type="button"
-                  >
-                    Start Free Trial
-                  </button>
+                  <DocsLink className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-primary bg-background px-4 py-2 text-sm font-medium text-primary shadow-sm hover:bg-primary/5 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" />
                 </div>
               </div>
 
@@ -536,12 +563,7 @@ function Landing(): React.JSX.Element {
                   </ul>
                 </div>
                 <div className="mt-auto p-6 pt-0">
-                  <button
-                    className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-                    type="button"
-                  >
-                    Start Free Trial
-                  </button>
+                  <DocsLink className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" />
                 </div>
               </div>
 
@@ -872,12 +894,7 @@ function Landing(): React.JSX.Element {
                 </p>
               </div>
               <div className="flex flex-col gap-2 min-[400px]:flex-row">
-                <button
-                  className="inline-flex h-10 items-center justify-center rounded-md bg-white px-8 py-2 text-sm font-medium text-primary shadow transition-colors hover:bg-white/90"
-                  type="button"
-                >
-                  Start Free Trial
-                </button>
+                <DocsLink className="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-white px-8 py-2 text-sm font-medium text-primary shadow transition-colors hover:bg-white/90" />
                 <button
                   className="inline-flex h-10 items-center justify-center rounded-md border border-white bg-transparent px-8 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-white/10"
                   type="button"