Hands-on Lab 2 · ~50 min

agents.md likhein, phir YOLO mode mein build karein

Browser toy se real local build tak barhein. Apni agents.md khud likhein, Cursor ko plan → build → test se chalayein, aur targeted feedback se chalti drag-and-drop Kanban app refine karein.

🎯 Maqsad: chalti Kanban app jise aapne steer kiya⏱ ~50 min🧰 Cursor + Node v22+

Prerequisites

Cursor installed, signed in, aur Node v22+ available (node --version). Agar yeh setup nahi kiya to pehle 4.1 Tools & setup dekh lein.

01Project banayein aur agents.md likhein · 12 min

Naya folder banayein (misal kanban), Cursor mein kholain, aur root mein agents.md add karein. Khud likhein — isse shuru karein aur jo chahein badlein:

agents.md

# Kanban project

## Business requirements
- An MVP of a Kanban-style project-management web app.
- One board. Five fixed columns that can be renamed.
- Each card has a title and details only.
- Drag-and-drop to move cards between columns.
- Add a card; delete a card. No archive, no search.
- Priority: a slick, professional UI. Open with dummy data.

## Technical details
- A Next.js app in a subdirectory called `frontend`.
- No persistence. No user login. Simple, popular libraries.

## Strategy
- Write a phased plan with success criteria to check off.
- Scaffold, unit-test, execute, then integration-test with Playwright.
- Only complete when the MVP runs and is tested.

## Coding standards
- Latest, idiomatic library versions. Keep it simple; never over-engineer.
- Be concise. Short README. IMPORTANT: no emojis, ever.

Likhnay ki tips (Class 3 se)

Precise aur kam-ambiguity. “don’t” lists se zyada positives use karein. Jo rules sab se zaroori hon un par IMPORTANT caps mein. Key points par thodi repetition theek hai — yeh file qeemti context hai, har lafz count kare.

02Apna risk level set karein · 3 min

Settings kholain (⌘/Ctrl ⇧ J) → Agents → Auto-run. Is low-risk project ke liye YOLO (run everything, unsandboxed) theek hai aur aap walk away kar sakte hain. Yaqeen nahi? ask every time ya sandboxed se shuru karein aur steps approve karte dekhein.

03Pehle plan, phir build · 20 min

Plan mode

Agent dropdown Plan par, model auto par, aur type karein go ahead and plan. Yeh agents.md khud load karta hai aur phased implementation plan likhta hai. Skim karein (ya bharosa karein).

Build

Build dabayein. Files aati dekhein aur context meter charhta. Agent loop live dikhega — likhna, tests chalana, failures dekhna, theek karna.

Chalayein

Shayad app khud launch ho. Nahi to: cd frontend phir npm run dev, aur localhost:3000 kholain.

Cursor terminal

$ cd frontend
$ npm run dev
  ▲ Next.js — ready on http://localhost:3000

04Test karein aur feedback dein · 12 min

App ko azmayein, phir agent ko aik message mein specific feedback dein:

Card columns ke darmiyan drag karein.
Card add karein; card delete karein.
Column rename karein.
Column ke andar cards reorder karne ki koshish karein.

agent · feedback

It’s mostly working, but:
• There’s a Next.js error indicator at the bottom of the screen.
• Drag-and-drop is janky, and I can’t reorder within a column —
  please make it slicker.
• Add more visual polish (a bit more color and spacing).

Perfect nahi hoga — yahi point hai

Agent zyada tar theek kare aur aik miss kare. Specific messages se iterate karte rahein, ya agar badly stuck ho: sab delete karein, agents.md ko us galti ke hisaab se tight karein, aur dobara chalayein. Simplify karein, phir wapas build karein.

05Sochain aur stretch

✓ Aapne poora IDE rhythm practice kiya

Tight agents.md likhna jo poore build ko steer kare.
Pehle plan, phir YOLO mode mein build.
Kaam karte hue agent loop aur context meter parhna.
Code chhue bina targeted feedback se refine karna.

Stretch goals (optional)

Har column par card-count badge maangein · cards par colored label/tag · confirmation ke sath “clear board” button · wahi agents.md doosre tool (Copilot, Codex) mein try karke compare karein. Dekhein ke result kitna aapki agents.md shape karti hai — tool nahi.