Latihan Hands-On

Fasa 4: Latihan MCP & Skills

5 latihan praktikal untuk menguasai MCP Servers dan Superpowers Skills. Selesaikan mengikut urutan — setiap latihan bina kemahiran untuk latihan seterusnya.

📊 Progress Anda

Tandakan latihan yang telah selesai dengan klik pada card. Gunakan progress bar untuk tracking.

0 / 5 selesai 0%
📝 Cara Guna Latihan Ini:

1. Baca objektif dan tool yang diperlukan untuk setiap latihan.

2. Salin command/prompt yang diberikan ke dalam Claude Code terminal.

3. Perhatikan hasil dan bandingkan dengan expected result.

4. Ambil screenshot hasil dan letakkan dalam screenshot area (atau tulis nota).

5. Klik pada header latihan untuk expand/kollaps konten.

6. Klik pada checkbox di hujung untuk tandakan selesai.

1
Cari "Latest CSS Trends 2026" dengan Exa
MCP Mudah Exa Web Search
▼

🎯 Objektif

Gunakan Exa Web Search MCP Server untuk mencari maklumat terkini tentang CSS trends tahun 2026. Latihan ini mengajar anda bagaimana AI boleh mengakses internet untuk mendapatkan maklumat real-time.

🔧 Tool Yang Digunakan

Exa Web Search — MCP Server untuk web search. Exa membolehkan Claude Code mencari dan membaca kandungan dari internet secara langsung.

💻 Command / Prompt

Taip prompt berikut dalam Claude Code terminal:

Guna Exa untuk cari "latest CSS trends 2026" dan berikan ringkasan 5 trend utama yang saya patut tahu sebagai web developer.

Selepas itu, cuba variasi ini:

Guna Exa untuk cari "CSS container queries real-world examples 2026"

📋 Langkah-langkah

  • Buka terminal dan jalankan Claude Code.
  • Taip prompt Exa seperti di atas.
  • Tunggu AI mencari dan menghantar hasil.
  • Baca ringkasan yang diberikan oleh AI.
  • Cuba query lain — ganti topik dengan minat anda (contoh: "AI tools for web development 2026").
  • Ambil screenshot terminal yang menunjukkan hasil carian Exa.

🔮 Expected Result

AI akan mengembalikan senarai 5 trend CSS terkini beserta penerangan ringkas dan sumber. Contoh: Container Queries, View Transitions API, CSS Nesting, Scroll-Driven Animations, dan Popover API. Setiap trend akan ada link sumber dan contoh penggunaan.

📸 Screenshot Hasil

📷
Selepas selesai, letak screenshot hasil carian Exa di sini.
Guna Print Screen atau Snipping Tool untuk tangkap gambar terminal.
2
Screenshot Landing Page Fasa 3 dengan Playwright
MCP Sederhana Playwright
▼

🎯 Objektif

Gunakan Playwright MCP Server untuk membuka landing page yang anda bina dalam Fasa 3 dan mengambil screenshot. Latihan ini menunjukkan bagaimana AI boleh mengawal browser secara automatik.

🔧 Tool Yang Digunakan

Playwright — MCP Server untuk browser automation. Playwright membolehkan AI membuka URL, navigasi, klik, taip, dan mengambil screenshot.

💻 Command / Prompt

Gantikan [url-landing-page-anda] dengan URL landing page Fasa 3 (boleh jadi localhost, GitHub Pages, atau Netlify):

Guna Playwright untuk navigate ke landing page saya di [url-landing-page-anda] dan ambil screenshot full page. Simpan sebagai "landing-page-screenshot.png".

Selepas berjaya, cuba variasi lanjutan:

Guna Playwright untuk buka landing page saya, scroll ke bawah perlahan-lahan, dan ambil screenshot bahagian footer sahaja.

📋 Langkah-langkah

  • Pastikan landing page Fasa 3 sedang running (atau sudah di-deploy).
  • Buka Claude Code dalam terminal di folder projek landing page.
  • Taip prompt Playwright seperti di atas.
  • Tunggu AI membuka browser, navigate, dan ambil screenshot.
  • Semak fail screenshot yang dihasilkan.
  • Cuba screenshot dengan mobile viewport — tambah "Guna viewport iPhone 12".
  • Ambil screenshot hasil (screenshot-of-screenshot).

🔮 Expected Result

AI akan menggunakan Playwright untuk membuka URL, menunggu page siap, dan mengambil screenshot penuh. Fail landing-page-screenshot.png akan disimpan dalam folder projek anda. Jika guna variasi mobile viewport, AI akan resize browser terlebih dahulu.

📸 Screenshot Hasil

