🪐 Antigravity की मदद से, एआई ऐप्लिकेशन बनाना और उसे शिप करना

1. परिचय और सेट अप करना

आपका स्वागत है

नमस्ते! कोडिंग जैम में आपका स्वागत है. अगले 75 मिनट में, आपको एक ऐसा एआई वेब ऐप्लिकेशन बनाना है जो वाकई काम करता हो.

वेबसाइट यहां देखें: Coding Jam की वेबसाइट

आपको क्या बनाना है

इस हफ़्ते के प्रोजेक्ट की खास जानकारी के आधार पर, एआई की मदद से काम करने वाला वेब ऐप्लिकेशन. यह आपके ब्राउज़र में काम करता है. इसमें Google के Gemini AI का इस्तेमाल किया जाता है. सेशन के आखिर तक, यह पूरी तरह से आपका हो जाएगा.

Antigravity इंस्टॉल करना

Antigravity, एआई असिस्टेंट है. हम इसका इस्तेमाल हर काम के लिए करेंगे. यह एक ऐसा ऐप्लिकेशन है जो आपके कंप्यूटर पर इंस्टॉल होता है.

पहला चरण — डाउनलोड करना

👉 अपने ब्राउज़र में, https://antigravity.google/download पर जाएं.

👉 अपने ऑपरेटिंग सिस्टम (Mac, Windows या Linux) के लिए, डाउनलोड बटन पर क्लिक करें.

👉 डाउनलोड किए गए इंस्टॉलर को चलाएं. डिफ़ॉल्ट सेटिंग ठीक हैं — इन पर क्लिक करें.

दूसरा चरण — लॉन्च करना और साइन इन करना

👉 अपने Applications फ़ोल्डर (Mac) या Start Menu (Windows) से Antigravity लॉन्च करें.

👉 जब कहा जाए, तब "साइन इन करें" पर क्लिक करें.

👉 अपने Google खाते का इस्तेमाल करें.

अहम जानकारी: उसी Google खाते का इस्तेमाल करें जिसका इस्तेमाल आपको बाद में Google Cloud के लिए करना है (सेक्शन 8). इन्हें एक जैसा रखना आसान होता है.

तीसरा चरण — वेलकम स्क्रीन की पुष्टि करना

आपको Antigravity की वेलकम स्क्रीन दिखेगी. इसमें तीन बड़े बटन होंगे:

• फ़ोल्डर खोलें — इससे किसी मौजूदा फ़ोल्डर को वर्कस्पेस के तौर पर खोला जाता है
• एजेंट मैनेजर खोलें — इससे एजेंट डैशबोर्ड खुलता है. ज़्यादातर काम यहीं पर होगा
• रिपॉज़िटरी क्लोन करें — GitHub से कोई प्रोजेक्ट डाउनलोड करता है (हम इसका इस्तेमाल सेक्शन 3A में करेंगे)

अगर आपको इस बारे में ज़्यादा जानना है, तो https://antigravity.google/ पर जाकर ज़्यादा दस्तावेज़ देखें.

✅ चेकपॉइंट: Antigravity इंस्टॉल हो गया है, आपने साइन इन कर लिया है, और आपको तीन बटन वाली वेलकम स्क्रीन दिख रही है.

2. ज़रूरी टूल इंस्टॉल करना (Antigravity के ज़रिए)

Antigravity को आपके कंप्यूटर पर दो हेल्पर टूल की ज़रूरत होती है:

टूल	यह क्या है (सामान्य अंग्रेज़ी में)
uv	यह कुकी, Python को मैनेज करती है. Python, आपके ऐप्लिकेशन के बैकएंड की भाषा है
git	यह कुकी, इंटरनेट से प्रोजेक्ट फ़ाइलें डाउनलोड करती है. Antigravity इसका इस्तेमाल क्लोनिंग के लिए करता है

आपको इंस्टॉल करने के लिए कमांड खुद टाइप नहीं करनी होंगी. आपको Antigravity से अंग्रेज़ी में सवाल पूछना होगा. इसके बाद, वह बाकी काम खुद कर लेगा.

पहला चरण — कुछ समय के लिए उपलब्ध वर्कस्पेस खोलना

Antigravity को चैट करने के लिए, फ़ोल्डर खोलने की ज़रूरत होती है. (कोई फ़ोल्डर नहीं = कोई चैट नहीं.)

👉 वेलकम स्क्रीन पर, "फ़ोल्डर खोलें" पर क्लिक करें.

👉 कोई खाली फ़ोल्डर बनाएं या चुनें. सुझाया गया: एक नया फ़ोल्डर बनाएं और उसे coding-jam-setup नाम दें. इसे किसी ऐसी जगह पर बनाएं जहां इसे आसानी से ऐक्सेस किया जा सके. जैसे, डेस्कटॉप.

👉 खोलें (या फ़ोल्डर चुनें) पर क्लिक करें.

इसके बाद, एजेंट मैनेजर व्यू खुलेगा. इसमें आपका नया (खाली) वर्कस्पेस चुना गया होगा.

दूसरा चरण — Antigravity से टूल की जांच करने और उन्हें इंस्टॉल करने के लिए कहना

