feat: add TanStack Intent library and blog post header image

- Add Intent as a new library in the sidebar with landing page
- Add header image to the "From Docs to Agents" blog post
- Fix relative SVG image paths in blog post to use absolute paths

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: KyleAMathews

public/blog-assets/from-docs-to-agents/header.png

@@ -6,6 +6,8 @@ authors:
   - Kyle Matthews 
 ---
 
+![From Docs to Agents](/blog-assets/from-docs-to-agents/header.png)
+
 Your docs are good. Your types are solid. Your agent still gets it wrong.
 
 Not because it's dumb — because there's no pipeline between what you know about your tool and what agents know about your tool. Docs are written for humans who browse. Types check individual API calls but can't encode intent. Training data is a snapshot of the ecosystem as it *was*, mixing versions without flagging which one applies. The knowledge gap between your tool and agents using your tool isn't a content problem. It's a lifecycle problem.
@@ -74,7 +76,7 @@ npx intent setup
 
 This matters because the alternative is hoping model providers eventually re-train on your latest docs. That's not a strategy. Training data has a permanent version-mixing problem: once a breaking change ships, models contain *both* versions forever with no mechanism to disambiguate. Skills bypass this entirely. They're versioned with your package, and `npm update` brings the latest knowledge with the latest code.
 
-![Model training data mixes versions permanently vs. skills pinned to your installed version](./diagram-split-brain.svg)
+![Model training data mixes versions permanently vs. skills pinned to your installed version](/blog-assets/from-docs-to-agents/diagram-split-brain.svg)
 
 ## The dependency graph does the discovery
 
