Tutorial Vibe Coding dengan Cursor Rules: Standarisasi Kode Tim melalui AI Agent

Vibe coding telah mengubah cara developer menulis kode: alih-alih mengetik setiap baris secara manual, kita mendeskripsikan intent dan membiarkan AI agent menggenerasikan implementasinya. Tapi tanpa batasan yang jelas, AI bisa menghasilkan kode yang inkonsisten dengan standar tim, melanggar arsitektur yang sudah disepakati, atau bahkan memperkenalkan pattern yang bertentangan dengan codebase yang sudah ada. Cursor Rules adalah solusi untuk masalah ini: sebuah mekanisme konfigurasi yang memberi tahu Cursor AI tentang convention, constraint, dan preferensi project-mu. Artikel ini adalah panduan praktis membangun Cursor Rules yang efektif untuk tim development.

Cursor Desktop, editor AI populer yang dibangun di atas VS Code, menyediakan sistem rules yang terintegrasi langsung dengan model AI-nya. Rules ini bekerja pada dua level: global rules yang berlaku untuk semua project, dan project-specific rules yang hanya aktif di repository tertentu. Kombinasi kedua level ini memungkinkan kamu mendefinisikan standard organisasi di level global, lalu menyempurnakannya dengan constraint spesifik per project.

Persiapan dan Konsep Dasar Cursor Rules

Sebelum mulai menulis rules, pahami dulu struktur dasarnya. Cursor Rules menggunakan format file konfigurasi yang bisa ditulis dalam Markdown atau file teks biasa. Kamu bisa menyimpan rules di beberapa lokasi:

• Global rules: disimpan di Cursor Settings dan berlaku untuk semua workspace.

• Project rules: disimpan di file .cursorrules di root repository dan otomatis terdeteksi oleh Cursor.

• Folder-specific rules: disimpan di subdirektori tertentu untuk constraint yang spesifik pada modul atau layer.

Setiap rule terdiri dari trigger dan instruction. Trigger bisa berupa file pattern, language mode, atau context tertentu. Instruction adalah directive yang diberikan ke AI tentang bagaimana harus bersikap saat menghadapi kode dalam context tersebut. Semakin spesifik dan contoh-driven instruction-mu, semakin konsisten output AI.

Langkah 1: Buat File .cursorrules di Root Project

Mulailah dengan membuat file bernama .cursorrules di root repository project-mu. Cursor akan otomatis membaca file ini saat kamu membuka project di editor. Berikut struktur dasar yang direkomendasikan:

# Project: SaaS Dashboard untuk Fintech Indonesia
# Tech Stack: Next.js 14, TypeScript, Tailwind CSS, Prisma, PostgreSQL

## General Principles
- Selalu gunakan TypeScript strict mode. Hindari any kecuali untuk boundary external API.
- Prioritaskan composition over inheritance dalam desain komponen React.
- Gunakan named exports untuk semua komponen dan utility functions.

## Naming Conventions
- Komponen React: PascalCase (contoh: TransactionCard.tsx)
- Utility functions: camelCase (contoh: formatCurrency.ts)
- API routes: kebab-case dengan suffix .route.ts
- Database models: PascalCase singular (contoh: User, OrderItem)

## Architecture Rules
- Jangan taruh business logic di dalam komponen UI. Pindahkan ke custom hooks atau server actions.
- Gunakan Prisma untuk semua akses database. Raw SQL hanya diizinkan untuk migrasi kompleks.
- Setiap API endpoint harus memiliki validasi Zod sebelum menyentuh database layer.

File ini mengandung tiga bagian utama: prinsip umum yang mendefinisikan filosofi kode, konvensi penamaan yang memastikan konsistensi di seluruh codebase, dan aturan arsitektur yang mencegah AI melanggar separation of concern. Cursor akan memasukkan instruksi ini ke dalam system prompt setiap kali AI menghasilkan atau mengedit kode di project ini.

Langkah 2: Definisikan Pattern React yang Diinginkan

AI seringkali default ke pattern paling umum yang ditemuinya di training data. Jika tim-mu menggunakan pattern tertentu, eksplisitkan di rules:

## React Patterns
- Gunakan Server Components secara default untuk halaman dan layout.
- Client Components hanya diizinkan untuk interaktivitas spesifik seperti form handling atau animation.
- Gunakan React Query untuk data fetching di Client Components, bukan useEffect manual.
- State management global gunakan Zustand. Redux tidak diizinkan kecuali untuk legacy modules.
- Form validation gunakan React Hook Form + Zod, bukan validasi manual di onChange.

