blog-dev

Review React, TanStack React Query, and TypeScript code against targeted engineering rules.

1|1|Updated Jul 31, 2023
One-click install
npx skills add https://github.com/austinwilcox/dotfiles --skill blog-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: blog-dev
Source: https://github.com/austinwilcox/dotfiles/tree/main/.claude/skills/blog-dev
Command: npx skills add https://github.com/austinwilcox/dotfiles --skill blog-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you avoid common React, TanStack React Query, and TypeScript mistakes by turning a curated set of engineering rules into targeted guidance during coding and review.

Core Features & Use Cases

  • React Query correctness: Guides proper use of queryKey semantics, cache behavior, staleTime, and mutation patterns during feature work and code reviews.
  • Hook and state safety: Flags risky patterns like syncing props into state, misuse of useEffect, and stale closures that cause subtle bugs.
  • TypeScript robustness: Promotes safer typing practices by discouraging any, using discriminated unions, and avoiding type-assertion “silencing.”

Quick Start

Use the blog-dev skill when reviewing a React + TanStack Query + TypeScript change or when asking for anti-patterns, and request: "Use blog-dev to review this React Query + TypeScript snippet and return the 1–3 most relevant rules with reasoning and any likely source article names."

Frequently Asked Questions about blog-dev

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

FAQPage Schema
How do I avoid stale data and unsafe state synchronization in React Query?

Prevent stale data and unsafe state synchronization in React Query by enforcing correct queryKey semantics, cache behavior, staleTime configuration, and safe mutation patterns during feature development and code reviews.

What are common TypeScript anti-patterns when using TanStack React Query?

Common TypeScript anti-patterns when using TanStack React Query include using `any`, unsafe type-assertion silencing, and lacking discriminated unions. Apply safer typing practices to prevent type-safety regressions in async flows.

How do I review React useEffect hooks for anti-patterns and stale closures?

Review React useEffect hooks for anti-patterns and stale closures by flagging risky patterns like syncing props into state and misusing effect dependencies, applying targeted guardrails to catch known bug-causing mistakes.

Does this code review approach apply to Vue or Angular async state management?

No, this code review approach does not apply to Vue or Angular async state management. The targeted rules and guardrails are strictly scoped to React, TanStack React Query, and TypeScript code paths, staying silent on unrelated domains.

Why does my TypeScript code lose type-safety during React Query refactoring?

Your TypeScript code loses type-safety during React Query refactoring when type-assertions silence errors or discriminated unions are missing. Enforce safer typing practices to catch type-safety regressions in async flows.