скилл

tanstack-query-expert — скилл для Claude Code: настройка и установка

Q: Как установить tanstack-query-expert в Claude Code?

Запустите `npx claude-code-templates@latest --skill web-development/tanstack-query-expert`.

Скилл помогает проектировать работу TanStack Query в React и Next.js: от запросов и кеша до мутаций и серверной гидратации. Пригодится при настройке или переработке загрузки данных.

Установить в Claude Code · Через claude-code-templates Все способы и платформы ↓

npx claude-code-templates@latest --skill web-development/tanstack-query-expert

Открыть на GitHub

Что делает tanstack-query-expert

Скилл подсказывает, как оформлять запросы через пользовательские хуки, задавать ключи кеша и настраивать параметры свежести данных и повторных попыток. Он также охватывает мутации, обновление кеша после изменений на сервере и оптимистическое изменение данных с откатом при ошибке.

Для Next.js App Router описана передача данных из серверного компонента в клиентский через гидратацию. Скилл рассчитан на проекты с TanStack Query; в примерах используются API библиотеки и TypeScript. После мутации кеш нужно обновить или инвалидировать, иначе клиент может показывать прежние данные.

Установить скилл можно командой из каталога шаблонов. Она запускается через npx.

Какие задачи решает

оформить загрузку данных в пользовательские хуки
подобрать ключи для кеша запросов
обновить кеш после мутации
показать оптимистическое изменение и откатить его при ошибке
передать данные из серверного компонента Next.js клиентскому

Примеры запросов агенту

Настрой загрузку профиля пользователя через TanStack Query и вынеси запрос в пользовательский хук.
Покажи, как обновить кеш после создания записи через мутацию.
Подготовь для App Router передачу предварительно загруженных данных в клиентский компонент.

Как установить tanstack-query-expert

1Через claude-code-templates

npx claude-code-templates@latest --skill web-development/tanstack-query-expert

2Через Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill tanstack-query-expert -a claude-code

3Вручную: положить файлы

~/.claude/skills/tanstack-query-expert/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/tanstack-query-expert/

Вручную: положить файлы

.agents/skills/tanstack-query-expert/SKILL.md

Для всех проектов — ~/.agents/skills/

Вручную: положить файлы

.cursor/skills/tanstack-query-expert/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates tanstack-query-expert

2Вручную: положить файлы

.github/skills/tanstack-query-expert/SKILL.md

Командой платформы

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/tanstack-query-expert

Вручную: положить файлы

.devin/skills/tanstack-query-expert/SKILL.md

Старый путь .windsurf/skills/ тоже читается

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о tanstack-query-expert

Как установить tanstack-query-expert в Claude Code?

Запустите npx claude-code-templates@latest --skill web-development/tanstack-query-expert.

Что делает tanstack-query-expert?

Скилл помогает работать с запросами, кешем и мутациями TanStack Query в React и Next.js, включая гидратацию данных в App Router.

Как скилл предлагает обрабатывать оптимистическое обновление?

Изменить кеш до ответа сервера, сохранить прежнее значение и восстановить его, если запрос завершился ошибкой.

Похожие скиллы

Все скиллы по теме «Фронтенд и UI» →

frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора495

Весь набор →

graph-query Скилл обращается к графу зависимостей проекта, чтобы найти связи между компонентами и оценить последствия правок. Пригодится перед изменением функции или модели. 202установок security-threat-model Скилл разбирает репозиторий для AppSec-моделирования угроз и сохраняет краткий Markdown-отчёт с рисками и мерами защиты. 201установок blueprint-mode-codex Субагент, который ведёт задачу по одному из четырёх сценариев и проверяет каждый шаг по файлам проекта, а не по догадкам. 201установок prompt-engineering-instructor Учит агента вытаскивать из ответов модели данные по схеме Pydantic: с проверкой типов, повторами при ошибке и стримингом. 198установок voice-agents Помогает спроектировать голосового агента: выбрать архитектуру, уложиться в задержку и не сломаться на перебиваниях. 194установок production-code-audit Скилл сканирует кодовую базу, ищет проблемы в архитектуре, безопасности и качестве, затем вносит исправления. Нужен перед подготовкой проекта к продакшену. 193установок monte-carlo-simulator Слэш-команда запускает симуляцию Монте-Карло: распределения вероятностей, доверительные интервалы и оценка риска. 193установок tdd-gate Хук блокирует правку production-файлов, пока рядом нет теста. Пригодится, если хотите удержать TDD в работе с агентом. 192установок