About tanstack-highlight
tanstack-highlight is a guidance skill for configuring TanStack syntax highlighting across language support, frameworks, Markdown, themes, and annotations. It directs developers to version-matched references and routes tasks by package and framework.
Key features
- 01Language selection and extension
- 02Framework and Markdown integration
- 03Themes and annotations
- 04Package-version-aware guidance
Use cases
- 01Configure highlighting for selected languages
- 02Integrate code highlighting in React or Markdown
- 03Style highlighted code and add annotations
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/tanstack-highlightin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
.tanstack-product-skill.jsonLICENSEagents/openai.yamllicenses/a09cf172b475f76e0cb456e3cd346b1aa3fe5169ae5454f9f7fbe98b3e93c85f.txtreferences/integrations.mdlanguages-configuration.mdPROVENANCE.jsonROUTES.jsonSOURCES.mdthemes-annotations.mdreferences/assets/tanstack-highlight-configure-selective-highlighting/references/languages.mdreferences/assets/tanstack-highlight-extend-language-support/references/tokenizer-patterns.mdreferences/assets/tanstack-highlight-integrate-framework-code-blocks/references/octane-components.mdoctane-mdx.mdreact.mdreferences/assets/tanstack-highlight-integrate-markdown-pipelines/references/direct-fences.mdrehype.mdremark.mdreferences/assets/tanstack-highlight-theme-and-annotate-code/references/themes-and-tokens.mdreferences/guides/tanstack-highlight-configure-selective-highlighting-aee9011b.mdtanstack-highlight-extend-language-support-752c4660.mdtanstack-highlight-integrate-framework-code-blocks-9c88ca76.mdtanstack-highlight-integrate-markdown-pipelines-32cb443f.mdtanstack-highlight-theme-and-annotate-code-f5bc5628.mdDetails
From the project READMETanStack Highlight
Syntax-highlighting guidance for language support, selective loading, Markdown pipelines, themes, and annotations.
Confirm the installed package version.
Workflow
- Inspect installed TanStack packages and exact versions.
- Read the adapter reference for the detected framework when the task uses an adapter.
- Topic references are indexes. Choose one guide or section for the task; follow its prerequisite links only when needed.
- Prefer installed package types and version-matched source guidance over memory.
- Preserve headless/core behavior when translating examples to a framework adapter.
Task routing
- Languages and configuration — Selective highlighting and language extension.
- Framework and Markdown integration — Framework code blocks and Markdown pipelines.
- Themes and annotations — Themes, styling, and annotations.
Framework routing
- Vanilla — detect
@tanstack/highlight. Read Languages and configuration. Shared guidance; check adapter-specific differences. - React — detect
@tanstack/highlight/react. Read Framework and Markdown integration. Shared guidance; check adapter-specific differences.
Product boundaries
Use these separate product skills when the task crosses their boundary: tanstack-markdown.
See source provenance for exact upstream inputs and deduplication records.
Comments
Markdown supported