Instruksi seperti ini mencegah AI menghasilkan useEffect yang berantai untuk data fetching atau memperkenalkan library state management yang tidak diizinkan. Tanpa rules eksplisit, AI cenderung menggunakan pattern yang paling sering muncul di GitHub, yang belum tentu cocok dengan keputusan arsitektur tim-mu.

Langkah 3: Atur Constraint untuk Testing dan Dokumentasi

Cursor Rules bukan hanya untuk kode produksi. Kamu juga bisa memaksakan standar testing dan dokumentasi:

## Testing Requirements
- Setiap komponen yang memiliki logic harus memiliki unit test dengan Vitest.
- Setiap API route harus memiliki integration test yang memvalidasi response shape.
- Mocking database gunakan prisma-mock, bukan mock manual untuk setiap query.

## Documentation Rules
- Setiap exported function harus memiliki JSDoc yang menjelaskan parameter dan return type.
- Setiap komponen kompleks harus memiliki storybook story untuk visual regression testing.
- README.md harus diupdate jika ada perubahan pada environment variables atau setup instructions.

Dengan menambahkan section testing, kamu mengubah AI dari sekadar code generator menjadi development partner yang memahami quality gate tim-mu. AI akan mulai menghasilkan test skeleton bersamaan dengan implementasi, mengurangi waktu yang dihabiskan untuk menulis boilerplate test setelah kode selesai.

Langkah 4: Aktifkan Rules di Cursor Desktop

Setelah file .cursorrules selesai dibuat, pastikan Cursor mengenalinya. Buka project di Cursor Desktop, lalu buka tab Settings. Di bagian AI Rules, pastikan project rules dalam keadaan enabled. Cursor akan menampilkan preview dari rules yang aktif saat ini.

Untuk memastikan rules bekerja, coba berikan prompt berikut di chat AI:

Buat komponen TransactionCard yang menampilkan daftar transaksi dari API /api/transactions

Jika rules-mu sudah benar, AI seharusnya akan menghasilkan Server Component dengan React Query, Zod validation, dan Vitest test skeleton secara otomatis. Jika output tidak sesuai harapan, perbaiki instruksi di .cursorrules agar lebih spesifik dan tambahkan contoh kode yang mendemonstrasikan pattern yang diinginkan.

Langkah 5: Iterasi dan Perbaiki Rules Secara Berkala

Cursor Rules bukan dokumen statis yang ditulis sekali dan dilupakan. Ia harus berevolusi bersama codebase. Lakukan review .cursorrules setiap sprint retrospective atau saat ada keputusan arsitektur baru. Beberapa sinyal bahwa rules perlu diupdate:

• AI sering menghasilkan kode yang harus direfactor secara manual setelah generation.

• Developer baru di tim sering melakukan kesalahan yang sama meski sudah ada rules.

• Ada library baru yang diadopsi tapi belum tercermin di rules.

• Review kode menunjukkan pattern inkonsisten antara kode yang ditulis manual dan kode yang digenerate AI.

Proses iterasi ini mirip dengan maintaining style guide atau linting rules. Semakin sering kamu memperbarui .cursorrules, semakin sedikit waktu yang dihabiskan untuk menata ulang kode yang digenerate AI. Tim yang disiplin dalam memelihara rules akan merasakan kecepatan vibe coding tanpa mengorbankan konsistensi codebase.

Kesimpulan

Cursor Rules adalah fondasi dari vibe coding yang sustainable di level tim. Tanpa rules, vibe coding cepat menjadi technical debt generator yang menghasilkan kode berkualitas tidak konsisten. Dengan .cursorrules yang well-maintained, AI agent di Cursor menjadi anggota tim yang patuh pada convention, menghasilkan kode yang bisa langsung masuk ke code review tanpa refactor besar-besaran.

Bagi tim startup Indonesia yang sedang mempercepat delivery dengan bantuan AI, investasi waktu untuk membuat dan memelihara Cursor Rules akan menghasilkan codebase yang lebih bersih, onboard developer baru lebih cepat, dan mengurangi friction antara kode yang digenerate AI dengan standar kualitas tim. Mulai dari project hari ini, dan rasakan perbedaannya saat AI mulai menulis kode seperti engineer senior yang sudah lama bergabung dengan tim-mu.

Sumber referensi: Website Cursor, Dokumentasi Cursor Rules