📷
Letak screenshot landing page yang diambil oleh Playwright di sini.
Juga screenshot terminal yang menunjukkan Playwright dalam tindakan.
3
Cari Dokumentasi Flexbox dengan Context7
MCP Mudah Context7 Documentation
▼

🎯 Objektif

Gunakan Context7 MCP Server untuk mencari dokumentasi terkini tentang CSS Flexbox. Latihan ini menunjukkan bagaimana AI boleh merujuk dokumentasi library/framework secara langsung untuk mendapatkan maklumat yang tepat dan terkini.

🔧 Tool Yang Digunakan

Context7 — MCP Server untuk dokumentasi library. Context7 mencari dan mendapatkan dokumentasi terkini untuk beratus-ratus library dan framework.

💻 Command / Prompt

Guna Context7 untuk cari dokumentasi CSS Flexbox — saya nak tahu cara buat 3-column layout dengan gap 20px dan semua column sama tinggi.

Selepas itu, cuba dengan library lain yang anda ingin belajar:

Guna Context7 untuk cari cara buat responsive grid dengan Tailwind CSS — contoh layout 2 column di desktop, 1 column di mobile.

📋 Langkah-langkah

  • Buka Claude Code dalam terminal.
  • Taip prompt Context7 seperti di atas.
  • Perhatikan bagaimana AI mencari documentation yang relevan.
  • Semak kod contoh yang diberikan — adakah ia dari dokumentasi rasmi?
  • Cuba guna kod yang dihasilkan dalam fail HTML ringkas untuk verify.
  • Cuba dengan library lain: React, Next.js, atau Express.
  • Ambil screenshot yang menunjukkan hasil dokumentasi flexbox.

🔮 Expected Result

AI akan menggunakan Context7 untuk mencari dokumentasi flexbox dan mengembalikan contoh kod CSS yang tepat untuk 3-column layout dengan spesifikasi yang diminta — display: flex, gap: 20px, dan align-items: stretch untuk column sama tinggi. Setiap contoh akan disertakan dengan penerangan.

📸 Screenshot Hasil

📷
Letak screenshot yang menunjukkan hasil dokumentasi flexbox dari Context7.
Juga screenshot kod CSS yang berjaya anda hasilkan.
4
Cari Tutorial Azure dengan Microsoft Learn
MCP Sederhana Microsoft Learn
▼

🎯 Objektif

Gunakan Microsoft Learn MCP Server untuk mencari tutorial tentang Azure Static Web Apps. Latihan ini berguna untuk Fasa 8 (Production & Deployment) di mana anda akan deploy aplikasi ke Azure.

🔧 Tool Yang Digunakan

Microsoft Learn — MCP Server untuk dokumentasi Microsoft rasmi. Memberikan akses terus ke Azure, .NET, TypeScript, GitHub, dan semua dokumentasi Microsoft.

💻 Command / Prompt

Guna Microsoft Learn untuk cari tutorial tentang Azure Static Web Apps — saya nak deploy website statik (HTML/CSS/JS) dengan custom domain. Berikan langkah-langkah utama.

Cuba juga topik Microsoft lain yang relevan:

Guna Microsoft Learn untuk cari panduan TypeScript untuk beginner — apa yang saya perlu tahu sebelum mula guna TypeScript dengan React.

📋 Langkah-langkah

  • Buka Claude Code dalam terminal.
  • Taip prompt Microsoft Learn seperti di atas.
  • Tunggu AI mencari dokumentasi dari Microsoft Learn.
  • Baca langkah-langkah yang diberikan oleh AI.
  • Catat point penting untuk rujukan Fasa 8 nanti.
  • Cuba topik Microsoft lain yang menarik minat anda.
  • Ambil screenshot hasil carian tutorial Azure.

🔮 Expected Result

AI akan mendapatkan panduan langkah-demi-langkah dari Microsoft Learn untuk deploy website statik ke Azure Static Web Apps. Hasil akan merangkumi: prasyarat (akaun Azure, Git), cara setup Static Web Apps di portal Azure, configure custom domain, dan CI/CD integration dengan GitHub.

📸 Screenshot Hasil

📷
Letak screenshot yang menunjukkan hasil tutorial Azure dari Microsoft Learn.
Simpan juga nota langkah-langkah untuk Fasa 8 nanti.
5
Rancang Portfolio Fasa 5 dengan Brainstorming
Skill Sederhana Brainstorming Superpower
▼

🎯 Objektif

Gunakan Brainstorming Superpowers Skill untuk mula merancang portfolio multi-page yang akan anda bina dalam Fasa 5. Latihan ini menunjukkan bagaimana Skills memberikan workflow berstruktur untuk perancangan projek.

