Vibe Code Starter Guide

Catatan: panduan ini adalah contoh best practice pengaturan rules AI; silakan sesuaikan isi dan aturan dengan kebutuhan proyek yang sedang dikerjakan.

Daftar Isi

• Ringkasan Repo
• Struktur Folder
• Contoh Prompt Manual
• Prompt Berbasis Task File
• Contoh Prompt Bugfix
• Prompt UI Saja
• Prompt Backend Saja
• Prompt Multi-Step
• Prompt Singkat

Ringkasan Repo

• vibe-code-starter adalah starter kit yang mendokumentasikan cara menjalankan tugas berbasis AI di repo ini.
• Semua aturan dan konteks ada di folder .ai/ (RULES, CONVENTIONS, TASKS, CONTEXT, LOGS).
• Gunakan prompt siap-pakai di bawah untuk memulai cepat tanpa lupa referensi file wajib.

Struktur Folder

/.ai/
  RULES.md
  TASKS.md
  CONVENTIONS.md
  TASKS/
    000-template.md
    010-bugfix.md
    020-feature-ticket-tags.md
  CONTEXT/
    SYSTEM_OVERVIEW.md
    ARCHITECTURE.md
    FRONTEND.md
    BACKEND.md
    API_CONTRACTS.md
    DB_SCHEMA.md
    UI_GUIDELINES.md
    ENVIRONMENT.md
  LOGS/
    CHANGELOG_AI.md
    DECISIONS.md

Contoh Prompt Manual

Gunakan langsung di ChatGPT / AI agent lain.

Contoh: Feature Ticket Tags (FE + BE)

You are an AI engineering agent working inside this repository.

Follow ALL rules defined in:
- /ai/RULES.md
- /ai/CONVENTIONS.md
- /ai/TASKS.md

TASK:
Implement feature based on:
- /ai/TASKS/020-feature-ticket-tags.md

INSTRUCTIONS:
1. Read relevant context files first.
2. Create an implementation plan.
3. Implement backend (Laravel) first, then frontend (Next.js + shadcn).
4. Include API contract updates and DB migration.
5. Provide test plan and verification steps.
6. Output:
   - Summary of changes
   - List of files modified
   - Code snippets where relevant
   - Verification steps
   - Changelog entry content

Do NOT assume anything outside the repository context.
Do NOT introduce breaking changes unless explicitly stated.

💡 Cocok untuk ChatGPT, Cursor, Copilot Chat, atau Claude.

Prompt Berbasis Task File

Cara rapi & scalable untuk workflow tim.

Prompt standar menjalankan task

Act as an AI software engineer for this codebase.

You MUST strictly follow:
- /ai/RULES.md
- /ai/CONVENTIONS.md
- /ai/TASKS.md

Execute the following task:
- Task file: /ai/TASKS/020-feature-ticket-tags.md

Execution rules:
- Read all referenced CONTEXT files.
- Respect FE/BE boundaries.
- Backend must enforce RBAC (Policies).
- Frontend must use shadcn/ui components.
- Provide step-by-step reasoning and output.

Start with:
1. Task understanding
2. Implementation plan
3. Backend changes
4. Frontend changes
5. Tests
6. Documentation updates
7. Final report

Keunggulan: prompt pendek, terdokumentasi, aman untuk feature besar.

Contoh Prompt Bugfix

/ai/TASKS/010-bugfix-login-loop.md

You are acting as an AI debugging agent.

Rules to follow:
- /ai/RULES.md

Bug context:
- Task: /ai/TASKS/010-bugfix-login-loop.md

Instructions:
1. Identify root cause (do not guess).
2. Explain why the bug occurs.
3. Propose the safest fix.
4. Implement minimal code change.
5. Add regression test.
6. Explain verification steps.

Output format:
- Root cause analysis
- Fix explanation
- Code diff (or snippet)
- Test case
- Verification steps

Prompt UI Saja

Next.js + shadcn

You are an AI frontend engineer.

Stack:
- Next.js App Router
- shadcn/ui
- Tailwind

Rules:
- Follow /ai/RULES.md (Frontend section)
- Follow /ai/CONVENTIONS.md
- Follow /ai/CONTEXT/UI_GUIDELINES.md

Task:
Create UI for ticket tags based on:
- /ai/TASKS/020-feature-ticket-tags.md

Constraints:
- Use shadcn/ui (Badge, Dialog, Input, Button)
- Handle loading, empty, and error states
- No business logic duplication

Output:
- Component structure
- Key components code
- Data fetching strategy

Prompt Backend Saja

You are an AI backend engineer.

Stack:
- Laravel API

Rules:
- Follow /ai/RULES.md (Backend section)

Task:
Implement backend API based on:
- /ai/TASKS/020-feature-ticket-tags.md

Requirements:
- Use FormRequest for validation
- Use Policy for authorization
- Use JsonResource for responses
- Provide migration + indexes
- Add feature test

Output:
- API endpoints
- Migration code
- Policy logic
- Test example

Prompt Multi-Step

Cocok untuk feature besar (customer journey, omnichannel, automation).

Step 1 – Planning only

Read:
- /ai/RULES.md
- /ai/TASKS/030-feature-customer-journey.md

DO NOT write code.

Output:
- Architecture impact
- FE vs BE responsibility
- API & DB changes
- Risks & mitigations

Step 2 – Implementation

Using the approved plan above,
implement the feature step-by-step.

Rules remain the same.

Prompt Singkat

Prompt super ringkas untuk daily use.

Run task: /ai/TASKS/020-feature-ticket-tags.md
Follow /ai/RULES.md strictly.
Provide plan, implementation, and verification.

☕️ Buy me a coffee!

Saweria

Paypal.me