@hustle-together/api-dev-tools 3.11.1 → 3.12.2

package/templates/dev-tools/_components/DevToolsLanding.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import { HeroHeader } from '../../shared/HeroHeader';
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { HeroHeader } from "../../shared/HeroHeader";
 
 interface Registry {
   version?: string;
@@ -25,7 +25,7 @@ export function DevToolsLanding() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    fetch('/api/registry')
+    fetch("/api/registry")
       .then((res) => res.json())
       .then((data) => {
         setRegistry(data);
@@ -52,7 +52,7 @@ export function DevToolsLanding() {
         badge="Developer Portal"
         description={
           <>
-            Central hub for <strong>API development</strong>,{' '}
+            Central hub for <strong>API development</strong>,{" "}
             <strong>UI components</strong>, and documentation. Built with the
             Hustle Together workflow.
           </>
@@ -64,7 +64,7 @@ export function DevToolsLanding() {
         <div className="mb-8 flex flex-wrap items-center gap-6 border-2 border-black bg-gray-50 p-6 dark:border-gray-700 dark:bg-gray-900">
           <div className="flex items-center gap-2">
             <span className="text-3xl font-bold text-black dark:text-white">
-              {loading ? '...' : total}
+              {loading ? "..." : total}
             </span>
             <span className="text-gray-600 dark:text-gray-400">
               Total Items
@@ -207,7 +207,7 @@ export function DevToolsLanding() {
               source of truth for the showcase pages.
             </p>
             <div className="text-sm font-bold text-[#BA0C2F]">
-              Version: {registry.version || '1.0.0'}
+              Version: {registry.version || "1.0.0"}
             </div>
           </Link>
         </div>

package/templates/dev-tools/page.tsx

@@ -1,8 +1,9 @@
-import { DevToolsLanding } from './_components/DevToolsLanding';
+import { DevToolsLanding } from "./_components/DevToolsLanding";
 
 export const metadata = {
-  title: 'Hustle Dev Tools',
-  description: 'Developer tools for API and UI development with Hustle Together',
+  title: "Hustle Dev Tools",
+  description:
+    "Developer tools for API and UI development with Hustle Together",
 };
 
 export default function DevToolsPage() {

package/templates/mcp-servers.json

@@ -2,14 +2,42 @@
   "mcpServers": {
     "context7": {
       "command": "npx",
-      "args": ["-y", "@upstash/context7-mcp"]
+      "args": ["-y", "@upstash/context7-mcp"],
+      "description": "Real-time documentation lookup for libraries and APIs"
     },
     "github": {
       "command": "npx",
       "args": ["-y", "@modelcontextprotocol/server-github"],
       "env": {
         "GITHUB_PERSONAL_ACCESS_TOKEN": ""
-      }
+      },
+      "description": "GitHub integration for PRs, issues, and repository management"
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@anthropics/mcp-playwright"],
+      "description": "Browser automation for visual testing and screenshot capture"
+    },
+    "greptile": {
+      "command": "npx",
+      "args": ["-y", "@anthropics/mcp-greptile"],
+      "env": {
+        "GREPTILE_API_KEY": "",
+        "GITHUB_TOKEN": ""
+      },
+      "description": "AI-powered code review with full codebase context (Phase 14)"
     }
+  },
+  "_readme": {
+    "installation": [
+      "1. Copy this file to your project as .mcp.json",
+      "2. Or run: claude mcp add context7 --from-template",
+      "3. Add your GitHub token to the env section",
+      "4. Restart Claude Code to load new servers"
+    ],
+    "verification": [
+      "Run /mcp in Claude Code to verify servers are connected",
+      "Use 'claude mcp list' to see all configured servers"
+    ]
   }
 }

package/templates/page/page.e2e.test.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from "@playwright/test";
 
 /**
  * E2E Tests for __PAGE_NAME__ Page
@@ -7,32 +7,32 @@ import { test, expect } from '@playwright/test';
  *
  * Run with: pnpm playwright test __PAGE_ROUTE__.spec.ts
  */
-test.describe('__PAGE_NAME__ Page', () => {
+test.describe("__PAGE_NAME__ Page", () => {
   test.beforeEach(async ({ page }) => {
     // Navigate to the page before each test
-    await page.goto('/__PAGE_ROUTE__');
+    await page.goto("/__PAGE_ROUTE__");
   });
 
   // ===================================
   // Basic Rendering Tests
   // ===================================
 
-  test('should load successfully', async ({ page }) => {
+  test("should load successfully", async ({ page }) => {
     // Wait for page to be fully loaded
-    await page.waitForLoadState('networkidle');
+    await page.waitForLoadState("networkidle");
 
     // Check page title
     await expect(page).toHaveTitle(/__PAGE_TITLE__/);
   });
 
-  test('should display page heading', async ({ page }) => {
-    const heading = page.getByRole('heading', { level: 1 });
+  test("should display page heading", async ({ page }) => {
+    const heading = page.getByRole("heading", { level: 1 });
     await expect(heading).toBeVisible();
-    await expect(heading).toContainText('__PAGE_TITLE__');
+    await expect(heading).toContainText("__PAGE_TITLE__");
   });
 
-  test('should display page description', async ({ page }) => {
-    const description = page.getByText('__PAGE_DESCRIPTION__');
+  test("should display page description", async ({ page }) => {
+    const description = page.getByText("__PAGE_DESCRIPTION__");
     await expect(description).toBeVisible();
   });
 
@@ -40,64 +40,66 @@ test.describe('__PAGE_NAME__ Page', () => {
   // Responsive Tests
   // ===================================
 
-  test('should be responsive on mobile', async ({ page }) => {
+  test("should be responsive on mobile", async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 667 });
-    await page.goto('/__PAGE_ROUTE__');
+    await page.goto("/__PAGE_ROUTE__");
 
     // Verify main content is visible
-    await expect(page.getByRole('main')).toBeVisible();
+    await expect(page.getByRole("main")).toBeVisible();
 
     // Verify no horizontal scroll
-    const body = await page.locator('body');
+    const body = await page.locator("body");
     const scrollWidth = await body.evaluate((el) => el.scrollWidth);
     const clientWidth = await body.evaluate((el) => el.clientWidth);
     expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1); // +1 for rounding
   });
 
-  test('should be responsive on tablet', async ({ page }) => {
+  test("should be responsive on tablet", async ({ page }) => {
     await page.setViewportSize({ width: 768, height: 1024 });
-    await page.goto('/__PAGE_ROUTE__');
+    await page.goto("/__PAGE_ROUTE__");
 
-    await expect(page.getByRole('main')).toBeVisible();
+    await expect(page.getByRole("main")).toBeVisible();
   });
 
-  test('should be responsive on desktop', async ({ page }) => {
+  test("should be responsive on desktop", async ({ page }) => {
     await page.setViewportSize({ width: 1920, height: 1080 });
-    await page.goto('/__PAGE_ROUTE__');
+    await page.goto("/__PAGE_ROUTE__");
 
-    await expect(page.getByRole('main')).toBeVisible();
+    await expect(page.getByRole("main")).toBeVisible();
   });
 
   // ===================================
   // Accessibility Tests
   // ===================================
 
-  test('should have no accessibility violations', async ({ page }) => {
+  test("should have no accessibility violations", async ({ page }) => {
     // Note: Requires @axe-core/playwright
     // const results = await new AxeBuilder({ page }).analyze();
     // expect(results.violations).toEqual([]);
 
     // Basic accessibility checks
     // All images should have alt text
-    const images = await page.getByRole('img').all();
+    const images = await page.getByRole("img").all();
     for (const img of images) {
-      await expect(img).toHaveAttribute('alt');
+      await expect(img).toHaveAttribute("alt");
     }
 
     // All buttons should have accessible names
-    const buttons = await page.getByRole('button').all();
+    const buttons = await page.getByRole("button").all();
     for (const button of buttons) {
-      const name = await button.getAttribute('aria-label') || await button.textContent();
+      const name =
+        (await button.getAttribute("aria-label")) ||
+        (await button.textContent());
       expect(name?.trim()).toBeTruthy();
     }
   });
 
-  test('should be keyboard navigable', async ({ page }) => {
+  test("should be keyboard navigable", async ({ page }) => {
     // Tab through interactive elements
-    await page.keyboard.press('Tab');
+    await page.keyboard.press("Tab");
 
     // Verify focus is visible
-    const focusedElement = page.locator(':focus');
+    const focusedElement = page.locator(":focus");
     await expect(focusedElement).toBeVisible();
   });
 
@@ -107,9 +109,9 @@ test.describe('__PAGE_NAME__ Page', () => {
   // Tests FAIL if exceeded, triggering TDD loop-back
   // ===================================
 
-  test('should load within performance budget', async ({ page }) => {
+  test("should load within performance budget", async ({ page }) => {
     const startTime = Date.now();
-    await page.goto('/__PAGE_ROUTE__', { waitUntil: 'networkidle' });
+    await page.goto("/__PAGE_ROUTE__", { waitUntil: "networkidle" });
     const loadTime = Date.now() - startTime;
 
     // THRESHOLD: Page load max 3000ms
@@ -117,15 +119,17 @@ test.describe('__PAGE_NAME__ Page', () => {
     expect(loadTime).toBeLessThan(3000);
   });
 
-  test('should have acceptable memory usage', async ({ page }) => {
-    await page.goto('/__PAGE_ROUTE__');
+  test("should have acceptable memory usage", async ({ page }) => {
+    await page.goto("/__PAGE_ROUTE__");
 
     // Get Chromium-specific metrics
     const client = await page.context().newCDPSession(page);
-    const metrics = await client.send('Performance.getMetrics');
+    const metrics = await client.send("Performance.getMetrics");
 
-    const jsHeapSize = metrics.metrics.find(m => m.name === 'JSHeapUsedSize')?.value || 0;
-    const domNodes = metrics.metrics.find(m => m.name === 'Nodes')?.value || 0;
+    const jsHeapSize =
+      metrics.metrics.find((m) => m.name === "JSHeapUsedSize")?.value || 0;
+    const domNodes =
+      metrics.metrics.find((m) => m.name === "Nodes")?.value || 0;
 
     // THRESHOLD: Memory max 50MB
     // If this fails, check for: memory leaks, large state, unbounded lists
@@ -136,14 +140,16 @@ test.describe('__PAGE_NAME__ Page', () => {
     expect(domNodes).toBeLessThan(1500);
   });
 
-  test('should not have layout thrashing', async ({ page }) => {
-    await page.goto('/__PAGE_ROUTE__');
+  test("should not have layout thrashing", async ({ page }) => {
+    await page.goto("/__PAGE_ROUTE__");
 
     const client = await page.context().newCDPSession(page);
-    const metrics = await client.send('Performance.getMetrics');
+    const metrics = await client.send("Performance.getMetrics");
 
-    const layoutCount = metrics.metrics.find(m => m.name === 'LayoutCount')?.value || 0;
-    const layoutDuration = metrics.metrics.find(m => m.name === 'LayoutDuration')?.value || 0;
+    const layoutCount =
+      metrics.metrics.find((m) => m.name === "LayoutCount")?.value || 0;
+    const layoutDuration =
+      metrics.metrics.find((m) => m.name === "LayoutDuration")?.value || 0;
 
     // THRESHOLD: Layout count max 10
     // If this fails, batch DOM updates, use CSS transforms instead of layout properties
@@ -153,14 +159,16 @@ test.describe('__PAGE_NAME__ Page', () => {
     expect(layoutDuration * 1000).toBeLessThan(100);
   });
 
-  test('should meet Core Web Vitals', async ({ page }) => {
-    await page.goto('/__PAGE_ROUTE__');
+  test("should meet Core Web Vitals", async ({ page }) => {
+    await page.goto("/__PAGE_ROUTE__");
 
     // Get paint timing
     const paintTiming = await page.evaluate(() => {
-      const entries = performance.getEntriesByType('paint');
+      const entries = performance.getEntriesByType("paint");
       return {
-        fcp: entries.find(e => e.name === 'first-contentful-paint')?.startTime || 0,
+        fcp:
+          entries.find((e) => e.name === "first-contentful-paint")?.startTime ||
+          0,
       };
     });
 
@@ -175,7 +183,7 @@ test.describe('__PAGE_NAME__ Page', () => {
           const entries = list.getEntries();
           const lastEntry = entries[entries.length - 1];
           resolve(lastEntry?.startTime || 0);
-        }).observe({ type: 'largest-contentful-paint', buffered: true });
+        }).observe({ type: "largest-contentful-paint", buffered: true });
 
         // Timeout fallback
         setTimeout(() => resolve(0), 3000);
@@ -206,13 +214,13 @@ test.describe('__PAGE_NAME__ Page', () => {
   // Error Handling Tests
   // ===================================
 
-  test('should handle errors gracefully', async ({ page }) => {
+  test("should handle errors gracefully", async ({ page }) => {
     // Intercept API calls to simulate errors (if applicable)
     // await page.route('/api/*', route => route.fulfill({ status: 500 }));
 
-    await page.goto('/__PAGE_ROUTE__');
+    await page.goto("/__PAGE_ROUTE__");
 
     // Page should still render without crashing
-    await expect(page.getByRole('main')).toBeVisible();
+    await expect(page.getByRole("main")).toBeVisible();
   });
 });

package/templates/page/page.tsx

@@ -1,11 +1,11 @@
-import type { Metadata } from 'next';
+import type { Metadata } from "next";
 
 /**
  * Page metadata for SEO
  */
 export const metadata: Metadata = {
-  title: '__PAGE_TITLE__',
-  description: '__PAGE_DESCRIPTION__',
+  title: "__PAGE_TITLE__",
+  description: "__PAGE_DESCRIPTION__",
 };
 
 /**

package/templates/shared/HeroHeader.tsx

@@ -1,6 +1,6 @@
-'use client';
+"use client";
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from "react";
 
 interface HeroHeaderProps {
   title: string;
@@ -29,8 +29,8 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
   useEffect(() => {
     const checkDarkMode = () => {
       setIsDark(
-        document.documentElement.classList.contains('dark') ||
-          document.documentElement.getAttribute('data-theme') === 'dark'
+        document.documentElement.classList.contains("dark") ||
+          document.documentElement.getAttribute("data-theme") === "dark",
       );
     };
 
@@ -40,7 +40,7 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
     const observer = new MutationObserver(checkDarkMode);
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ['class', 'data-theme'],
+      attributeFilter: ["class", "data-theme"],
     });
 
     return () => observer.disconnect();
@@ -52,7 +52,7 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
     const header = headerRef.current;
     if (!canvas || !header) return;
 
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     let animationId: number;
@@ -79,7 +79,7 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
     const createRow = (): GridCell[] => {
       const cells: GridCell[] = [];
       for (let c = 0; c < gridWidth; c++) {
-        cells.push({ active: false, alpha: 0, color: 'rgba(186, 12, 47' });
+        cells.push({ active: false, alpha: 0, color: "rgba(186, 12, 47" });
       }
       return cells;
     };
@@ -96,7 +96,7 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
 
     const project = (
       x: number,
-      z: number
+      z: number,
     ): { x: number; y: number; scale: number } | null => {
       if (z <= 0) return null;
       const scale = fov / z;
@@ -106,7 +106,7 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
     };
 
     const updateGridState = () => {
-      const secondaryColor = isDark ? 'rgba(60, 60, 60' : 'rgba(30, 30, 30';
+      const secondaryColor = isDark ? "rgba(60, 60, 60" : "rgba(30, 30, 30";
 
       if (Math.random() > 0.92) {
         const r = Math.floor(Math.random() * (gridRows.length - 5)) + 2;
@@ -115,7 +115,8 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
         if (!cell.active) {
           cell.active = true;
           cell.alpha = 1.0;
-          cell.color = Math.random() > 0.7 ? secondaryColor : 'rgba(186, 12, 47';
+          cell.color =
+            Math.random() > 0.7 ? secondaryColor : "rgba(186, 12, 47";
         }
       }
 
@@ -128,7 +129,7 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
               cell.alpha = 0;
             }
           }
-        })
+        }),
       );
     };
 
@@ -145,7 +146,7 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
       updateGridState();
       ctx.lineWidth = 1;
 
-      const lineColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
+      const lineColor = isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)";
 
       // Draw rows (back to front)
       for (let r = gridRows.length - 1; r >= 0; r--) {
@@ -208,7 +209,7 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
       }
 
       // Fog / fade gradient
-      const fadeColor = isDark ? '0,0,0' : '255,255,255';
+      const fadeColor = isDark ? "0,0,0" : "255,255,255";
       const g = ctx.createLinearGradient(0, 0, 0, canvas.height / 1.5);
       g.addColorStop(0, `rgba(${fadeColor}, 1)`);
       g.addColorStop(0.3, `rgba(${fadeColor}, 0.8)`);
@@ -220,11 +221,11 @@ export function HeroHeader({ title, description, badge }: HeroHeaderProps) {
     };
 
     resize();
-    window.addEventListener('resize', resize);
+    window.addEventListener("resize", resize);
     draw();
 
     return () => {
-      window.removeEventListener('resize', resize);
+      window.removeEventListener("resize", resize);
       cancelAnimationFrame(animationId);
     };
   }, [isDark]);

package/templates/shared/index.ts

@@ -1 +1 @@
-export { HeroHeader } from './HeroHeader';
+export { HeroHeader } from "./HeroHeader";

package/templates/ui-showcase/_components/PreviewCard.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
 interface PreviewCardProps {
   id: string;
-  type: 'component' | 'page';
+  type: "component" | "page";
   name: string;
   description?: string;
   variants?: string[];
@@ -38,7 +38,7 @@ export function PreviewCard({
   // Get page route from file path or prop
   const getPageRoute = () => {
     if (route) return route;
-    if (file?.includes('src/app/')) {
+    if (file?.includes("src/app/")) {
       const match = file.match(/src\/app\/(.+?)\/page\.tsx?$/);
       if (match) return `/${match[1]}`;
     }
@@ -52,28 +52,24 @@ export function PreviewCard({
     >
       {/* Preview Area */}
       <div className="relative aspect-video w-full overflow-hidden bg-gray-100 dark:bg-gray-800">
-        {type === 'page' ? (
+        {type === "page" ? (
           // REAL iframe preview for pages - scaled down to fit
           <iframe
             src={getPageRoute()}
             title={`Preview of ${name}`}
             className="pointer-events-none h-full w-full origin-top-left scale-[0.5]"
-            style={{ width: '200%', height: '200%' }}
+            style={{ width: "200%", height: "200%" }}
             loading="lazy"
           />
         ) : (
           // Component preview - generated HTML matching Sandpack style
-          <ComponentPreview
-            id={id}
-            name={name}
-            variants={variants}
-          />
+          <ComponentPreview id={id} name={name} variants={variants} />
         )}
 
         {/* Type Badge */}
         <div className="absolute right-2 top-2">
           <span className="border border-black bg-white px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-black dark:border-gray-600 dark:bg-gray-800 dark:text-white">
-            {type === 'component' ? 'Component' : 'Page'}
+            {type === "component" ? "Component" : "Page"}
           </span>
         </div>
 
@@ -119,7 +115,7 @@ export function PreviewCard({
 
           {usesComponents && usesComponents.length > 0 && (
             <p className="text-xs text-gray-500 dark:text-gray-400">
-              Uses: {usesComponents.slice(0, 3).join(', ')}
+              Uses: {usesComponents.slice(0, 3).join(", ")}
               {usesComponents.length > 3 && ` +${usesComponents.length - 3}`}
             </p>
           )}
@@ -143,7 +139,7 @@ function ComponentPreview({
   name: string;
   variants?: string[];
 }) {
-  const previewHtml = generatePreviewHtml(name, variants?.[0] || 'primary');
+  const previewHtml = generatePreviewHtml(name, variants?.[0] || "primary");
 
   return (
     <iframe
@@ -163,9 +159,9 @@ function ComponentPreview({
 function generatePreviewHtml(name: string, variant: string): string {
   const lowerName = name.toLowerCase();
 
-  let content = '';
+  let content = "";
 
-  if (lowerName.includes('button')) {
+  if (lowerName.includes("button")) {
     content = `
       <div style="display: flex; gap: 8px; align-items: center;">
         <button style="
@@ -188,7 +184,7 @@ function generatePreviewHtml(name: string, variant: string): string {
         ">Secondary</button>
       </div>
     `;
-  } else if (lowerName.includes('card')) {
+  } else if (lowerName.includes("card")) {
     content = `
       <div style="
         border: 2px solid #000;
@@ -203,7 +199,11 @@ function generatePreviewHtml(name: string, variant: string): string {
         </div>
       </div>
     `;
-  } else if (lowerName.includes('input') || lowerName.includes('field') || lowerName.includes('form')) {
+  } else if (
+    lowerName.includes("input") ||
+    lowerName.includes("field") ||
+    lowerName.includes("form")
+  ) {
     content = `
       <div style="width: 140px;">
         <label style="display: block; font-size: 11px; font-weight: bold; margin-bottom: 4px;">Label</label>
@@ -217,7 +217,7 @@ function generatePreviewHtml(name: string, variant: string): string {
         <p style="font-size: 10px; color: #666; margin: 4px 0 0;">Helper text</p>
       </div>
     `;
-  } else if (lowerName.includes('table')) {
+  } else if (lowerName.includes("table")) {
     content = `
       <div style="border: 2px solid #000; font-size: 10px; width: 160px;">
         <div style="display: flex; background: #f0f0f0; border-bottom: 1px solid #ccc;">
@@ -234,7 +234,7 @@ function generatePreviewHtml(name: string, variant: string): string {
         </div>
       </div>
     `;
-  } else if (lowerName.includes('header') || lowerName.includes('nav')) {
+  } else if (lowerName.includes("header") || lowerName.includes("nav")) {
     content = `
       <div style="border: 2px solid #000; background: white; padding: 8px 12px; width: 180px;">
         <div style="display: flex; justify-content: space-between; align-items: center;">
@@ -247,7 +247,7 @@ function generatePreviewHtml(name: string, variant: string): string {
         </div>
       </div>
     `;
-  } else if (lowerName.includes('modal') || lowerName.includes('dialog')) {
+  } else if (lowerName.includes("modal") || lowerName.includes("dialog")) {
     content = `
       <div style="position: relative; width: 140px; height: 100px;">
         <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.3);"></div>