Tanstack seo

Skill magnusrodseth/dotfiles/.claude/skills/tanstack-seo

⚙️ There are many like them, but these dotfiles are mine. A stow-managed macOS setup: Zsh, Neovim, tmux, Ghostty, and a pile of Claude Code tooling.

Install

npx -y skills add magnusrodseth/dotfiles --skill tanstack-seo

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Complete SEO setup for TanStack Router/Start: OG image generation (Satori + Resvg), meta helpers, JSON-LD structured data, sitemap, robots.txt, llms.txt, canonical URLs, Twitter Cards, web manifest.

SKILL.md

3.8 KB, 970 tokens by cl100k_base, as published. Nobody here has run it

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.