{
  "instruction": "Route-based code splitting with lazy loading for multi-page apps",
  "relevant_when": "Agent builds a React, Vue, or Svelte app with multiple pages or routes",
  "context": "Multi-page frontend apps must use route-based code splitting so each page is loaded on demand. In React, use React.lazy() with dynamic import() for route components and wrap them in Suspense with a fallback. In Vue, use dynamic import() in route definitions. Static imports of all page components at the top of the router file is a failure.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/web-performance/SKILL.md",
      "tile": "tessl-labs/web-performance"
    }
  ],
  "checklist": [
    {
      "name": "routes-lazy-loaded",
      "rule": "Page/route components are loaded using React.lazy() with dynamic import(), Vue's () => import(), or equivalent lazy loading mechanism. Static imports of all page components at the top of the router file is a failure.",
      "relevant_when": "Agent defines routes in a multi-page frontend app"
    },
    {
      "name": "suspense-fallback-present",
      "rule": "Lazy-loaded React components are wrapped in a Suspense boundary with a fallback prop that shows a loading indicator",
      "relevant_when": "Agent uses React.lazy() for route components"
    }
  ]
}