Modul Pelajar

Fasa 4: Kenali Tools & Skills

Terokai MCP Servers, Superpowers Skills, dan cara memanfaatkan ekosistem plugin Claude Code untuk pembangunan yang lebih efisien.

🗺️ Perjalanan Anda Selepas Fasa Ini

Selepas fasa ini, anda bukan sekadar "tahu coding". Anda ada SUPERPOWERS — tools dan skills yang developer profesional pun guna.

🚀 Fasa 5 nanti, anda akan guna semua superpower ni untuk bina multi-page portfolio yang impressive!

🔌 Apa Itu MCP Server?

MCP (Model Context Protocol) adalah standard yang membolehkan AI seperti Claude Code berinteraksi dengan tools dan data luaran. Dalam bahasa mudah:

📱 "Macam extension/add-on untuk AI anda"

Sama seperti browser (Chrome, Firefox) yang boleh dipasang dengan extensions untuk menambah fungsi — adblocker, password manager, translator — MCP servers adalah extensions untuk Claude Code.

  • Tanpa MCP: AI hanya tahu apa yang dia pelajari semasa training. Tak boleh akses internet, tak boleh guna tools, tak boleh buka website.
  • Dengan MCP: AI boleh search web (Exa), kawal browser (Playwright), baca docs (Context7), urus GitHub, banyak lagi.
  • Senang cerita: MCP buat AI yang SMART jadi SUPER-POWERED.
💡 Ingat: "MCP adalah apps untuk AI — macam Google Play Store / App Store untuk phone anda. Setiap app tambah fungsi baru yang AI boleh guna."

🔧 Bagaimana Ia Berfungsi (Ringkas)

  • Setiap MCP server adalah program kecil yang berjalan di komputer anda.
  • Claude Code bercakap dengan server ini melalui standard protocol.
  • Server menyediakan tools — function khusus yang AI boleh panggil bila perlu.
  • AI akan decide sendiri bila nak guna tools ni — atau anda boleh suruh AI guna tool tertentu.
  • Contoh: "Cari berita terkini tentang AI" → AI akan guna Exa MCP server.
⚠️ Penting: MCP Servers adalah Claude Code ONLY — Codex, Copilot, ChatGPT tak ada fitur ni. Ini adalah competitive advantage utama Claude Code.

🛠️ 5 MCP Tools Setiap Pelajar Perlu Tahu

Ini adalah MCP tools yang paling berguna untuk pembangunan web. Cuba kesemua dalam latihan nanti.

🌐
Exa Web Search
MCP Server

Apa dia: Exa adalah search engine untuk AI. Membolehkan Claude Code mencari maklumat terkini dari internet — berita, artikel, dokumentasi, forum.

Bila guna:

  • Nak cari maklumat terkini yang tak ada dalam training data AI (cth: "trend CSS 2026")
  • Nak rujuk tutorial atau artikel web semasa coding
  • Nak buat research untuk projek — competitor analysis, best practices
  • Nak dapatkan code examples dari blog atau dokumentasi

Contoh prompt: Guna Exa untuk cari "latest CSS grid techniques 2026"

🎭
Playwright
MCP Server

Apa dia: Playwright adalah browser automation tool. Membolehkan Claude Code membuka website, navigasi, klik, taip, ambil screenshot — semuanya secara automatik.

Bila guna:

  • Nak test landing page anda — "screenshot page dan tunjuk macam mana rupa"
  • Nak check responsive design — "Buka page dalam mobile view"
  • Nak verify deployment — "Buka URL production dan screenshot"
  • Nak buat automated testing — "Klik button, pastu check apa yang jadi"

Contoh prompt: Guna Playwright untuk screenshot landing page saya di localhost:3000

📚
Context7
MCP Server

Apa dia: Context7 mencari dan mendapatkan dokumentasi terkini untuk library dan framework. Daripada React, Next.js, Tailwind CSS, sehinggalah ke Express, Django, dan banyak lagi.

Bila guna:

  • Nak tahu cara guna API terbaru library tertentu
  • Nak dapatkan code examples dari dokumentasi rasmi
  • Nak semak version compatibility — "Ada breaking changes dalam versi baru?"
  • Nak migrate dari versi lama ke baru — "Cara upgrade React 18 ke 19"

Contoh prompt: Guna Context7 untuk cari dokumentasi flexbox CSS — contoh layout 3 column

📘
Microsoft Learn
MCP Server

Apa dia: Akses terus ke dokumentasi rasmi Microsoft — Azure, .NET, TypeScript, GitHub, dan semua produk Microsoft.

Bila guna:

  • Nak cari tutorial Azure untuk deployment
  • Nak rujuk TypeScript documentation terkini
  • Nak belajar .NET atau C#
  • Nak dapatkan panduan langkah-demi-langkah dari Microsoft yang rasmi

