skills.rest
cill-i-am
cill-i-amCOMMUNITY
Explore all skills by this author →
𝕏@cillo_bGitHub

devtools-vite-plugin

Orchestrate TanStack Devtools integration in Vite with plugin ordering and production stripping.

Updated Apr 1, 2026
Search Tags:#tanstack#plugin#devtools#vite#editor-integration#source-inspection#console-piping
One-click install
npx skills add https://github.com/cill-i-am/task-tracker --skill devtools-vite-plugin-cill-i-am
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools-vite-plugin
Source: https://github.com/cill-i-am/task-tracker/tree/main/.agents/skills/tanstack-devtools-vite-plugin
Command: npx skills add https://github.com/cill-i-am/task-tracker --skill devtools-vite-plugin-cill-i-am

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Ensures robust TanStack Devtools integration in Vite projects by guaranteeing dev-time tooling loads first, enabling reliable source inspection, console piping, and editor integration.

Core Features & Use Cases

  • Source inspection with data-tsd-source attributes and a guaranteed-first-plugin order in Vite config for dependable navigation.
  • Bidirectional console piping, enhanced logging, and a server event bus to coordinate client-server devtools workflows during development.
  • Production stripping to remove devtools code in production builds while preserving development-time capabilities and marketplace integration.

Quick Start

Install in your Vite config by adding devtools() from @tanstack/devtools-vite and place it before framework plugins; configure as needed for your project.

Frequently Asked Questions about devtools-vite-plugin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure TanStack Devtools in a Vite project?▼

To configure TanStack Devtools in Vite, add the devtools() plugin from @tanstack/devtools-vite to your Vite config and ensure it loads before framework plugins to guarantee correct operation.

What does TanStack Devtools Vite plugin ordering achieve?▼

Vite plugin ordering for TanStack Devtools guarantees dev-time tooling loads first, enabling reliable source inspection, bidirectional console piping, and enhanced logging across development workflows.

Do I need a specific package to enable TanStack Devtools source inspection?▼

Yes, you need the @tanstack/devtools-vite package installed in your Vite environment to enable source inspection using data-tsd-source attributes and dependable editor navigation.

Can Vite automatically strip TanStack Devtools code in production builds?▼

Yes, the integration performs production stripping to remove TanStack Devtools code in production builds while preserving development-time capabilities like console piping and the server event bus.

What is the best way to coordinate client-server devtools workflows during development?▼

The best way to coordinate client-server devtools workflows is using the integration's server event bus and bidirectional console piping, which synchronize communication during local development.

Why is my TanStack Devtools Vite plugin not working during development?▼

TanStack Devtools Vite plugin failures often stem from incorrect plugin ordering; the devtools() plugin must be placed before framework plugins in the Vite config to guarantee correct operation.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
DaleSeoDaleSeo
4

bun-build

Automate production bundle creation for Bun projects with Bun.build.

Community
Advanced
Pama-LeePama-Lee

ordo-editor-component

Integrate Ordo visual editor components into Vue and React applications.

Community
Intermediate
matthewharwoodmatthewharwood
1

tanstack-devtools

Integrate TanStack DevTools into dean-stack with dev-only Vite plugin gating.

Community
Advanced