👉 चैट इनपुट पर फ़ोकस करने के लिए, Cmd+L (Mac) या Ctrl+L (Win/Linux) दबाएं.

👉 पुष्टि करें कि सबसे नीचे मौजूद मॉडल पिकर में Gemini 3 Flash दिख रहा हो (डिफ़ॉल्ट — इसके लिए ठीक है).

📝 सबसे आसान प्रॉम्प्ट — इसे चैट में चिपकाएं:

Install uv and git on my computer if they're not already there. 
Don't install Node.js. Ask permission before each install command.

📝 ज़्यादा जानकारी वाला वर्शन (अगर आपको चाहिए):

Check whether uv and git are installed by running their --version commands.
For any tool that's missing, install it using the best method for my OS:
- Mac: prefer `brew install` (install Homebrew first if missing)
- Windows: prefer `winget install`
- Linux: prefer `apt install` or `dnf install`
Ask permission before each install command. 
Do NOT install Node.js — we'll install it later only if needed.
When done, give me a summary of what's installed.

👉 भेजने के लिए, Enter दबाएं.

🤖 एजेंट को काम करते हुए देखें और पॉप-अप पर 'अनुमति दें' पर क्लिक करें

तीसरा चरण — खास जानकारी पढ़ना

एजेंट के काम पूरा करने के बाद, आपको कुछ ऐसा दिखेगा:

✅ Setup complete:
- uv 0.4.18 ✅ (installed)
- git 2.42.0 ✅ (already had it)
- Node.js: skipped (will install later if needed)

अगर कोई गड़बड़ी होती है, तो क्या करें

"मैं Homebrew इंस्टॉल नहीं कर सकता" / "winget नहीं मिला" — एजेंट ऐसा कहेगा.

फ़ॉलबैक: इन्हें अपने ब्राउज़र में खोलें और डिफ़ॉल्ट सेटिंग के साथ इंस्टॉलर को मैन्युअल तरीके से चलाएं. इसके बाद, Antigravity से कहें: "मैंने [tool] को मैन्युअल तरीके से इंस्टॉल किया है. कृपया वर्शन कमांड की मदद से इसकी पुष्टि करें."

• uv: docs.astral.sh/uv/getting-started/installation/
• git: git-scm.com/downloads

✅ चेकपॉइंट: एजेंट पुष्टि करता है कि uv और git, दोनों इंस्टॉल किए गए हैं. कुल समय: ~3 से 5 मिनट (या अगर Mac पर Homebrew को पहली बार इंस्टॉल करना है, तो ~7 मिनट).

अपने प्रोजेक्ट का क्लोन बनाना

1 — इस हफ़्ते का प्रोजेक्ट चुनें

कोडिंग जैम, आठ हफ़्तों का प्रोग्राम है. इसमें हर हफ़्ते एक नया मिनी-प्रोजेक्ट होता है. आपका फ़ैसिलिटेटर आपको बताएगा कि आज हम कौनसे हफ़्ते की गतिविधि कर रहे हैं. उस लाइन को ढूंढें और यूआरएल कॉपी करें.

हफ़्ता	प्रोजेक्ट	Repo URL
1	एआई की मदद से, बालों की स्टाइल आज़माने की सुविधा	https://github.com/cuppibla/codingjam-glow-up
2	एआई अवतार जनरेटर	https://github.com/cuppibla/codingjam-avatar-studio
3	मेरा खास साल का कैलेंडर	https://github.com/cuppibla/codingjam-year-in-poetry
4	फ़्रिज में मौजूद सामान से रेसिपी ढूंढना	https://github.com/cuppibla/codingjam-fridge-chef
5	एआई मूड जार	https://github.com/cuppibla/codingjam-moodjar
6	एक पेज वाला पोर्टफ़ोलियो	https://github.com/cuppibla/codingjam-my-corner
7	Resume Tailor	https://github.com/cuppibla/codingjam-bulletproof
8	एआई कैरेक्टर से चैट करना	https://github.com/cuppibla/codingjam-character-chat

क्या इस हफ़्ते ड्रॉप-इन सेशन में शामिल होना है? कोई बात नहीं. आज की लाइन चुनो. यह कोडलैब, हर हफ़्ते के लिए एक जैसा ही काम करता है.

2 — वेलकम स्क्रीन पर वापस जाना

"क्लोन रिपॉज़िटरी" बटन का इस्तेमाल करने के लिए, हमें लॉन्च स्क्रीन पर वापस जाना होगा.

👉 Antigravity में, अपनी पसंद के प्रोजेक्ट को क्लोन करें. उदाहरण के लिए, पहले हफ़्ते का क्लोन. हालांकि, आपको सही रेपो डालनी होगी

• पक्का करें कि आपने वह प्रोजेक्ट चुना हो जिसकी कॉपी बनानी है
• पक्का करें कि आपने यह तय कर लिया हो कि आपको फ़ोल्डर को अपनी लोकल मशीन में कहां सेव करना है

⚠️ STOP. READ THIS BEFORE PASTING.

