Strategic File Selection: Nghệ Thuật Chọn Context
Một trong những mistakes phổ biến nhất của người mới là include quá nhiều files hoặc chọn sai files. Bài học này sẽ dạy bạn framework để chọn context một cách strategic.
The "Relevance Pyramid"
▲ Most Relevant
/|\
/ | \ Active Files: File bạn đang edit
/ | \
/ | \ Related Files: Dependencies, imports
/ | \
/ | \ Reference Files: Similar patterns
/ | \
/ | \ Least Relevant
Framework SMART File Selection
S - Scope (Phạm vi): Xác định rõ task đang làm gì.
Task: "Thêm dark mode toggle"
Scope: Theme, Layout components, CSS variables
NOT in scope: API routes, database, auth
M - Main Files: Files trực tiếp liên quan đến task.
✅ Include:
- ThemeProvider.tsx
- globals.css (CSS variables)
- Navbar.tsx (nơi toggle button)
A - Adjacent Files: Files có thể bị ảnh hưởng.
✅ Consider:
- tailwind.config.ts (dark mode config)
- next.config.js (nếu dùng next-themes)
R - Reference Files: Files có patterns tương tự để AI học theo.
✅ Reference:
- Một component đã có dark mode styling
T - Types (Nếu TypeScript): Always include type definitions.
✅ Include:
- types/theme.ts
- types/index.ts (shared types)
Patterns Theo Task Type
UI Component Development:
@file component.tsx # The component
@file component.styles.ts # Styles if separate
@file types.ts # Type definitions
@folder similar-component # Reference pattern
API Route Development:
@file route.ts # The route
@file lib/db.ts # Database utilities
@file types/api.ts # API types
@file middleware.ts # If relevant
Bug Fixing:
@file problematic-file.ts # Where bug is
@file related-files # Connected code
# Paste error message in prompt
Refactoring:
@file target-file.ts # File to refactor
@folder new-pattern # Example of desired pattern
@file tests/target.test.ts # Existing tests
Folder Structure Best Practices
Organize code để AI dễ navigate:
src/
├── components/
│ ├── ui/ # Reusable UI components
│ └── features/ # Feature-specific components
├── lib/ # Utilities and helpers
├── types/ # Type definitions
├── hooks/ # Custom hooks
└── app/ # Routes (Next.js)
Common Mistakes & Fixes
| Mistake | Problem | Fix |
|---|---|---|
Include whole node_modules | Overwhelm context | Never include |
| Include all components | AI confused | Only relevant ones |
| Forget type files | Type errors in output | Always include types |
| Include test files for feature work | Unnecessary noise | Only if writing tests |
| No reference patterns | AI invents new patterns | Include 1 good example |
Pro Tips
- Use .cursorignore: Exclude folders AI should never see
- Create context groups: Save common file combinations
- Minimal viable context: Start small, add if needed
- Clean imports: Well-organized imports help AI understand structure
💡 Remember: AI quality ∝ Context quality. Better context = better code.
Bài Tập
Cho task: "Add loading skeleton to product list". List ra exactly những files nào nên include và tại sao. So sánh với approach include toàn bộ components/ folder.
