Fix linter errors and add missing skeleton component - Fixed all quote escaping issues in embeddings demo - Added missing skeleton UI component - Build now passes cleanly with no errors

Author: zackproser

src/app/demos/embeddings/EmbeddingsDemoClient.tsx

@@ -552,8 +552,8 @@ export default function EmbeddingsDemoClient() {
             <div className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-lg">
               <h4 className="font-medium mb-2">🔍 Smart Search</h4>
               <p className="text-sm text-zinc-600 dark:text-zinc-400">
-                Search for "car" and find results about "automobile" or "vehicle" 
-                even if they don't contain the exact word.
+                Search for &quot;car&quot; and find results about &quot;automobile&quot; or &quot;vehicle&quot; 
+                even if they don&apos;t contain the exact word.
               </p>
             </div>
             <div className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-lg">
@@ -567,14 +567,14 @@ export default function EmbeddingsDemoClient() {
               <h4 className="font-medium mb-2">📱 Recommendations</h4>
               <p className="text-sm text-zinc-600 dark:text-zinc-400">
                 Netflix, Spotify, and shopping sites use embeddings to suggest 
-                content similar to what you've enjoyed before.
+                content similar to what you&apos;ve enjoyed before.
               </p>
             </div>
             <div className="bg-zinc-100 dark:bg-zinc-700 p-4 rounded-lg">
               <h4 className="font-medium mb-2">🌐 Translation</h4>
               <p className="text-sm text-zinc-600 dark:text-zinc-400">
-                Google Translate uses embeddings to understand that "hello" in English 
-                has the same meaning as "hola" in Spanish.
+                Google Translate uses embeddings to understand that &quot;hello&quot; in English 
+                has the same meaning as &quot;hola&quot; in Spanish.
               </p>
             </div>
           </div>
@@ -754,7 +754,7 @@ export default function EmbeddingsDemoClient() {
                       onClick={() => handleComparisonExample(text1, text2)}
                       className="px-3 py-1 text-xs bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800 rounded-md"
                     >
-                      "{text1}" vs "{text2}"
+                      &quot;{text1}&quot; vs &quot;{text2}&quot;
                     </button>
                   ))}
                 </div>

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton } 

src/utils/comparison-helpers.ts

@@ -0,0 +1,76 @@
+export interface Tool {
+  name: string;
+  slug: string;
+  description: string;
+  category: string;
+  pricing?: string;
+  features?: string[];
+  pros?: string[];
+  cons?: string[];
+  website?: string;
+}
+
+// Mock tool data - in a real app this would come from a database or API
+const tools: Tool[] = [
+  {
+    name: "GitHub Copilot",
+    slug: "github-copilot",
+    description: "AI-powered code completion and generation tool by GitHub",
+    category: "Code Generation",
+    pricing: "$10/month",
+    features: ["Code completion", "Code generation", "Multi-language support"],
+    pros: ["Excellent IDE integration", "High-quality suggestions", "Large training dataset"],
+    cons: ["Subscription required", "Privacy concerns", "Can suggest outdated patterns"],
+    website: "https://github.com/features/copilot"
+  },
+  {
+    name: "Cursor",
+    slug: "cursor",
+    description: "AI-first code editor built for pair programming with AI",
+    category: "Code Editor",
+    pricing: "$20/month",
+    features: ["AI chat", "Code editing", "Codebase understanding"],
+    pros: ["Native AI integration", "Codebase awareness", "Modern interface"],
+    cons: ["Newer tool", "Higher price", "Learning curve"],
+    website: "https://cursor.sh"
+  }
+];
+
+export function getToolBySlug(slug: string): Tool | undefined {
+  return tools.find(tool => tool.slug === slug);
+}
+
+export function getAllTools(): Tool[] {
+  return tools;
+}
+
+export function getToolComparison(tool1Slug: string, tool2Slug: string) {
+  const tool1 = getToolBySlug(tool1Slug);
+  const tool2 = getToolBySlug(tool2Slug);
+  
+  if (!tool1 || !tool2) {
+    return null;
+  }
+  
+  return {
+    tool1,
+    tool2,
+    comparisonTitle: `${tool1.name} vs ${tool2.name}`,
+    comparisonDescription: `Compare ${tool1.name} and ${tool2.name} to find the best AI development tool for your needs.`
+  };
+}
+
+export function generateComparisonSlug(tool1: string, tool2: string): string {
+  return `${tool1}-vs-${tool2}`;
+}
+
+export function parseComparisonSlug(slug: string): { tool1: string; tool2: string } | null {
+  const parts = slug.split('-vs-');
+  if (parts.length !== 2) {
+    return null;
+  }
+  return {
+    tool1: parts[0],
+    tool2: parts[1]
+  };
+}