🔧 Tool Yang Digunakan

Brainstorming — Superpowers Skill untuk perancangan dan idea generation. Skill ini akan menanya soalan berstruktur, memahami keperluan, dan membantu anda menghasilkan konsep yang matang sebelum memulakan coding.

💻 Command / Prompt

Guna Brainstorming untuk hasilkan konsep portfolio page saya. Saya nak bina multi-page portfolio untuk Fasa 5 kelas Vibe Coding. Portfolio perlu ada homepage, about, projek, dan contact page.

Selepas sesi brainstorming, cuba prompt lanjutan untuk detail:

Berdasarkan hasil brainstorming tadi, hasilkan struktur navigation dan sitemap untuk portfolio saya. Format sebagai senarai pages dan sub-pages.

📋 Langkah-langkah

  • Buka Claude Code dalam terminal.
  • Invoke skill Brainstorming dengan prompt di atas.
  • Jawab soalan yang AI tanya — lebih detail jawapan, lebih baik hasilnya.
  • Perhatikan bagaimana AI membimbing proses brainstorming.
  • Simpan hasil brainstorming — ia akan menjadi blueprint untuk Fasa 5.
  • Cuba prompt lanjutan untuk detail navigation / sitemap.
  • Ambil screenshot sesi brainstorming yang lengkap.

🔮 Expected Result

AI akan memulakan sesi brainstorming dengan menanya soalan seperti: "Apa tujuan portfolio anda? Siapa target audience? Apa projek yang nak ditunjukkan? Ada preference warna atau style?" Selepas anda menjawab, AI akan menghasilkan konsep portfolio yang lengkap termasuk: cadangan struktur halaman, tema warna, jenis kandungan untuk setiap page, dan prioriti pembangunan.

📸 Screenshot Hasil

📷
Letak screenshot sesi brainstorming yang lengkap — dari soalan pertama hingga konsep akhir portfolio.

📚 Prompt Template Library

Koleksi template prompt yang boleh anda guna berulang kali untuk pelbagai tools dan skills. Simpan halaman ini sebagai rujukan pantas.

1. 🌐 Playwright — Browser Automation

Template:

Guna Playwright untuk [action: screenshot / klik / isi form / scroll] di [URL]

Contoh: Guna Playwright untuk screenshot landing page saya di localhost:3000 dengan iPhone 12 viewport

2. 🔍 Exa — Web Search

Template:

Guna Exa untuk cari '[query]' dan berikan [number] hasil dengan ringkasan

Contoh: Guna Exa untuk cari 'latest CSS grid techniques 2026' dan berikan 5 teknik dengan contoh kod

3. 📘 Context7 — Dokumentasi Library

Template:

Guna Context7 untuk dapatkan documentation tentang [library / feature]

Contoh: Guna Context7 untuk dapatkan documentation tentang CSS Container Queries dengan 3 contoh kod

4. 💡 Brainstorming Skill — Perancangan Projek

Template:

Guna Brainstorming skill untuk rancang projek [X]

Contoh: Guna Brainstorming skill untuk rancang projek portfolio multi-page dengan dark theme

5. 🧪 TDD Skill — Test-Driven Development

Template:

Guna TDD untuk tulis test bagi [function / component]

Contoh: Guna TDD untuk tulis test bagi function validateEmail() dalam JavaScript

6. 🔍 Systematic Debugging Skill — Cari Punca Error

Template:

Guna Systematic Debugging untuk cari punca [error / issue]

Contoh: Guna Systematic Debugging untuk cari punca CSS layout broken dalam mobile view

7. 🧠 Sequential Thinking — Analisis Masalah Kompleks

Template:

Guna Sequential Thinking untuk analisis [masalah kompleks]

Contoh: Guna Sequential Thinking untuk analisis cara optimize performance landing page yang loading lambat

8. 🔗 Kombinasi Tools — Research + Screenshot

Template:

Guna Exa untuk research [topic] + Playwright untuk ambil screenshot pesaing

Contoh: Guna Exa untuk cari top 5 portfolio websites 2026, lepas tu guna Playwright untuk screenshot setiap satu

💡 Cara Guna Template Ini: Copy template, gantikan [placeholder] dengan keperluan anda, dan paste dalam Claude Code terminal. Simpan template yang selalu guna dalam nota atau bookmark page ini.

✅ Tahniah!

Apabila anda selesai semua 5 latihan, anda akan mempunyai:

📖 Modul Pelajar ⚡ Productivity Guide 📘 Plugin Reference 🔙 Kembali ke Portal