Learning Timeline
Key Insights
Kepentingan Fail Dokumentasi
Sentiasa kemaskini fail maklumat projek (seperti .md file) setiap kali anda selesai sesi coding. Ini memudahkan AI 'mengingat' apa yang telah anda buat bila anda sambung semula nanti.
Vibe Coding: Trust but Verify
Walaupun AI menjana kod dengan pantas, sentiasa semak 'Diff View' sebelum menekan 'Accept'. Pastikan AI tidak membuang fungsi penting (logic deletion) secara tidak sengaja.
Gunakan Model 'Flash' untuk Iterasi UI
Untuk perubahan UI yang kecil dan berulang, gunakan Gemini 2.0 Flash kerana ia lebih laju. Gunakan model yang lebih 'smart' seperti Claude 3.5 Sonnet hanya untuk logik algoritma yang kompleks.
Prompts
Restoring Project Context
Target:
Cursor Chat (Gemini 2.0)
I want to continue working on this project. Here is the @PROJECT_STRUCTURE.md. Please read the current state of the app and let me know if you are ready to add new features.
Feature Generation: Template Picker
Target:
Cursor Composer
Based on the current components, create a new 'Template Picker' modal. It should allow users to choose between 3 different layout presets (Minimal, Professional, Bold). Use Tailwind CSS for styling.
Implementing Drag & Drop
Target:
Cursor Chat
Refactor the current links list to support drag and drop reordering. Use the dnd-kit library. Make sure the state updates correctly in the database after the drop action.
Step by Step
Menyambung Konteks Sesi Pembangunan (Context Restoration)
- Buka editor kod (VS Code atau Cursor) dan akses tetingkap Chat AI (Ctrl+L atau Cmd+L).
- Lampirkan fail dokumentasi projek (contoh: 'PROJECT_STRUCTURE.md' atau 'README.md') ke dalam context dengan menaip '@' dan memilih fail tersebut.
- Masukkan prompt untuk memberitahu AI tentang status terkini projek bagi mengelakkan ralat 'hallucination'.
- Tunggu AI mengesahkan pemahaman struktur fail dan komponen sedia ada sebelum memulakan tugasan baru.
Membina Ciri 'Template Picker' Menggunakan Gemini 2.0 Flash
- Buka panel chat dan pastikan model 'Gemini 2.0 Flash' dipilih untuk kelajuan respons yang tinggi.
- Tulis prompt yang spesifik untuk membina komponen 'Template Picker' yang membolehkan pengguna memilih layout profil.
- Klik butang 'Apply' pada blok kod yang dijana oleh AI.
- Periksa 'Diff View' untuk melihat perubahan kod: kod lama (merah) dan kod baru (hijau).
- Klik 'Accept' pada setiap fail yang diubah suai untuk mengemaskini kod sumber projek.
Mengubah UI kepada 'Drag & Drop' dengan AI Chat
- Kenal pasti komponen UI yang ingin diubah (contoh: senarai pautan atau elemen profil).
- Berikan arahan dalam chat untuk menukar logik susunan manual kepada fungsi 'Drag and Drop' menggunakan library yang sesuai (seperti dnd-kit atau react-beautiful-dnd).
- Gunakan butang 'Reject' jika kod yang dijana tidak memenuhi kriteria atau merosakkan susunan UI sedia ada.
- Baiki prompt dengan memberikan butiran tambahan seperti 'Ensure the drag handle is visible' dan klik 'Generate' semula.
- Klik 'Accept All' sebaik sahaja fungsi 'Drag & Drop' berfungsi dengan lancar dalam preview.
Debugging Ralat Kod secara Automatik
- Apabila ralat muncul di terminal atau browser console, salin (copy) mesej ralat tersebut.
- Tampal (paste) ralat ke dalam AI chat atau klik butang 'Debug with AI' jika tersedia di terminal.
- Biarkan AI menganalisis 'stack trace' dan mencadangkan penyelesaian.
- Klik 'Apply' untuk membaiki kod yang menyebabkan ralat tersebut.
- Simpan fail dan lakukan 'Refresh' pada aplikasi untuk memastikan ralat telah hilang.
