playbooks

home / skills / cacr92 / wereply / react-typescript-development

react-typescript-development skill

/.trae/skills/react-typescript-development

This skill helps you accelerate React and TypeScript frontends by guiding component, hook, and Ant Design integration while enforcing best practices.

npx playbooks add skill cacr92/wereply --skill react-typescript-development

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.9 KB
---
name: react-typescript-development
description: 当用户要求React/TypeScript组件、Hooks、Ant Design、TanStack Query、Tauri前端联调或前端性能优化时使用。
---

# React TypeScript Development Skill

## 适用范围
- React 组件与 Hooks 开发
- Ant Design 表单与交互
- Tauri 前端命令调用与错误处理

## 关键规则（Critical Rules）
- 只使用 `frontend/src/bindings.ts` 的 `commands`
- 禁止 `console.*`，使用 `message.info/warning/error`
- 禁止 `as any`，用类型守卫或精确类型
- Hooks 仅在顶层调用，依赖完整
- 表格行高紧凑统一：默认 th/td padding 6px 10px、line-height 1.2；表格内 Tag 紧凑化

## 快速模板
### 命令调用（Result + ApiResponse）
```ts
import { commands } from '../bindings';
import { message } from 'antd';

export async function loadFactories(keyword: string | null) {
  const res = await commands.getAllFactories(keyword, null);
  if (res.status === 'error') {
    message.error(String(res.error));
    return [] as const;
  }
  const { success, data, error } = res.data;
  if (!success || !data) {
    message.error(error ?? '加载失败');
    return [] as const;
  }
  return data;
}
```

### Hook 规范
```ts
import { useEffect, useState } from 'react';
import type { Factory } from '../bindings';

export function useFactoryList(keyword: string | null) {
  const [items, setItems] = useState<Factory[]>([]);
  useEffect(() => {
    void loadFactories(keyword).then(setItems);
  }, [keyword]);
  return items;
}
```

## 性能建议
- 复杂计算用 `useMemo`
- 回调用 `useCallback` 固定引用
- 大列表使用 `react-window`

## 表单校验
- 使用 AntD `Form.Item` 规则与自定义校验函数
- 将错误提示直接反馈给用户

## 检查清单
- [ ] 无 `console.*` 与 `as any`
- [ ] 命令调用走 `commands`
- [ ] Hooks 规则与依赖正确
- [ ] 大列表已考虑虚拟滚动
- [ ] 表格行高与内边距保持紧凑统一

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

FAQ

What if I need a command not in bindings.ts?

Add the command to frontend/src/bindings.ts and use it from there so the skill can validate usage and types.

How should I report transient UI errors?

Use message.info or message.warning to surface non-blocking issues; use message.error for failures that block user flow.