नीचे दिए गए प्रॉम्प्ट में, ⚠️ PASTE_YOUR_PROJECT और ⚠️ PASTE_YOUR_LOCATION प्लेसहोल्डर शामिल हैं.

आपको पहले चरण में मिली अपनी असली वैल्यू से इन्हें बदलना ज़रूरी है. ऐसा न करने पर, .env फ़ाइल में लिटरल ⚠️ PASTE_... टेक्स्ट होगा और आपका ऐप्लिकेशन काम नहीं करेगा.

📝 रेफ़रंस प्रॉम्प्ट

Git clone ⚠️ PASTE_YOUR_PROJECT and save to my local folder: ⚠️ PASTE_YOUR_PROJECT

3 — प्रोजेक्ट का टूर

फ़ाइल की सूची देखें. आपको यह दिखना चाहिए:

फ़ाइल या फ़ोल्डर	यह क्या है
BRIEF.md	प्रॉडक्ट का आइडिया — हम क्या बना रहे हैं, आसान शब्दों में
reference/	काम करने वाले उदाहरण ऐप्लिकेशन वाला फ़ोल्डर. एआई, कोड लिखते समय इसे पढ़ेगा, ताकि आपका ऐप्लिकेशन पैटर्न से मेल खाए.
.gitignore	उन फ़ाइलों की सूची जिन्हें Git को अनदेखा करना चाहिए (तकनीकी जानकारी — इसे अनदेखा करें)

👉 क्लिक करें

BRIEF.md पर क्लिक करके इसे खोलें. यहां प्रोजेक्ट का आइडिया दिया गया है.

✅ चेकपॉइंट: आपने प्रोजेक्ट को क्लोन कर लिया है, उसे वर्कस्पेस के तौर पर खोल लिया है, और BRIEF.md पढ़ लिया है.

3. Install Workshop Skills

"स्किल", GitHub पर सेव किए गए निर्देशों का एक सेट होता है. इसे एआई को दिया जा सकता है.

पहला चरण — Antigravity से Skills इंस्टॉल करने के लिए कहें

📝 इस प्रॉम्प्ट को चैट में चिपकाएं:

Please install the workshop skills into this workspace's .agent/skills/ 
folder. Run these two git clones from the project root:

1. git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden
2. git clone https://github.com/google-gemini/gemini-skills .agent/skills/gemini-skills

When Antigravity asks permission to run each command, I'll click Allow.

When done, list the skills that are now available in this workspace.

दूसरा चरण — दोनों पॉप-अप पर 'अनुमति दें' पर क्लिक करें

🤖 आपको इस तरह की विंडो दिखेगी

I'll create the .agent/skills/ folder and clone both repos into it.

Running: git clone https://github.com/cuppibla/skills-garden .agent/skills/skills-garden

अगर एजेंट प्रॉम्प्ट करता है, तो सभी कार्रवाइयों की अनुमति दें.

👉 फ़ाइलों की सूची देखें. अब आपको एक नया .agent/ फ़ोल्डर दिखेगा. इसे बड़ा करने के लिए क्लिक करें और पक्का करें कि इस फ़ोल्डर में skills-garden और gemini-skills जैसी कई स्किल मौजूद हों.

हर स्किल क्या करती है (सिर्फ़ जानकारी के लिए, कोई कार्रवाई ज़रूरी नहीं है)

स्किल	यह क्या करता है
pm-design-doc	प्रॉडक्ट डिज़ाइन का दस्तावेज़ लिखता है
ux-design-doc	यूएक्स डिज़ाइन का दस्तावेज़ लिखता है
eng-design-doc	इंजीनियरिंग डिज़ाइन का दस्तावेज़ लिखता है. इसमें टेस्टिंग की रणनीति वाला सेक्शन भी शामिल होता है
test-driven-dev	जांच लिखता है, उन्हें चलाता है, और गड़बड़ियों को अपने-आप ठीक करता है (ज़्यादा से ज़्यादा तीन बार)
gemini-api-dev	Google की आधिकारिक स्किल — Gemini API का सही तरीके से इस्तेमाल करने का तरीका
gemini-api	अगर आधिकारिक स्किल उपलब्ध नहीं है, तो बैकअप लेने का आसान तरीका
cloud-pup, y2k-dreamcore	विज़ुअल स्टाइल के रेफ़रंस

अनुमति के लिए दिखने वाले पॉप-अप के बारे में जानकारी: Antigravity, हर शेल कमांड को चलाने से पहले अनुमति मांगता है. यह सुरक्षा से जुड़ी सुविधा है — अच्छी बात है. हमारे दो Git क्लोन के लिए, अनुमति दें पर क्लिक करें. सिर्फ़ इस वर्कशॉप के लिए, सुरक्षा ("टर्बो मोड") को बंद न करें.

✅ चेकपॉइंट: आपकी फ़ाइल की सूची में एक नया .agent/skills/ फ़ोल्डर दिखता है. इसमें skills-garden/ और gemini-skills/ दोनों मौजूद होते हैं.

4. खास जानकारी

स्पेक टॉक में, आपको दो मिनट में एआई को बताना होता है कि आपको क्या बनाना है. कोई कोड नहीं है, कोई दस्तावेज़ नहीं है, अभी तक कुछ भी नहीं बनाया गया है. हम सिर्फ़ बातचीत कर रहे हैं.

