From 20353987e99912bc264187e37de90b203081b82b Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 4 Dec 2025 23:48:36 +1000
Subject: [PATCH] feat: add @tpmjs/create-basic-tools generator promotion to
 website
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add prominent callout box on homepage in 'Publish Your Tool' section
- Add featured generator section on /publish page with full documentation link
- Include command example and links to GitHub README and NPM
- Highlight key features: 2-3 tools, complete setup, production-ready

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx         | 31 ++++++++++++++++++++++
 apps/web/src/app/publish/page.tsx | 43 ++++++++++++++++++++++++++++++-
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index af08eb5..1bb6d78 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -173,6 +173,37 @@ export default async function HomePage(): Promise<React.ReactElement> {
                 Share your tool with the AI community. Automatic discovery, quality scoring, and
                 seamless integration with popular AI frameworks.
               </p>
+
+              {/* Generator Highlight Box */}
+              <div className="mb-12 p-6 border-2 border-primary/50 rounded-lg bg-primary/5 text-left">
+                <div className="flex items-start gap-4">
+                  <div className="text-4xl">✨</div>
+                  <div className="flex-1">
+                    <h3 className="text-xl font-bold mb-2 text-foreground">
+                      Start with Our Package Generator
+                    </h3>
+                    <p className="text-sm text-foreground-secondary mb-4">
+                      Create a production-ready TPMJS tool package in seconds with our CLI
+                      generator. Includes 2-3 tools, complete setup, and best practices.
+                    </p>
+                    <div className="flex flex-col sm:flex-row gap-3">
+                      <code className="text-sm bg-surface px-4 py-2 rounded text-foreground border border-border">
+                        npx @tpmjs/create-basic-tools
+                      </code>
+                      <a
+                        href="https://github.com/tpmjs/tpmjs/tree/main/packages/tools/create-basic-tools#readme"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Button size="sm" variant="outline">
+                          View Docs →
+                        </Button>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
               <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                 <div className="p-4">
                   <div className="text-3xl mb-2">🚀</div>
diff --git a/apps/web/src/app/publish/page.tsx b/apps/web/src/app/publish/page.tsx
index ffb0e2a..6ee45e7 100644
--- a/apps/web/src/app/publish/page.tsx
+++ b/apps/web/src/app/publish/page.tsx
@@ -27,9 +27,50 @@ export default function PublishPage(): React.ReactElement {
             </p>
           </div>
 
+          {/* Generator Callout */}
+          <section className="mb-16 p-8 border-2 border-primary/50 rounded-lg bg-primary/5">
+            <div className="flex items-start gap-6">
+              <div className="text-6xl">🚀</div>
+              <div className="flex-1">
+                <h2 className="text-3xl font-bold mb-4 text-foreground">
+                  Use Our Package Generator
+                </h2>
+                <p className="text-lg text-foreground-secondary mb-6">
+                  The fastest way to create a TPMJS tool package! Our CLI generator scaffolds a
+                  production-ready package with 2-3 tools, complete setup, and best practices
+                  built-in.
+                </p>
+                <CodeBlock language="bash" code="npx @tpmjs/create-basic-tools" size="md" />
+                <div className="mt-6 flex flex-col sm:flex-row gap-4">
+                  <a
+                    href="https://github.com/tpmjs/tpmjs/tree/main/packages/tools/create-basic-tools#readme"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Button size="lg" variant="default">
+                      View Full Documentation
+                    </Button>
+                  </a>
+                  <a
+                    href="https://www.npmjs.com/package/@tpmjs/create-basic-tools"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Button size="lg" variant="outline">
+                      View on NPM
+                    </Button>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </section>
+
           {/* Quick Start */}
           <section className="mb-16">
-            <h2 className="text-3xl font-bold mb-6 text-foreground">Quick Start</h2>
+            <h2 className="text-3xl font-bold mb-6 text-foreground">Manual Setup</h2>
+            <p className="text-lg text-foreground-secondary mb-6">
+              Prefer to set up manually? Follow these steps:
+            </p>
             <div className="prose prose-invert max-w-none">
               <ol className="space-y-4 text-foreground-secondary">
                 <li className="text-lg">Create a new NPM package</li>