@@ -84,7 +86,7 @@ When a developer runs `intent init`, the CLI discovers every intent-enabled pack
 npx intent init
 ```
 
-![intent init discovers intent-enabled packages in node_modules and wires skills into agent config](./diagram-discovery.svg)
+![intent init discovers intent-enabled packages in node_modules and wires skills into agent config](/blog-assets/from-docs-to-agents/diagram-discovery.svg)
 
 No manual setup per-library. No hunting for rules files. Install the package, run `intent init`, and the agent understands the tool. Update the package, and the skills update with it. Knowledge travels through the same channel as code.
 
@@ -122,7 +124,7 @@ npx intent stale --json    # Machine-readable for CI
 
 Run it in CI and you get a failing check when source material has changed. The skill becomes part of your release checklist — not something you remember to update, something your pipeline catches.
 
-![The intent lifecycle: docs to skills to npm to agent config, with staleness checks and feedback loops](./diagram-lifecycle.svg)
+![The intent lifecycle: docs to skills to npm to agent config, with staleness checks and feedback loops](/blog-assets/from-docs-to-agents/diagram-lifecycle.svg)
 
 The feedback loop runs both directions. `intent feedback` lets users submit structured reports when a skill produces incorrect output — which skill was active, which version, what went wrong. That context flows back to you as a maintainer, and the fix ships to everyone on the next `npm update`.
 

src/blog/from-docs-to-agents.md

@@ -0,0 +1,43 @@
+import { Footer } from '~/components/Footer'
+import { LazySponsorSection } from '~/components/LazySponsorSection'
+import { LibraryHero } from '~/components/LibraryHero'
+import { BottomCTA } from '~/components/BottomCTA'
+import { intentProject } from '~/libraries/intent'
+import { getLibrary } from '~/libraries'
+import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
+import LandingPageGad from '~/components/LandingPageGad'
+import { PartnersSection } from '~/components/PartnersSection'
+import { MaintainersSection } from '~/components/MaintainersSection'
+import { LibraryPageContainer } from '~/components/LibraryPageContainer'
+import { LibraryStatsSection } from '~/components/LibraryStatsSection'
+
+const library = getLibrary('intent')
+
+export default function IntentLanding() {
+  return (
+    <LibraryPageContainer>
+      <LibraryHero project={intentProject} />
+
+      <LibraryStatsSection library={library} />
+
+      <LibraryFeatureHighlights
+        featureHighlights={intentProject.featureHighlights}
+      />
+
+      <MaintainersSection libraryId="intent" />
+      <PartnersSection libraryId="intent" />
+      <LazySponsorSection />
+      <LandingPageGad />
+
+      <BottomCTA
+        linkProps={{
+          to: '/$libraryId/$version/docs',
+          params: { libraryId: library.id },
+        }}
+        label="Get Started!"
+        className="bg-sky-500 border-sky-500 hover:bg-sky-600 text-white"
+      />
+      <Footer />
+    </LibraryPageContainer>
+  )
+}

src/components/landing/IntentLanding.tsx

@@ -21,6 +21,7 @@ export {
   hotkeys,
   db,
   ai,
+  intent,
   config,
   devtools,
   cli,

src/libraries/index.tsx

@@ -0,0 +1,56 @@
+import { Library } from '.'
+import { BookOpen, Package, RefreshCw } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import { intent } from './libraries'
+
+const textStyles = `text-sky-600 dark:text-sky-500`
+
+export const intentProject = {
+  ...intent,
+  featureHighlights: [
+    {
+      title: 'Skills as npm Packages',
+      icon: <Package className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Skills are knowledge encoded for AI coding agents, shipped as npm
+          packages. They travel with your tool via{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            npm update
+          </span>{' '}
+          — not the model's training cutoff, not community-maintained rules
+          files, not prompt snippets in READMEs.
+        </div>
+      ),
+    },
+    {
+      title: 'Automatic Discovery',
+      icon: <BookOpen className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Run{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            intent install
+          </span>{' '}
+          and the CLI discovers every intent-enabled package in your
+          dependencies, wiring skills into your agent configuration — CLAUDE.md,
+          .cursorrules, whatever your tooling expects.
+        </div>
+      ),
+    },
+    {
+      title: 'Staleness Detection',
+      icon: <RefreshCw className={twMerge(textStyles)} />,
+      description: (
+        <div>
+          Each skill declares its source docs. When those docs change,{' '}
+          <span className={twMerge('font-semibold', textStyles)}>
+            intent stale
+          </span>{' '}
+          flags the skill for review. Run it in CI and you get a failing check
+          when sources drift — skills become part of your release checklist.
+        </div>
+      ),
+    },
+  ],
+} satisfies Library

src/libraries/intent.tsx

@@ -584,6 +584,32 @@ export const ai: LibrarySlim = {
   defaultDocs: 'getting-started/overview',
 }
 
+export const intent: LibrarySlim = {
+  id: 'intent',
+  name: 'TanStack Intent',
+  cardStyles: 'text-sky-500 dark:text-sky-400 hover:border-current',
+  to: '/intent',
+  tagline:
+    'Ship compositional knowledge for AI coding agents alongside your npm packages',
+  description:
+    'A toolkit for generating, discovering, and maintaining skills — knowledge encoded for AI coding agents — shipped as npm packages that travel with your code.',
+  badge: 'alpha',
+  bgStyle: 'bg-sky-500',
+  borderStyle: 'border-sky-500/50',
+  textStyle: 'text-sky-500 dark:text-sky-400',
+  textColor: 'text-sky-600 dark:text-sky-400',
+  colorFrom: 'from-sky-500',
+  colorTo: 'to-sky-700',
+  bgRadial: 'from-sky-500 via-sky-700/50 to-transparent',
+  repo: 'tanstack/intent',
+  frameworks: [],
+  latestVersion: 'v0',
+  latestBranch: 'main',
+  availableVersions: ['v0'],
+  ogImage: 'https://github.com/tanstack/intent/raw/main/media/repo-header.png',
+  defaultDocs: 'overview',
+}
+
 export const config: LibrarySlim = {
   id: 'config',
   name: 'TanStack Config',
@@ -712,6 +738,7 @@ export const libraries: LibrarySlim[] = [
   form,
   db,
   ai,
+  intent,
   virtual,
   pacer,
   hotkeys,
@@ -761,7 +788,7 @@ export const librariesByGroup = {
   state: [start, router, query, db, store, ai],
   headlessUI: [table, form, hotkeys],
   performance: [virtual, pacer],
-  tooling: [devtools, config, cli],
+  tooling: [devtools, config, cli, intent],
 }
 
 export const librariesGroupNamesMap = {
@@ -801,4 +828,5 @@ export const SIDEBAR_LIBRARY_IDS = [
   'store',
   'devtools',
   'cli',
+  'intent',
 ] as const satisfies readonly LibraryId[]

src/libraries/libraries.ts

@@ -24,6 +24,7 @@ export type LibraryId =
   | 'hotkeys'
   | 'db'
   | 'ai'
+  | 'intent'
   | 'config'
   | 'devtools'
   | 'mcp'

src/libraries/types.ts

@@ -32,6 +32,7 @@ const landingComponents: Partial<
   ai: React.lazy(() => import('~/components/landing/AiLanding')),
   devtools: React.lazy(() => import('~/components/landing/DevtoolsLanding')),
   cli: React.lazy(() => import('~/components/landing/CliLanding')),
+  intent: React.lazy(() => import('~/components/landing/IntentLanding')),
 }
 
 export const Route = createFileRoute('/$libraryId/$version/')({