एक ज़रूरी सवाल

एआई को यह जानकारी देना सबसे ज़रूरी है:

"क्या इनपुट दिया जाता है और क्या आउटपुट मिलता है?"

🎯 मॉडल: Gemini 3 Flash (डिफ़ॉल्ट) — सामान्य सवाल और जवाब.

📝 इसे चिपकाएं:

Here's what's in @BRIEF.md. Before we lock the spec, ask me 3 short 
questions to refine it:
1. What's the one input I want the user to provide?
2. What's the magical moment for the user?
3. What are we deliberately NOT building (to keep scope tight)?

DO NOT generate any plans, docs, or code yet. Just ask me the questions 
and wait for my answers.

🤖 एआई से बात करें और अपने प्लान को बेहतर बनाएं

अभी दस्तावेज़ जनरेट न करें

स्पेक टॉक के आखिर में, एजेंट को कोई भी फ़ाइल जनरेट नहीं करनी चाहिए. अगर आपको product.md या अन्य नई फ़ाइलें दिखती हैं, तो एजेंट को यह निर्देश दें: "रोको — अभी बनाए गए सभी दस्तावेज़ मिटा दो. हम अब भी स्पेसिफ़िकेशन के बारे में बातचीत करने के चरण में हैं."

सलाह

इनपुट और आउटपुट के बारे में सटीक जानकारी दें. अस्पष्ट: "इससे लोगों को कसरत करने में मदद मिलती है." खास जानकारी: "उपयोगकर्ता ने खुद का 10 सेकंड का एक वीडियो अपलोड किया है, जिसमें वह योगासन कर रहा है. उन्हें अपने फ़ॉर्म की एक पैराग्राफ़ की समीक्षा मिलती है."

अभी यूज़र इंटरफ़ेस (यूआई) डिज़ाइन करने की कोशिश न करें. स्पेसिफ़िकेशन टॉक में क्या है, इस बारे में बताया जाता है. यह कैसा दिखता है, इस बारे में नहीं. यूज़र इंटरफ़ेस (यूआई) से जुड़ा दस्तावेज़, सेक्शन 5 में बाद में दिया गया है.

✅ चेकपॉइंट: आपने Antigravity के साथ अपने प्रॉडक्ट के आइडिया के बारे में थोड़ी बातचीत की है. साथ ही, उसे इनपुट और आउटपुट के बारे में पता है. अभी तक कोई फ़ाइल जनरेट नहीं की गई है.

5. तीन डिज़ाइन दस्तावेज़ जनरेट करो

अब एआई, कोड लिखने से पहले तीन प्लान बनाता है. हम तीनों काम एक ही प्रॉम्प्ट में करते हैं. इसके लिए, डिज़ाइन-डॉक की तीनों स्किल का इस्तेमाल क्रम से किया जाता है.

Docs के तीन वर्शन

फ़ाइल	इसमें क्या-क्या शामिल है	इस्तेमाल की गई स्किल
product.md	उपयोगकर्ता कौन है, हम किस समस्या का समाधान कर रहे हैं, कौनसी सुविधाएं	pm-design-doc
ui.md	स्क्रीन कैसी दिखती हैं, रंग, फ़ॉन्ट, लेआउट	ux-design-doc
engineering.md	टेक्नोलॉजी स्टैक, फ़ाइल स्ट्रक्चर, + टेस्टिंग स्ट्रैटजी सेक्शन	eng-design-doc

पहला चरण - तीनों दस्तावेज़ एक साथ जनरेट करना

🤖 Gemini 3.1 Pro पर स्विच करें. इसमें कम सोच-विचार करने की सुविधा है (सुझाया गया)

📝 इसे चिपकाएं — एक प्रॉम्प्ट से तीनों काम हो जाएंगे:

Apply all three design-doc skills in this order:

1. pm-design-doc from .agent/skills/skills-garden/design-doc-skills/pm-design-doc/
   → Generates product.md

2. ux-design-doc from .agent/skills/skills-garden/design-doc-skills/ux-design-doc/
   → Generates ui.md (based on the product.md you just created)

