Keyboard shortcuts, workflow optimization, multi-tasking dengan AI, dan kombinasi tools power untuk pembangunan yang lebih pantas dan efisien.
Shortcuts penting untuk mempercepatkan workflow dengan Claude Code dan Claude Codex. Kuasai shortcut ni untuk meningkatkan kepantasan anda.
Claude Code beroperasi di terminal. Shortcut ini adalah untuk terminal dan Claude Code CLI.
Codex beroperasi dalam Visual Studio Code. Shortcut ini adalah untuk editor VS Code.
Shortcut VS Code yang berguna untuk semua fasa pembangunan.
Petua praktikal untuk mengoptimumkan workflow harian dengan AI.
Simpan setiap projek dalam folder berasingan. Guna nama deskriptif. Claude Code berfungsi dalam konteks direktori semasa — struktur folder yang baik membantu AI memahami konteks projek dengan lebih tepat.
Simpan prompt yang selalu guna sebagai template. Contoh: "Bina [komponen] dengan [teknologi]. Termasuk [feature] dan [feature]." Guna template untuk konsistensi dan kepantasan.
Jangan harap AI hasilkan kod sempurna pada percubaan pertama. Guna pendekatan iterative: minta AI hasilkan versi kasar dulu, kemudian minta refinement langkah demi langkah. "Tukar warna jadi biru", "Tambah padding", "Buat responsive".
Bila tanya AI tentang kod, berikan konteks yang cukup: "Saya ada satu fail style.css yang guna flexbox untuk navigation. Saya nak tambah dropdown menu." Konteks membantu AI beri jawapan yang relevan dan tepat.
Bila kod tak jalan, jangan panik. Copy error message dan tanya AI: "Saya dapat error ni: [error]. Ini kod saya: [kod]. Apa yang salah?" AI biasanya boleh diagnose dan cadangkan fix dengan pantas.
Sebelum mula coding untuk feature baru, guna Exa atau Context7 untuk research dulu. "Cari best practices untuk [feature]". AI akan bawa maklumat terkini dari web yang boleh guide implementation anda.
Guna GitHub MCP Server untuk urus version control terus dari Claude Code. "Buat commit dengan mesej: Tambah navigation bar responsive" atau "Buat PR dan hantar untuk review". Jimat masa tukar konteks ke browser.
Guna Playwright untuk automated testing sebelum deploy. "Guna Playwright untuk test semua link dalam navigation page saya." AI akan buka setiap link dan verify ia berfungsi. Jimat masa manual testing.
Salah satu kekuatan utama MCP adalah keupayaan untuk melakukan multiple tasks serentak tanpa tinggalkan terminal. Berikut adalah cara praktikal untuk multi-task dengan AI.
Bayangkan anda nak bina landing page untuk product baru. Dengan MCP, anda boleh:
Hasil Landing page siap dalam masa yang sama — research, coding, testing, deployment — semua dalam satu sesi terminal.
Bila website anda rosak dan anda tak pasti kenapa:
Hasil Bug dikenalpasti, diperbaiki, diverifikasi, dan di-commit — semua dalam terminal.
Tiga pattern produktiviti yang boleh digunakan berulang kali untuk apa-apa projek pembangunan.
Bila guna: Setiap kali nak tambah feature baru atau guna library/tool yang tak familiar.
Contoh prompt lengkap:
Bila guna: Bila website nampak tak betul — broken layout, wrong colors, element hilang.
Contoh prompt lengkap:
Bila guna: Setiap kali nak mula projek baru atau feature besar.
Contoh prompt lengkap:
Kuasa sebenar MCP dan Skills adalah bila digabungkan. Berikut adalah kombinasi tools untuk scenario dunia sebenar.
Tujuan: Analyze website pesaing untuk dapatkan inspirasi design dan content.
Prompt contoh:
Tujuan: Belajar teknologi baru dengan pendekatan hands-on — baca docs, then terus praktik.
Prompt contoh:
Tujuan: Bina feature baru dari konsep hingga deployment dengan quality assurance.
Prompt contoh:
Tujuan: Diagnose, fix, dan verify bug dengan pantas menggunakan workflow sistematik.
Prompt contoh:
Tujuan: Tukar design Figma ke kod HTML/CSS dengan ketepatan tinggi.
Nota: Figma MCP memerlukan authentication. Rujuk plugin-reference.html untuk cara setup.
Ringkasan pantas: Bila nak buat X, guna tool Y.
| Task | Tool / Skill | Contoh Prompt Ringkas |
|---|---|---|
| Cari maklumat terkini | Exa Web Search | Guna Exa cari [topik] |
| Screenshot website | Playwright | Guna Playwright screenshot [url] |
| Dapatkan docs library | Context7 | Guna Context7 cari docs [library] |
| Rujuk Microsoft docs | Microsoft Learn | Guna Microsoft Learn cari [topik] |
| Urus repo/PR | GitHub MCP | Guna GitHub buat PR |
| Rancang projek | Brainstorming Skill | Guna Brainstorming untuk [idea] |
| Tulis kod reliable | TDD Skill | Guna TDD untuk [function] |
| Debug sistematik | Systematic Debugging | Guna Systematic Debugging untuk [issue] |
| Cari semua tools | Plugin Reference | Buka plugin-reference.html |
Berikut adalah GOLDEN RULES yang diamalkan oleh pensyarah. Setiap aturan adalah amalan wajib untuk memaksimumkan produktiviti dan kualiti hasil kerja dengan AI.
Setiap kali selesai kerja, minta AI tulis/update documentation projek. Ini golden rule PALING PENTING. 2 minit documentation = jimat berjam-jam bila sambung kerja nanti.
Guna AI untuk tulis prompt untuk AI lain. Bincang dengan AI Helper → minta tulis prompt penuh → beri pada AI Coder. Ini hasilkan kod yang JAUH lebih berkualiti.
5 soalan wajib sebelum buka AI: Siapa pengguna? Apa masalah? Apa hasil dijangka? Apa constraints? Apa inspirasi? 15 minit fikir = jimat 2 jam iterate.
Sentiasa REVIEW output AI. Baca, test, semak. Anda bertanggungjawab atas kod yang dihasilkan.
Ship dulu, refine kemudian. 3-5 iterasi cukup. Jangan stuck lebih 5 kali — ubah pendekatan, bukan ulang benda sama.
Jangan tunggu "siap". Deploy selepas Langkah 1 siap. Dapatkan feedback awal. Senang nak tunjuk progress.
Setiap projek ada repo GitHub sendiri. Walaupun projek kecil. Ini biasakan pelajar dengan version control.
Kesilapan yang selalu dilakukan oleh pelajar baru (dan kadang-kadang pengajar juga!). Kenal pasti dan elakkan untuk workflow yang lebih lancar.
Masalah: Pelajar buat semua secara manual — search Google guna browser, screenshot guna Snipping Tool, check docs guna website. Tak sedar yang MCP boleh automate semua ni.
Solution: Biasakan diri: setiap kali nak buat sesuatu, tanya dulu "Ada MCP untuk ni tak?" Rujuk plugin-reference.html untuk senarai tools.
Masalah: Guna Playwright untuk carian web (Playwright untuk browser, Exa untuk search). Atau guna Exa untuk screenshot. Setiap MCP ada purpose dia sendiri.
Solution: Ingat fungsi asas setiap MCP: Exa = search web, Playwright = kawal browser, Context7 = docs library. Refer plugin-reference untuk confirmation.
Masalah: Bagi prompt biasa untuk task yang kompleks — "Bina portfolio" terus tanpa brainstorming. Hasilnya kurang terancang dan banyak revision.
Solution: Sebelum mula projek besar, panggil Brainstorming dulu. Sebelum debug, panggil Systematic Debugging. Skills adalah workflow profesional — gunakan ia.
Masalah: Cuba guna semua tools dalam satu prompt — "Guna Exa, Playwright, Context7, Microsoft Learn semua sekali". AI confuse dan hasil kurang fokus.
Solution: Guna tools secara berurutan. Satu tool, satu prompt, satu hasil. Lepas tu baru tool seterusnya. Pendekatan langkah demi langkah lebih berkesan.
Masalah: Pelajar terima hasil MCP dan terus guna tanpa semak. "AI cakap Exa jumpa 5 articles" — tapi tak verify sama ada betul-betul relevant.
Solution: Baca output MCP dengan kritikal. Semak link sumber, bandingkan dengan pengetahuan sedia ada. AI boleh buat silap — anda yang bertanggungjawab.
Masalah: Pelajar tak buka plugin-reference.html — jadi tak tahu tools apa yang ada. Akibatnya, guna cara manual untuk task yang sebenarnya ada MCP.
Solution: Bookmark plugin-reference.html. Setiap kali start sesi coding, buka dulu untuk refresh ingatan tentang tools yang tersedia.
Masalah: Pelajar guna mouse untuk semua — klik sana sini, navigasi menu. Kerja lambat sebab tak guna shortcuts keyboard.
Solution: Hafal 5 shortcuts penting dulu: Ctrl+C, Ctrl+P, Ctrl+`, Ctrl+Shift+P, ↑↓ untuk history. Tambah 5 baru setiap minggu.
Masalah: Pelajar terus tanya "Context7, cari React hooks" tapi tak guna resolve-library-id dulu. Context7 mungkin bagi docs untuk library yang salah.
Solution: Selalu guna resolve-library-id dulu untuk cari library yang betul, baru guna query-docs. Ini memastikan documentation yang tepat.
Masalah: Screenshot page yang belum siap loading — dapat gambar kosong atau separuh. Pelajar ingat Playwright tak berfungsi.
Solution: Tambah waitFor dalam prompt: "Guna Playwright untuk buka URL, tunggu 3 saat, pastu screenshot." Atau minta AI navigate dulu sebelum screenshot.
Masalah: Guna Sequential Thinking untuk task ringkas — "Apa warna untuk button ni?" Sequential Thinking adalah untuk masalah kompleks yang perlukan analisis mendalam.
Solution: Simpan Sequential Thinking untuk masalah yang benar-benar kompleks: debugging rumit, architectural decisions, performance optimization. Untuk task ringkas, guna prompt biasa.