agentskills.codes
TA

tanstack-seo

by magnusrodsethSource

Complete SEO setup for TanStack Router / TanStack Start projects. Covers: dynamic OG image generation with Satori + Resvg, centralized SEO config and meta tag helpers, structured data (JSON-LD) for Organization/WebSite/Article/FAQ/Breadcrumb/Software schemas, dynamic XML sitemap, robots.txt, llms.tx

Install

mkdir -p .claude/skills/tanstack-seo && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16708" && unzip -o skill.zip -d .claude/skills/tanstack-seo && rm skill.zip

Installs to .claude/skills/tanstack-seo

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Complete SEO setup for TanStack Router / TanStack Start projects. Covers: dynamic OG image generation with Satori + Resvg, centralized SEO config and meta tag helpers, structured data (JSON-LD) for Organization/WebSite/Article/FAQ/Breadcrumb/Software schemas, dynamic XML sitemap, robots.txt, llms.txt for AI crawlers, per-route head functions with canonical URLs, Twitter Cards, Open Graph tags, web manifest, and favicon configuration. Use when setting up SEO for a new TanStack project, adding OG image generation, creating sitemaps, adding structured data, implementing meta tags, or optimizing a TanStack site for search engines and social sharing.
653 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)

About this skill

TanStack SEO

Complete SEO implementation for TanStack Router / TanStack Start projects. Nine layers covering crawlability, social sharing, structured data, and AI discoverability.

Dependencies

# OG image generation (server-side only)
bun add satori @resvg/resvg-js

No other SEO-specific dependencies. Everything uses TanStack Router's built-in head() API and server route handlers.

Architecture

src/
├── lib/
│   ├── seo.ts              # Centralized config, meta helpers, JSON-LD generators
│   ├── og-image.tsx         # Satori + Resvg OG image generator (JSX → SVG → PNG)
│   └── brand/index.ts       # Brand constants (name, description, social, keywords)
├── routes/
│   ├── __root.tsx           # Base HTML: charset, viewport, favicons, default OG, site-wide JSON-LD
│   ├── og[.]png.ts          # Server handler: GET /og.png?title=...&description=...
│   ├── sitemap[.]xml.ts     # Dynamic XML sitemap
│   ├── llms[.]txt.ts        # Concise site summary for AI crawlers
│   ├── llms-full[.]txt.ts   # Full content dump for AI crawlers
│   └── (every route)        # Per-route head() with title, description, canonical, OG, JSON-LD
└── public/
    ├── robots.txt           # Crawl rules + sitemap reference
    ├── site.webmanifest     # PWA manifest
    ├── favicon.svg/.png/.ico
    └── apple-touch-icon.png

Setup Workflow

1. Create Brand Config

Create src/lib/brand/index.ts:

export const brand = {
  name: "Your App",
  shortName: "App",
  description: "Your app description for SEO.",
  author: { name: "Your Name", url: "https://yoursite.com" },
  social: { twitter: "@yourhandle", github: "https://github.com/you/repo" },
  keywords: ["keyword1", "keyword2", "keyword3"],
} as const;

2. Create SEO Utility

See references/seo-utilities.md for the complete src/lib/seo.ts. Provides:

  • siteConfig — centralized site metadata
  • getAbsoluteUrl() / getCanonicalUrl() — URL helpers
  • getOGImageUrl(title, description?) — builds dynamic OG image URLs
  • generateMetaTags(seo) — OG + Twitter + robots + keywords meta array
  • generateHead(seo) — meta + canonical link tags (used in every route)
  • Six JSON-LD generators: Organization, WebSite, Article, Breadcrumb, FAQ, Software

3. Create OG Image Generator

See references/og-image.md for:

  • src/lib/og-image.tsx — Satori + Resvg engine with Google Fonts
  • src/routes/og[.]png.ts — server route handler

4. Create Server Routes + Static Files

See references/server-routes.md for:

  • Dynamic sitemap at /sitemap.xml
  • robots.txt (static in public/)
  • llms.txt and llms-full.txt for AI crawlers
  • site.webmanifest for PWA

5. Wire Up Root Layout + Per-Route Heads

See references/route-patterns.md for:

  • __root.tsx head: charset, viewport, favicons, manifest, default OG/Twitter, site-wide JSON-LD
  • Three per-route patterns: static pages, pages with custom OG, dynamic pages (blog/docs)

Key Conventions

  • Filename escaping: [.] escapes dots. og[.]png.ts → /og.png, sitemap[.]xml.ts → /sitemap.xml.
  • Title suffixing: generateMetaTags() auto-appends | Site Name to titles that don't already include it.
  • Cache headers: OG images 24h, sitemaps 1h, llms.txt 24h.
  • Server handlers: Non-HTML routes (PNG, XML, plaintext) use server.handlers.GET with no React component.
  • <html lang="en">: Set in the root layout.

Search skills

Search the agent skills registry