3. eng-design-doc from .agent/skills/skills-garden/design-doc-skills/eng-design-doc/
   → Generates engineering.md (based on product.md, ui.md, and @BRIEF.md)
   → MUST include a "Testing strategy" section with real content
     (specific functions to unit-test, one integration test per major flow,
     and what's deliberately NOT being tested)

Use the patterns in @reference/ as guidance for the engineering doc 
(but vary if the brief justifies it).

Save all three files in the project root. After each one is saved, 
briefly confirm what you saved before moving to the next.

When all three are done, give me a final summary listing the section 
titles in each file.

दूसरा चरण — सेव की गई फ़ाइलों की पुष्टि करना

👉 फ़ाइलों की सूची देखें. अब आपको (पहले से मौजूद जानकारी के अलावा) यह जानकारी दिखेगी:

codingjam-week-1/
├── product.md          ← NEW
├── ui.md               ← NEW
├── engineering.md      ← NEW
├── BRIEF.md
├── reference/
└── .agent/

तीसरा चरण - समीक्षा करना और दोहराना

आप बॉस हैं. एआई ने प्लान लिखा है. अब इसे पढ़ें और बदलावों का अनुरोध करें.

सबसे ज़रूरी आदत

अगर आपको कोई बदलाव करना है, तो कोड में नहीं, बल्कि DOC में बदलाव करें. दस्तावेज़ ही सही और पूरी जानकारी का सोर्स है.

🤖 तीनों दस्तावेज़ों को पढ़ें और उनकी समीक्षा करें

👉 हर फ़ाइल को ऊपर से नीचे तक खोलें (फ़ाइल की सूची में क्लिक करें):

1. product.md — क्या इसमें वह जानकारी है जो मुझे चाहिए?
2. ui.md — क्या स्क्रीन और लुक सही हैं?
3. engineering.md — क्या टेस्टिंग की रणनीति सही है? (आपको टेक्नोलॉजी के बारे में समझने की ज़रूरत नहीं है. बस यह देखें कि कोई प्लान है या नहीं.)

हर दस्तावेज़ की समीक्षा करें और उसमें बदलाव करें. साथ ही, सीधे तौर पर दस्तावेज़ों पर टिप्पणी करें (जैसे, Google Docs). Antigravity की मदद से, किसी भी फ़ाइल पर इनलाइन टिप्पणियां की जा सकती हैं. यह सुविधा, Google Docs की तरह ही काम करती है. एजेंट आपकी टिप्पणियां पढ़ता है और बदलाव लागू करता है.

🤖 अब दस्तावेज़ तैयार हैं, अगले चरणों पर जाएं.

6. लागू करना + टेस्ट करना

यह कोडलैब का सबसे बड़ा सेक्शन है. एआई, तीनों दस्तावेज़ों को लेता है और ऐप्लिकेशन बनाता है. कोड और टेस्ट, दोनों एक साथ. इस सेक्शन के खत्म होने पर, आपके पास एक ऐसा कोडबेस होगा जो अपने टेस्ट पास कर लेता है.

कोड और टेस्ट साथ-साथ क्यों?

टेस्ट-ड्रिवन-डेव स्किल के बारे में जानकारी: इस स्किल का नाम, टेस्ट-ड्रिवन डेवलपमेंट के नाम पर रखा गया है. हालांकि, हम टीडीडी (जहां टेस्ट पहले आते हैं) का सख्ती से पालन नहीं कर रहे हैं. हम एआई को कोड जनरेट करने की अनुमति देते हैं. इसके बाद, एआई तुरंत टेस्ट जनरेट करता है, उन्हें चलाता है, और किसी भी गड़बड़ी को अपने-आप ठीक कर देता है. इसे "सुरक्षा जांच के तौर पर टेस्ट" के तौर पर देखें, जो लागू करने की प्रोसेस में शामिल होते हैं. ये टेस्ट, किसी भी चीज़ पर क्लिक करने से पहले ही समस्याओं का पता लगा लेते हैं.

आपके engineering.md में पहले से ही यह जानकारी दी गई है कि कौनसे टेस्ट होने चाहिए (टेस्टिंग की रणनीति सेक्शन). जब तक ये टेस्ट पास नहीं हो जाते, तब तक लागू करने की प्रोसेस पूरी नहीं होती. इसलिए, हम दोनों को एक ही चरण में करते हैं.

🤖 Gemini 3.1 Pro पर स्विच करें. इसमें सोचने की क्षमता ज़्यादा होती है (सुझाया गया)

पहला चरण — एआई से कोड और टेस्ट बनाने के लिए कहना

📝 इसे चिपकाएं:

You're going to do two things in one shot.

PART 1 — IMPLEMENT THE APP CODE
- Build it according to @engineering.md (stack, file structure)
- Match the UI described in @ui.md
- Use the patterns in @reference/ as guidance for code style
- Backend: use Python with `uv` for dependency management
- If your chosen stack requires Node.js and it isn't installed on my 
  system, install it via Antigravity (use brew/winget/apt) — ask 
  permission first
- DO NOT start any dev servers — that's a later section

PART 2 — APPLY THE TEST-GATE SKILL
After the code is written, apply the test-driven-dev skill from
.agent/skills/skills-garden/eng-skills/test-driven-dev.md.

Use the "Testing strategy" section in @engineering.md as the test plan.

IMPORTANT: Mock the Gemini API calls in tests — use a stub that returns
fake response data. The real API key isn't set up yet, and tests should
be deterministic and free anyway (best practice).

The skill should:
1. Write the tests described in the Testing strategy
2. Run them (use pytest for Python, Vitest or Jest for JS)
3. If any fail, fix the CODE (not the tests) and re-run
4. Up to 3 retry attempts max
5. If still failing after 3 tries, STOP and tell me what's broken

When Antigravity asks permission to run commands (uv sync, uv pip 
install, pytest, etc.), click Allow.

Report results when both parts are done.

🤖 पॉप-अप (एक से ज़्यादा) की अनुमति दें पर क्लिक करें

दूसरा चरण — फ़ाइनल रिपोर्ट पढ़ें

काम पूरा हो जाने के बाद, इन बातों की जांच करें:

• ✅ कोड के साथ backend/ फ़ोल्डर मौजूद है
• ✅ कोड के साथ frontend/ फ़ोल्डर मौजूद है
• ✅ टेस्ट फ़ाइलों वाला tests/ फ़ोल्डर मौजूद है
• ✅ खास जानकारी में "सभी टेस्ट पास हो गए" लिखा हो, न कि "तीन बार कोशिश करने के बाद भी पास नहीं हो सका"
• ✅ एजेंट ने कोई सर्वर शुरू नहीं किया

अगर तीनों बार टेस्ट करने पर भी पुष्टि नहीं होती है, तो क्या होगा?

ऐसा बहुत कम होता है, लेकिन हो सकता है. आम तौर पर, इसका मतलब यह होता है कि इंजीनियरिंग दस्तावेज़ में बताई गई टेस्टिंग की रणनीति, बनाए गए प्रॉडक्ट के हिसाब से सही नहीं है.

📝 इसे चिपकाएं:

The auto-fix loop hit the 3-try cap. Pull up @engineering.md and look 
at the Testing strategy section. Is the strategy realistic for what 
got built? Suggest updates to the doc so the tests align with reality. 
Don't change the code yet — update the doc, then re-apply the 
test-driven-dev skill.

अगर कुछ गड़बड़ दिखे, तो क्या करें?

👉 अगर एआई ने ऐसा कुछ बनाया है जो दस्तावेज़ों से मेल नहीं खाता, तो दस्तावेज़ पर वापस जाएं. एआई से सिर्फ़ "कोड ठीक करने" के लिए न कहें.

उदाहरण:

I see you built the chat as a popup, but @ui.md says it should be a 
full page. Either update ui.md if a popup is actually better, OR 
rebuild the chat as a full page to match the current ui.md.

हमेशा: दस्तावेज़, भरोसेमंद सोर्स होता है.

झलक दिखाने से पहले हम जांच क्यों करते हैं: जांच से, ब्राउज़र खोले बिना ही इंपोर्ट से जुड़ी गड़बड़ियों और लॉजिक से जुड़ी समस्याओं का पता चल जाता है. अगर हमने पहले प्रीव्यू किया होता, तो हमें उन बग के बारे में पता चल जाता. इसके लिए, हमें अलग-अलग जगहों पर क्लिक करना पड़ता. हर बग को ढूंढने में पांच मिनट लगते. जांच में कुछ ही सेकंड में इनका पता चल जाता है. टेस्ट से समय बचता है, इससे काम नहीं बढ़ता.

"समय बचाने के लिए" टेस्ट स्किप न करें. टेस्ट स्किप करने से, 50 मिनट पर ऐसे बग मिलते हैं जिन्हें समझना मुश्किल होता है. वहीं, ऑटो-टेस्ट से ये बग 35 मिनट पर ही मिल जाते हैं.

✅ चेकपॉइंट: कोड मौजूद है, टेस्ट मौजूद हैं, टेस्ट पास हो गए हैं. एपीआई पासकोड सेट अप करने के लिए तैयार है.

7. Google Cloud + API कुंजी का सेटअप

पहला चरण — AI Studio से Gemini API पासकोड पाएं (एक मिनट)

1. एक नए ब्राउज़र टैब में, https://aistudio.google.com/app/apikey खोलें.
2. एक ही Google खाते से साइन इन किया गया हो.
3. सबसे ऊपर दाईं ओर मौजूद, "एपीआई पासकोड बनाएं" पर क्लिक करें.
4. प्रोजेक्ट ड्रॉपडाउन के साथ एक डायलॉग बॉक्स खुलता है:
   • अगर आपने पहले से कोई Google प्रोजेक्ट बनाया हुआ है, तो उसे चुनें. इसके बाद, "मौजूदा प्रोजेक्ट में एपीआई पासकोड बनाएं" पर क्लिक करें
   • अगर सूची में नहीं है: "प्रोजेक्ट बनाएं" पर क्लिक करें.
5. दिखने वाले एपीआई पासकोड को कॉपी करें. AIza... से शुरू होता है. इसमें ~40 वर्ण होते हैं.

✏️ इसे किसी सुरक्षित जगह पर चिपकाएं — आपको इसे Antigravity को देना होगा.

एपीआई पासकोड को पासवर्ड की तरह इस्तेमाल करें. इसे सार्वजनिक चैट, स्क्रीनशॉट में न चिपकाएं या सार्वजनिक GitHub रिपो में सबमिट न करें. हम इसे .env फ़ाइल में सेव करेंगे. यह फ़ाइल पहले से ही .gitignore में मौजूद है.

दूसरा चरण — Antigravity को .env सेट अप करने के लिए कहें (30 सेकंड)

Antigravity में वापस जाकर, चैट खोलें.

⚠️ STOP. READ THIS BEFORE PASTING.

नीचे दिए गए प्रॉम्प्ट में, PASTE_YOUR_API_KEY_HERE और PASTE_YOUR_PROJECT_ID_HERE प्लेसहोल्डर शामिल हैं.

आपको पहले चरण में दी गई अपनी असली वैल्यू से इन्हें बदलना ज़रूरी है. ऐसा न करने पर, .env फ़ाइल में लिटरल ⚠️ PASTE_... टेक्स्ट होगा और आपका ऐप्लिकेशन काम नहीं करेगा.

'भेजें' पर क्लिक करने से पहले, प्रॉम्प्ट को स्कैन करें और पुष्टि करें कि आपको यह दिख रहा है:

• GEMINI_API_KEY=AIzaSy... (AIzaSy से शुरू होता है, ~40 वर्ण)

अगर आपको अब भी

⚠️ PASTE_...

प्रॉम्प्ट में कहीं भी मौजूद हैं, तो उन्हें अभी न भेजें — पहले उन्हें बदलें.

📝 चिपकाने के लिए प्रॉम्प्ट (

⚠️ PASTE_...

मार्कर पहले!):

Apply the gemini-api-dev skill from .agent/skills/gemini-skills/skills/gemini-api-dev/.
(If that skill isn't found, fall back to .agent/skills/skills-garden/eng-skills/gemini-api.md)

Create a .env file in the backend folder with these settings:
- GEMINI_API_KEY= ⚠️ PASTE_YOUR_API_KEY_HERE
- Any other env vars the app needs based on @engineering.md

Also verify:
- .env is in .gitignore so the key never gets committed
- The backend code reads GEMINI_API_KEY at startup
- The Gemini SDK is initialized correctly (use google-genai for Python)

When Antigravity asks permission to install Python packages, click Allow.
When done, show me the .env contents with the KEY redacted (just first 6 chars + ...).

🤖 अनुमानित जवाब: एजेंट .env बनाता है, google-genai इंस्टॉल करता है (आपको 'अनुमति दें' पर क्लिक करना होगा), और काटी गई कुंजी की पुष्टि करता है:

✅ .env created at backend/.env
GEMINI_API_KEY=AIzaSy... (40 chars, redacted)

.env is already in .gitignore ✓
Backend reads GEMINI_API_KEY via os.getenv() ✓
Gemini client initialized ✓

अगर एजेंट रिपोर्ट करता है कि GEMINI_API_KEY=<<>> — आपने प्लेसहोल्डर को बदलना भूल गए! इसे चिपकाएं:

The .env file has the literal placeholder text instead of my real key.
Please update GEMINI_API_KEY to AIzaSy... (paste your real key).

8. झलक देखें और पुष्टि करें

कोड बनाया गया है. टेस्ट पास हो गए हैं. एपीआई पासकोड कॉन्फ़िगर किया गया. अब ऐप्लिकेशन खोलें और उस पर क्लिक करें.

ऐसी कौनसी चीज़ें हैं जिन्हें इंसान पकड़ लेते हैं, लेकिन टेस्ट नहीं पकड़ पाते

टेस्ट में मिली गड़बड़ियां	Humans Catch
गलत रिटर्न वैल्यू	भद्दे रंग
फ़ंक्शन कॉल ठीक से काम नहीं कर रहे हैं	भ्रम की स्थिति पैदा करने वाली कॉपी
इंपोर्ट किए गए डेटा का मौजूद न होना	बटन अजीब जगहों पर मौजूद हैं
एक की गड़बड़ियां	ऐनिमेशन ठीक से नहीं चल रहा है
लॉजिक बग	वाइब्रेशन की सुविधा बंद है

पहला चरण. Antigravity से Dev Server शुरू करने के लिए कहें

🎯 मॉडल: डिफ़ॉल्ट (फ़्लैश) ठीक है.

📝 इसे चिपकाएं:

Please start the dev server(s) so I can preview the app in my browser.
Tell me the URL when it's ready. When Antigravity asks permission to 
run the server command, I'll click Allow.

🔔 पॉप-अप: uv run uvicorn main:app --reload (या इसी तरह का कोई अन्य विकल्प) → अनुमति दें पर क्लिक करें

दूसरा चरण — झलक का यूआरएल खोलना

🤖 एजेंट ने बताया कि:

Backend running at: http://localhost:8000
Frontend served at: http://localhost:8000 (backend serves it)

यूआरएल आम तौर पर http://localhost:8000 या http://localhost:5173 होता है.

👉 चैट में मौजूद यूआरएल पर क्लिक करें या उसे कॉपी करके ब्राउज़र के नए टैब में चिपकाएं.

तीसरा चरण — 'आस-पास' पर क्लिक करें

इसे किसी असली उपयोगकर्ता की तरह इस्तेमाल करें:

• हर बटन पर क्लिक करें
• इनमें टाइप करें
• चीज़ों पर कर्सर घुमाएं
• मुख्य फ़्लो को शुरू से आखिर तक आज़माएं

अगर सब कुछ ठीक लग रहा है, तो सीधे चरण 9.7 (README लिखें) पर जाएं. अगर आपको समस्याएं मिलती हैं, तो ही चरण 9.4 से 9.6 पूरे करें.

चौथा चरण — README फ़ाइल लिखना

ऐप्लिकेशन के काम करने के बाद, इसे लॉक करें:

📝 इसे चिपकाएं:

The app works! Please create a README.md in the project root that explains:
- What this app does (in plain English)
- How to install it on a new machine (uv sync, etc.)
- How to run the dev server(s)
- The 3 design docs (@product.md, @ui.md, @engineering.md) are the 
  source of truth — anyone can read them to understand the system

Save it as README.md.

🤖 अपेक्षित: फ़ाइल की सूची में README.md दिखता है.

README फ़ाइल क्यों ज़रूरी है

आप ऐसा कॉन्टेंट बना रहे हैं जो लंबे समय तक चलेगा. engineering.md, आपके टेस्ट, और README की मदद से, आज ही काम बंद किया जा सकता है और तीन हफ़्तों बाद फिर से शुरू किया जा सकता है. आगे काम करने के लिए ज़रूरी सभी चीज़ें डिस्क पर सेव की जाती हैं. यह एक असली प्रोजेक्ट है, सिर्फ़ डेमो नहीं.

✅ चेकपॉइंट: आपने ऐप्लिकेशन पर क्लिक किया, किसी भी समस्या को ठीक किया (अगर कोई समस्या है), और README सेव किया.

9. 🎉 आपने एमवीपी शिप कर दिया है!

आपने कमाल कर दिखाया.

आपने क्या बनाया

• ✅ एआई की मदद से काम करने वाला वेब ऐप्लिकेशन
• ✅ तीन डिज़ाइन दस्तावेज़ (product.md, ui.md, engineering.md)
• ✅ एक असली टेस्ट सुइट, जो कोड में बदलाव करने पर हर बार चलता है
• ✅ README.md ताकि आप इसे कभी भी देख सकें
• ✅ Google के Gemini AI से कनेक्ट करने की सुविधा

आपने आइडिया से लेकर ऐप्लिकेशन बनाने तक का सफ़र पूरा किया. इसके लिए, आपको एक भी लाइन का कोड नहीं लिखना पड़ा. यह तो कमाल है.

आपने क्या सीखा

स्किल	यह ज़रूरी क्यों है
स्पेसिफ़िकेशन → कोड+टेस्ट → पुष्टि करें	सबसे पहले प्लान बनाएं. साथ मिलकर कोड और टेस्ट बनाएं. सबसे आखिर में मौजूद 'क्लिक करें' पर क्लिक करें. हमेशा इसी क्रम में.
कोड में नहीं, बल्कि दस्तावेज़ में बदलाव करना	अगर कोई गड़बड़ी होती है, तो प्लान बदलें और फिर से बनाएं. पैच न करें.
सुरक्षा जांच	लागू करने के लिए बनाया गया — एआई, आपकी ग़लतियों को पहले ही पकड़ लेता है.
रिग्रेशन का नियम	इंसानों को मिलने वाली हर गड़बड़ी, एक टेस्ट बन जाती है. यह गड़बड़ी कभी वापस नहीं आएगी.
दस्तावेज़ पर आधारित पिवट	दिशा बदलने पर, दस्तावेज़ में बदलाव करें. बाकी काम एआई कर लेगा.
Antigravity 3-लेयर फ़्लो	चैट में अंग्रेज़ी → एजेंट ने कमांड चुनी → आपने स्वीकार किया.

क्या आपको अगले हफ़्ते वापस आना है?

• आठ हफ़्तों की टेबल से कोई दूसरी लाइन चुनें
• Antigravity के "क्लोन रिपॉज़िटरी" बटन का इस्तेमाल करके, उस हफ़्ते की रिपॉज़िटरी को क्लोन करें
• हर वर्कस्पेस के लिए, नई स्किल इंस्टॉल की जाती हैं. वर्कस्पेस के स्कोप में आने वाली स्किल, पहले से मौजूद नहीं होती हैं
• आपके पास उसी Google Cloud प्रोजेक्ट का फिर से इस्तेमाल करने का विकल्प होता है
• बाकी सब कुछ वही वर्कफ़्लो है जिसके बारे में आपने अभी सीखा है

आगे क्या करना है

• अपना प्रोजेक्ट पब्लिश करें: अपने प्रोजेक्ट को Coding Jam की साइट पर पब्लिश करें!
• घर पर बनाएं: आपके तीनों दस्तावेज़ पोर्टेबल हैं. उन्हें किसी भी एआई टूल में खोलें और आगे काम करना जारी रखें
• किसी दोस्त को साथ लाएं: इस कोडलैब के ज़रिए किसी नए व्यक्ति के साथ पेयर करें. पढ़ाने से सबसे जल्दी सीखा जा सकता है

संसाधन

• Antigravity से जुड़े दस्तावेज़
• Antigravity Skills Docs
• Antigravity Conversation View
• Gemini की आधिकारिक सुविधाएं (Google)
• कोडिंग जैम स्टार्टर (सभी आठ हफ़्ते)
• स्किल गार्डन (हमने जिन स्किल का इस्तेमाल किया)
• Gemini API का दस्तावेज़
• FastAPI का दस्तावेज़

इस क्लब में आपका स्वागत है. अब आपके पास बिल्डर की भूमिका है. अब और भी चीज़ें बनाएं.