agentskills.codes
TA

tanstack-seo

by magnusrodsethCodingSource

A full SEO implementation for TanStack Start/Router including dynamic images, metadata, and structured data schemas.

SEOFrontendNext.jsReact

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)
Intermediate

Key capabilities

  • →Generate dynamic OG images with Satori + Resvg
  • →Manage centralized SEO configuration and meta tag helpers
  • →Implement structured data (JSON-LD) for various schemas
  • →Create dynamic XML sitemaps
  • →Configure robots.txt and llms.txt for AI crawlers

How it works

The skill sets up SEO by creating a brand config, SEO utility functions, an OG image generator, server routes for sitemap and AI crawlers, and wiring these into root and per-route layouts.

Inputs & outputs

You give it
Brand configuration and SEO metadata
You get back
A complete SEO setup including dynamic OG images, JSON-LD, sitemap, and meta tags

When to use tanstack-seo

  • →Implementing project-wide SEO
  • →Generating dynamic OG images
  • →Adding schema.org markup

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.

When not to use it

  • →When not using TanStack Router / TanStack Start projects
  • →When not needing dynamic OG image generation
  • →When not requiring structured data or sitemaps

Prerequisites

satori@resvg/resvg-js

Limitations

  • →Requires TanStack Router / TanStack Start projects
  • →OG image generation is server-side only
  • →Uses TanStack Router's built-in head() API

How it compares

This workflow provides a structured and complete SEO implementation tailored for TanStack projects, automating many configurations that would otherwise be manual and fragmented.

Compared to similar skills

tanstack-seo side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
tanstack-seo (this skill)05moReviewIntermediate
nextjs-developer3283moNo flagsAdvanced
landing-page-guide110moReviewIntermediate
landing-page-guide-v2489moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by magnusrodseth

View all by magnusrodseth →

write-in-my-voice

magnusrodseth

Draft or rewrite text in Magnus Rødseth's own voice, in Norwegian or English. Use when Magnus asks to write, draft, reply to, or rewrite a message, email, LinkedIn DM, post, outreach, testimonial, or blog post / article "in my voice", "as me", "how I'd say it", "sound like me", or wants AI-drafted t

00

You might also like

nextjs-developer

zenobi-us

Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.

328531

landing-page-guide

bear2u

Comprehensive guide for creating effective landing pages using Next.js or React. This skill should be used when users request to create landing pages, marketing pages, or product pages that require the 11 essential elements for high-converting landing pages. Specifically designed for Next.js 14+ App Router with ShadCN UI components.

16

landing-page-guide-v2

bear2u

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.

48105

frontend-developer

sickn33

Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.

2782

nextjs-best-practices

davila7

Next.js App Router principles. Server Components, data fetching, routing patterns.

3164

frontend-code-review

langgenius

Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.

1174

Search skills

Search the agent skills registry