Cursor Agent Best Practices cho Frontend Developer: Những gì tôi học được sau 3 tháng

Tại sao Cursor Agent thay đổi cách tôi làm frontend

Sau 3 tháng dùng Cursor Agent hàng ngày để build React components, refactor TypeScript, và debug CSS layout — tôi có thể nói thẳng: đây không phải autocomplete glorified. Đây là một shift thật sự trong workflow.

NVIDIA vừa báo cáo tăng 3x lượng code commit từ 30,000 developer khi dùng Cursor. Salesforce thấy cycle time giảm double-digit. Box tăng roadmap throughput 30-50%. Những con số này không phải marketing — tôi sống với chúng mỗi ngày.

Bắt đầu bằng Plan, không phải Code

Sai lầm lớn nhất của developer mới dùng Cursor Agent: nhảy thẳng vào "làm cái này cho tôi" mà không có context. Agent sẽ code, nhưng output sẽ generic và không phù hợp codebase của bạn.

Workflow đúng — chat với agent trước khi nó code:

// Đừng prompt thế này:
"Tối ưu DataTable component của tôi"

// Hãy prompt thế này:
"Tôi có React component  đang re-render
mỗi khi parent re-render. Component nhận props:
- data: array 500+ items
- onRowClick: callback function
- filters: object

Phân tích nguyên nhân re-render không cần thiết
và đề xuất giải pháp trước khi implement."

Agent sẽ suggest dùng React.memo, useCallback, có thể cả useMemo cho filtered data. Sau đó bạn mới approve và nó implement. Đây là sự khác biệt giữa agent làm đúng và agent làm loạn.

Quản lý Context là kỹ năng quan trọng nhất

Cursor Agent hoạt động trong một context window. Nếu conversation quá dài hoặc mở quá nhiều file không liên quan, agent sẽ "quên" thông tin ở đầu và bắt đầu generate code không nhất quán. Tôi học điều này theo cách đau đớn nhất — một PR với naming convention sai khắp nơi vì agent mất context về team conventions.

Best practices tôi áp dụng:

• Một task, một session: Đừng mix "fix bug login form" với "refactor API layer" trong cùng conversation
• Pin relevant files: Dùng @file để reference đúng files, đừng để agent tự đoán
• Rules file: Tạo .cursor/rules với conventions của team — TypeScript strict mode, naming conventions, import order, component patterns
• Context reset: Sau mỗi task lớn, start session mới thay vì tiếp tục conversation cũ

Workflow thực tế: Build Custom Hook với AI trong 10 giây

Đây là ví dụ concrete. Tôi cần hook để handle infinite scroll với IntersectionObserver. Trước kia tôi mất 20 phút để viết đúng cleanup logic. Với agent:

// Prompt:
// "Viết useInfiniteScroll hook nhận:
// - fetchFn: async (page: number) => { data: T[], hasMore: boolean }
// - threshold: number cho IntersectionObserver (default 0.1)
// - initialPage: number (default 1)
// Yêu cầu: TypeScript generic, cleanup đúng, handle loading/error"

// Output (rút gọn):
export function useInfiniteScroll({
  fetchFn,
  threshold = 0.1,
  initialPage = 1,
}: UseInfiniteScrollOptions) {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(initialPage);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const observerRef = useRef(null);

  const lastItemRef = useCallback(
    (node: HTMLElement | null) => {
      if (loading) return;
      observerRef.current?.disconnect();
      observerRef.current = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting && hasMore) setPage(p => p + 1);
        },
        { threshold }
      );
      if (node) observerRef.current.observe(node);
    },
    [loading, hasMore, threshold]
  );

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    fetchFn(page)
      .then(({ data, hasMore: more }) => {
        if (!cancelled) {
          setItems(prev => [...prev, ...data]);
          setHasMore(more);
        }
      })
      .finally(() => !cancelled && setLoading(false));
    return () => { cancelled = true; };
  }, [page, fetchFn]);

  return { items, loading, hasMore, lastItemRef };
}

50 dòng TypeScript clean, đúng pattern, có cleanup để tránh memory leak. Agent viết trong 10 giây. Tôi review 2 phút, approve.

Customize Workflow với Cursor Rules

File .cursor/rules là secret weapon của tôi. Đây là snippet từ rules file của team:

# .cursor/rules
## React conventions
- Use named exports, never default exports for components
- Props interface named: ComponentNameProps
- Custom hooks prefix: use + PascalCase
- No inline styles — use CSS Modules or Tailwind
- All useEffect must have cleanup if it creates subscriptions/timers

## TypeScript
- strict mode enabled, no 'any' allowed
- Prefer 'interface' for object shapes, 'type' for unions/primitives
- Async functions always have explicit return type

## Testing
- Test file co-located: Component.test.tsx next to Component.tsx
- Use Testing Library, no enzyme

Với rules này, agent tự động follow conventions mà không cần nhắc lại mỗi lần.

Review Code AI sinh ra: Checklist của tôi

Cursor Agent không phải senior dev của bạn. Luôn review trước khi merge. Những điểm tôi check đặc biệt với frontend code:

• Memory leaks trong useEffect — cleanup function có không?
• Missing dependency arrays trong hooks
• Accessibility attributes — aria-label, role, tabIndex có đủ không?
• Bundle size — agent có import cả thư viện khi chỉ cần một utility function không?
• Error boundaries — edge cases có được handle không?

Kết luận

Cursor Agent không thay thế bạn — nó amplify bạn. Developer biết cách orchestrate agent (quản lý context, viết rules tốt, review code kỹ) sẽ ship nhanh gấp 3-5x những người code thuần tay. Skill quan trọng nhất năm 2026 không phải "viết code giỏi" — mà là "chỉ đạo AI để viết code đúng".

Bắt đầu nhỏ: tạo .cursor/rules cho project hiện tại của bạn ngay hôm nay. Đó là ROI cao nhất với effort thấp nhất.