ia-react-frontend

Guide React frontend implementation with component patterns, effect rules, and Vitest testing.

30|3|Updated Feb 22, 2026

Search Tags:#typescript #vitest #react #hooks #concurrency #next.js #react-testing-library

Ready to run

npx skills add https://github.com/iliaal/whetstone --skill ia-react-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ia-react-frontend
Source: https://github.com/iliaal/whetstone/tree/main/plugins/whetstone/skills/ia-react-frontend
Command: npx skills add https://github.com/iliaal/whetstone --skill ia-react-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents fragile React implementations by enforcing clear component patterns, correct effect usage, safe concurrency handling, and reliable testing practices.

Core Features & Use Cases

React + TypeScript component guidance: Props, children typing, discriminated unions, hooks patterns, and null-safe context usage.
Effects and state discipline: Effect decision trees, dependency safety rules, cleanup requirements, and cancellation strategies.
Race-class bug prevention & review checks: Identifies common production failure modes like lifecycle cleanup gaps, remount timing mistakes, stale async, and invalid UI state.
Testing standards: Vitest + React Testing Library patterns for component, hook, and mocking workflows.

Quick Start

Ask the agent to review or implement your React component using App Router/Next.js conventions and explicitly verify effects, concurrency, and Vitest + RTL tests for the described behavior.

Frequently Asked Questions about ia-react-frontend

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

FAQPage Schema

How do I avoid race conditions and stale async data in React components?▼

Prevent race conditions in React components by applying effect cleanup requirements, cancellation strategies, and dependency safety rules. Enforcing these patterns stops stale async results and remount timing mistakes that cause invalid UI state.

How do I structure and type React components with TypeScript and Next.js App Router?▼

Structure React components with TypeScript by applying discriminated unions for props, null-safe context usage, and hooks patterns. Next.js App Router routing conventions are enforced alongside these typing rules to maintain disciplined component architecture.

When do I need to use React effects and how do I manage their dependencies safely?▼

React effects should be used by following an effect decision tree that checks dependency safety rules and cleanup requirements. This ensures state management discipline and prevents lifecycle cleanup gaps in production.

What's the best way to test React components and hooks with Vitest and React Testing Library?▼

Test React components and hooks using Vitest and React Testing Library by following established patterns for component queries, hook testing, and mocking workflows. These testing standards ensure reliable validation of described behavior.

Can I use this to review existing React code for concurrency and state management bugs?▼

Yes, you can review existing React code for concurrency and state management bugs. The review process checks for race-class issues, lifecycle cleanup gaps, remount timing mistakes, and invalid UI state to prevent production failures.