AgentSkillsCN

tanstack-website

借助 TanStack MCP 搜索文档、获取页面、列出库文件,并创建 TanStack 应用。涵盖 TanStack 官网作为博客的功能:静态内容配置、TanStack DevTools 集成,以及针对 SEO 与代理访问的优化。适用于在 TanStack 官网、博客、静态内容、DevTools、SEO、代理访问、TanStack 文档,或 TanStack 工具链上开展工作时使用。

SKILL.md
--- frontmatter
name: tanstack-website
description: Uses the TanStack MCP to search docs, fetch pages, list libraries, and create TanStack apps. Covers the TanStack website as a blog: static content configuration, TanStack DevTools integration, and optimization for SEO and agent access. Use when working on the TanStack website, blog, static content, DevTools, SEO, agent access, TanStack docs, or TanStack tooling.

TanStack Website

Use the TanStack MCP

When the task involves TanStack docs, APIs, or app creation, use the TanStack MCP (user-tanstack) via call_mcp_tool. Do not guess or use generic web search for TanStack-specific information.

Before calling any tool, read its descriptor from mcps/user-tanstack/tools/<toolName>.json for parameters, then call with server user-tanstack.

Tool reference

ToolPurposeKey parameters
tanstack_search_docsFind docs by queryquery (required); optional: library, framework, limit
tanstack_docFetch a doc pagelibrary, path (required); optional: version
tanstack_list_librariesList librariesoptional: group (state, headlessUI, performance, tooling)
tanstack_ecosystemEcosystem partnersoptional: category, library
listTanStackAddOnsAdd-ons for new appsframework (required; React or Solid)
createTanStackApplicationCreate TanStack appframework, projectName, cwd, addOns, targetDir (required); optional: addOnOptions

When to use which: Need a doc snippet → tanstack_search_docs. Need full page → tanstack_doc. Scaffolding app → listTanStackAddOns then createTanStackApplication.

Blog and static content

The TanStack website is a blog. Ensure static content is properly configured:

  • Build output and routes for blog posts
  • Content sources (e.g. markdown, CMS)
  • SSG/static export so posts are pre-rendered

SEO and agent access

Optimize for:

  • SEO: Meta tags, structured data (JSON-LD), sitemaps, canonical URLs, semantic HTML
  • Agent access: Clear structure, machine-readable metadata, optional robots/LLM-friendly hints (e.g. clear headings, descriptive links)

TanStack DevTools

For a static blog, integrate only the TanStack DevTools that apply: typically Router DevTools (for route/build debugging in development). Omit React Query DevTools and Table DevTools unless the blog adds client-side data or tables. Enable in development; gate or strip in production builds.