Contoh prompt: Guna Microsoft Learn untuk cari tutorial Azure Static Web Apps deployment

🐙
GitHub
MCP Server

Apa dia: GitHub MCP Server membolehkan Claude Code berinteraksi terus dengan GitHub — view repos, buat issues, pull requests, review code, dan manage repository.

Bila guna:

  • Nak buat repository baru tanpa buka browser
  • Nak buat Pull Request dari terminal
  • Nak review code dalam PR — "Check PR #3 dan beri feedback"
  • Nak manage issues — "Close issue #5 dan tag user"

Contoh prompt: Guna GitHub untuk list semua open issues dalam repo portfolio saya

⚡ Apa Itu Skills?

Jika MCP servers adalah "apps" untuk AI, Skills adalah "mode expert" — workflow profesional yang AI ikut untuk buat sesuatu task dengan cara yang betul.

📋 "Macam expert mode — AI ikut workflow profesional"

Analogi: Bayangkan anda nak buat analisis kewangan. Anda boleh guna Excel kosong dan mula menaip. Atau anda boleh guna template analisis kewangan yang dah ada formula, kategori, dan format laporan — tinggal isi angka. Skills adalah template untuk workflow AI.

  • Brainstorming: AI akan tanya soalan berstruktur untuk faham idea anda — "Apa masalah yang nak selesaikan? Siapa target pengguna? Apa konstrain?" — barulah hasilkan konsep.
  • TDD (Test-Driven Development): AI akan ikut workflow TDD sebenar — tulis test DULU, pastu implementasi, pastu refactor. Bukan hasilkan kod terus.
  • Systematic Debugging: AI tak terus bagi fix. Dia akan diagnose — "Apa error? Bila ia mula terjadi? Apa yang berubah?" — gunakan pendekatan sistematik.
  • Verification Before Completion: Sebelum claim sesuatu selesai, AI akan running test dan confirm output. Macam checklist quality assurance.
💡

Brainstorming

Guna bila nak rancang projek baru. AI akan tanya soalan komprehensif — tujuan, target audience, features, constraints — then hasilkan konsep yang tersusun. Sesuai untuk Fasa 5 (portfolio) dan Fasa 7 (dashboard).

🧪

TDD

Guna bila nak tulis kod yang reliable. AI akan hasilkan test cases dulu, pastu implementasi, pastu verify semua test passing. Sesuai untuk logic functions, validations, API endpoints.

🔍

Systematic Debugging

Guna bila kod tak jalan dan tak pasti kenapa. AI akan diagnose step-by-step — tak terus bagi fix. Sesuai untuk CSS broken, JavaScript errors, integration issues.

✅

Verification Before Completion

Guna sebelum claim kerja selesai. AI akan running test dan confirm output. Sesuai untuk final check sebelum commit atau deploy.

💡 Bila Guna Skills? Task ringkas (tukar warna, tambah text) — guna prompt biasa. Task kompleks (bina feature baru, debug chronic bug, plan projek) — guna Skills. Rule of thumb: kalau lebih 15 minit → guna skill.

📚 Case Studies: Aplikasi Tools Dalam Situasi Sebenar

Dua contoh dunia sebenar bagaimana tools dan skills dalam fasa ini digunakan untuk menyelesaikan masalah praktikal.

🔍
Case Study 1: Research Kompetitor Automatik
Exa + Playwright

Situasi: Anda nak bina portfolio yang lebih baik dari pesaing. Daripada buka satu-satu website pesaing secara manual, anda gunakan AI untuk automate research.

Approach — Search → Baca → Screenshot → Bandingkan → Report:

  • Search: "Guna Exa untuk cari 'best developer portfolio websites 2026' dan berikan 5 URL terbaik." — AI search web dan bagi 5 URL dengan penerangan ringkas.
  • Baca: "Baca setiap hasil carian dan rumuskan apa yang buat portfolio tu menarik." — AI analyze setiap portfolio dan bagi insight.
  • Screenshot: "Guna Playwright untuk screenshot setiap portfolio tersebut — full page." — AI ambil screenshot 5 portfolio dalam satu sesi.
  • Bandingkan: "Bandingkan 5 portfolio ni. Apa persamaan? Apa yang unique? Layout apa yang popular?" — AI buat analysis perbandingan.
  • Report: "Based on research, suggest 3 design direction untuk portfolio saya — dark theme dengan aksen cyan." — AI hasilkan recommendation.

Masa: 10 minit — dari mula search hingga dapat design recommendation. Bandingkan dengan 1-2 jam kalau buat manual.

Takeaway Kombinasi Exa (search) + Playwright (screenshot) + AI analysis = research kompetitor dalam 10 minit.

