10 Prompt Patterns Hay Nhất Khi Dùng Cursor Cho React

Cursor mạnh cỡ nào phụ thuộc vào cách bạn prompt. Sau hàng trăm giờ sử dụng Cursor cho React projects, mình đúc kết được 10 patterns hiệu quả nhất.

1. Component Scaffold Pattern

Thay vì mô tả chung chung, hãy specify rõ props interface và behavior:

Tạo React component DataTable với:
- Props: data: T[], columns: Column<T>[], onSort, onFilter
- Features: sortable headers, search filter, pagination
- Style: Tailwind CSS, responsive
- TypeScript generic cho type safety

Pattern này cho kết quả chính xác hơn 80% so với prompt đơn giản "tạo data table component".

2. Refactor with Context Pattern

Khi refactor, cung cấp lý do WHY, không chỉ WHAT:

Refactor component này từ useEffect data fetching sang
React Query vì: cần caching, retry logic, và loading states.
Giữ nguyên UI, chỉ thay đổi data layer.

3. Test Generation Pattern

Prompt cụ thể testing framework và coverage mong muốn:

Viết unit tests cho useAuth hook bằng Vitest + RTL.
Cover: login success, login failure, token refresh, logout.
Mock: fetch API calls. Assert: state changes và side effects.

4. Bug Fix Pattern

Mô tả expected vs actual behavior:

Bug: Component UserProfile re-render liên tục.
Expected: Chỉ re-render khi user data thay đổi.
Actual: Re-render mỗi giây dù data không đổi.
Nghi ngờ: useEffect dependency array hoặc context provider.

5. Migration Pattern

Khi upgrade library, specify version cụ thể:

Migrate component này từ React Router v5 sang v6.
Thay Switch bằng Routes, component prop bằng element.
Giữ nguyên logic redirect và auth guard.

6. Performance Optimization Pattern

// Prompt: "Optimize component này - render 500 items và lag"
// Cursor sẽ suggest virtualization:
import { memo, useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';

const OptimizedList = memo(({ items }: { items: Item[] }) => {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 60,
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map((vi) => (
          <div key={vi.key}
               style={{ transform: 'translateY(' + vi.start + 'px)' }}>
            {items[vi.index].name}
          </div>
        ))}
      </div>
    </div>
  );
});

7. API Integration Pattern

Specify endpoint, auth method, và error handling:

Tạo API service cho /api/v1/posts với:
- Methods: GET (list + pagination), POST (create)
- Auth: Bearer token từ NextAuth session
- Error handling: toast cho user errors, Sentry cho server errors
- TypeScript types generated từ API response

8-10. Bonus Patterns

8. Accessibility Pattern: "Thêm ARIA labels và keyboard navigation cho component này theo WCAG 2.1 AA"

9. State Machine Pattern: "Convert component state logic sang XState machine với states: idle, loading, success, error"

10. Documentation Pattern: "Generate JSDoc cho component này, include @example với common use cases"

Pro Tips

Luôn bắt đầu prompt với context (đang làm gì), rồi task (cần gì), cuối cùng là constraints (giới hạn gì). Format này giúp Cursor hiểu intention chính xác hơn rất nhiều.

Bạn có prompt pattern nào hay? Share ở comment để mọi người cùng học!