Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From frontend-skills
Auto-generates TanStack Router route trees and enforces routing patterns via PostToolUse hooks. Use when setting up TanStack Router or file-based routing.
npx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:setup-tanstack-router**/routes/**/*.tsx**/routes/**/*.tsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- Ban `react-router-dom` imports
Guides TanStack Router setup in React: file-based routing, type-safe search/path params, data loaders, auth protection, code splitting, SSR, error handling, testing, and bundler config.
TanStack Router - 100% type-safe routing, file-based routes, loaders, search params. Use when implementing routing in React apps (NOT Next.js).
Provides type-safe routing for React and Solid apps with file-based routes, search params, data loading, code splitting, and Vite plugin support.
Share bugs, ideas, or general feedback.
react-router-dom importswindow.location navigation (block) + reads (warn)window.location.reload() -- suggest router.invalidate()strict: false in router hooksuseParams()/useSearch()/useLoaderData()/useRouteContext() missing { from }URLSearchParams -- suggest nuqsvalidateSearch when useSearch in route filesAuto-regen route tree on route file change.
Routes dir pattern default /routes/. Update grep pattern in hook scripts if project use different convention:
if ! echo "$file_path" | grep -qE '/routes/'; then # default
if ! echo "$file_path" | grep -qE '/pages/'; then # pages-based
if ! echo "$file_path" | grep -qE '/app/routes/'; then # nested
import { useQueryState, parseAsInteger, parseAsString } from 'nuqs'
function UsersPage() {
const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1))
const [filter, setFilter] = useQueryState('filter', parseAsString)
}
Setup (install, config, verify): see SETUP.md.