{
  "skill_name": "nextjs-optimization",
  "evals": [
    {
      "id": 1,
      "prompt": "My Next.js page has a large hero image that causes layout shift and slow LCP.",
      "expected_output": "Use next/image instead of <img>: add priority prop for above-fold hero images (preloads with fetchPriority='high'). Specify width and height to prevent CLS. Use placeholder='blur' with blurDataURL for smooth loading. Target LCP < 2.5s. Never use <img> — it bypasses Next.js optimization.",
      "assertions": [
        { "type": "contains", "value": "next/image" },
        { "type": "contains", "value": "LCP" }
      ]
    },
    {
      "id": 2,
      "prompt": "I'm loading Google Fonts via a <link> tag in my layout. The page sometimes flashes unstyled text.",
      "expected_output": "Violation: No Google Fonts CDN link. Use next/font instead: import { Inter } from 'next/font/google'. This self-hosts fonts, eliminates the external network request, and adds font-display: swap automatically — eliminating layout shift. Apply via className on html element in root layout.",
      "assertions": [
        { "type": "contains", "value": "next/font" },
        { "type": "contains", "value": "self-host" }
      ]
    },
    {
      "id": 3,
      "prompt": "Add metadata and Open Graph tags to my Next.js pages for better SEO.",
      "expected_output": "Use the generateMetadata function or export const metadata in each page/layout. Do not use _document.tsx for metadata. Example: export async function generateMetadata({ params }): Promise<Metadata> { return { title: '...', openGraph: { images: [...] } } }. Static metadata uses export const metadata = {}.",
      "assertions": [
        { "type": "contains", "value": "generateMetadata" },
        { "type": "contains", "value": "Metadata" }
      ]
    }
  ],
  "should_not_trigger": [
    "Write a Node.js REST API with Express",
    "Configure PostgreSQL indexes for performance",
    "Set up a Redis pub/sub queue"
  ]
}
