react-typescript-development_skill

Overview

This skill helps develop and debug React + TypeScript frontends that integrate with Tauri commands, Ant Design UI, and TanStack Query patterns. It enforces a small set of practical rules to keep types sound, side effects safe, and user-facing errors consistent. The goal is reliable component/hooks code, predictable command usage, and measurable UI performance improvements.

How this skill works

The skill inspects code for correct Tauri command usage by ensuring only commands exported from frontend/src/bindings.ts are called. It checks for forbidden patterns like console.* and as any, enforces top-level hook invocation with complete dependency arrays, and verifies Ant Design form validation and compact table styling. It also recommends performance hooks (useMemo, useCallback) and virtualization for large lists.

When to use it

• Building or reviewing React + TypeScript components that call Tauri commands
• Implementing Ant Design forms, tables, and interactive UI behaviors
• Creating custom Hooks that fetch or transform data
• Optimizing frontend performance for large lists or expensive computations
• Troubleshooting front-to-back integration between Tauri and the React UI

Best practices

• Always call Tauri commands via frontend/src/bindings.ts commands and handle ApiResponse shapes explicitly
• Never use console.*; surface messages to users with message.info/warning/error from Ant Design
• Avoid as any; prefer type guards, discriminated unions, or precise interfaces
• Call Hooks only at the component top level and include all reactive dependencies
• Use useMemo for heavy calculations, useCallback for stable callbacks, and react-window for long lists
• Keep table row height compact: th/td padding 6px 10px and line-height 1.2; compact Tag styles in cells

Example use cases

• Implementing a factory list hook that loads data via commands.getAllFactories and returns typed items
• Building Ant Design forms with Form.Item validation that shows message.error on API failure
• Converting a large table to react-window virtualization while maintaining compact row styling
• Creating a data-fetching hook that uses TanStack Query patterns and useMemo for derived values
• Handling Tauri command errors by mapping ApiResponse.error to user-facing message.warning