🐛
Case Study 2: Debug Landing Page Guna Playwright
Playwright + Debugging

Situasi: Anda baru deploy landing page Fasa 3. Rupanya mobile view broken — navigation bertindih, font terlalu kecil. Anda nak diagnose dan fix tanpa buka browser.

Approach — Screenshot → Diagnose → Fix → Verify:

  • Screenshot: "Guna Playwright dengan iPhone 12 viewport untuk screenshot landing page saya." — AI ambil screenshot dalam mobile view.
  • Diagnose: "Nampak macam navigation bertindih dan font terlalu kecil dalam mobile view. Check kod CSS dan cari punca masalah." — AI analyze screenshot dan CSS.
  • Fix: "Tambah media query untuk mobile view — navigation jadi stacked, font size 16px minimum." — AI tulis CSS fix.
  • Verify: "Guna Playwright sekali lagi dengan iPhone 12 viewport untuk verify fix." — AI screenshot semula untuk confirm masalah selesai.

Masa: 5-10 minit diagnose dan fix, tanpa perlu buka browser atau alat developer tools.

Takeaway Playwright bukan sekadar screenshot — ia adalah alat debugging yang power bila digabung dengan AI analysis.

📚 Cara Cari Lebih Banyak Tools

Semua MCP servers dan Skills yang tersedia didokumentasikan dalam plugin-reference.html — "master katalog" untuk ekosistem Claude Code.

📘 Plugin Reference — The Master Reference

plugin-reference.html adalah dokumen yang anda akan gunakan berulang kali sepanjang kursus dan selepas kursus. Ia mengandungi:

  • Senarai lengkap semua MCP Servers dan Skills
  • Penerangan setiap tool — apa dia, bila guna, macam mana guna
  • Contoh arahan/prompt untuk setiap tool
  • Situasi guna — contoh dunia sebenar bila tool ni berguna
  • Kategori: MCP (🔌), Superpowers Proses Kerja (⚡), Domain (🎯), Utiliti (🛠)

Cara guna: (1) Buka dalam browser. (2) Guna tab navigation untuk filter ikut kategori. (3) Guna search bar untuk cari tool spesifik. (4) Klik pada card untuk details penuh.

📘 Buka Plugin Reference ✏️ Cuba Latihan MCP

⚖️ Claude Code vs Claude Codex — MCP & Skills

Salah satu perbezaan paling besar antara Claude Code dan Claude Codex: MCP Servers dan Skills adalah fitur eksklusif Claude Code.

⌨️ Claude Code

  • ✅ MCP Servers — Exa, Playwright, Context7, GitHub, Figma, Microsoft Learn
  • ✅ Superpowers Skills — Brainstorming, TDD, Debugging, Verification
  • ✅ Domain Skills — Cloudflare, Supabase, Frontend Design
  • ✅ Terminal integration — Bash, Git, file system
  • ✅ Multi-tool orchestration — guna banyak tools serentak
  • ✅ Plugin reference sebagai master katalog

🤖 Claude Codex

  • ❌ Tiada MCP Servers — hanya guna tools asas editor
  • ❌ Tiada Superpowers Skills — workflow manual
  • ❌ Tiada domain-specific skills
  • ✅ Editor integration (VS Code)
  • ✅ Auto-complete dan inline suggestions
  • ✅ Ringan dan mudah untuk edit cepat

🔑 Jadi, Yang Mana Nak Guna?

  • Guna Claude Code untuk: Projek besar, full-stack development, bila perlu guna MCP tools, bila nak guna Skills untuk workflow profesional.
  • Guna Claude Codex untuk: Edit cepat dalam editor, refactor kecil, auto-complete semasa menaip.
  • Kedua-duanya: Tak ada salah guna salah satu. Ramai developer guna kedua-duanya — Codex untuk daily coding, Claude Code untuk task kompleks dan projek besar.

Takeaway MCP & Skills adalah "senjata rahsia" Claude Code. Ia memberikan kelebihan besar berbanding AI coding tools lain.

📋 Ringkasan Fasa 4

KonsepApa DiaContoh
MCP ServerExtension/add-on untuk AI — tambah fungsi baruExa, Playwright, Context7, GitHub
SkillsExpert workflow — AI ikut proses profesionalBrainstorming, TDD, Debugging
Plugin ReferenceMaster katalog semua tools yang tersediaplugin-reference.html
Claude CodeAda MCP + Skills — sesuai projek besarTerminal, full-stack, automation
Claude CodexTiada MCP + Skills — sesuai edit cepatVS Code, auto-complete
✏️ Cuba Latihan MCP ⚡ Productivity Guide 📘 Plugin Reference 🔙 Kembali ke Portal