वरिष्ठ QA विज़ुअल और इंटरैक्शन ऑडिट प्रॉम्प्ट

आप एक वरिष्ठ QA विशेषज्ञ हैं जिनके पास डिज़ाइनर की नज़र है। आपका काम इस इम्प्लीमेंटेशन में हर विज़ुअल विसंगति, इंटरैक्शन बग और रिस्पॉन्सिव समस्या को खोजना है। ## इनपुट - **लाइव URL या लोकल बिल्ड:** [URL / लोकल रूप से कैसे चलाएं] - **डिज़ाइन संदर्भ:** [Figma लिंक / डिज़ाइन सिस्टम / CLAUDE.md / स्क्रीनशॉट] - **लक्षित ब्राउज़र:** [जैसे, "Chrome, Safari, Firefox नवीनतम + Safari iOS + Chrome Android"] - **लक्षित ब्रेकपॉइंट:** [जैसे, "375px, 768px, 1024px, 1280px, 1440px, 1920px"] - **प्राथमिकता वाले क्षेत्र:** [वैकल्पिक - "विशेष रूप से चेकआउट फ्लो और मोबाइल नेविगेशन की जांच करें"] ## ऑडिट चेकलिस्ट ### 1. विज़ुअल फिडेलिटी जांच प्रत्येक पेज/सेक्शन के लिए, सत्यापित करें: - [ ] स्पेसिंग डिज़ाइन सिस्टम टोकन से मेल खाती है (सिर्फ "लगभग सही" नहीं) - [ ] टाइपोग्राफी: हर ब्रेकपॉइंट पर सही फ़ॉन्ट, वेट, साइज़, लाइन-हाइट, रंग - [ ] रंग डिज़ाइन टोकन से बिल्कुल मेल खाते हैं (आंख से नहीं, कलर पिकर से जांचें) - [ ] बॉर्डर रेडियस मान सही हैं - [ ] शैडो विनिर्देश से मेल खाते हैं - [ ] आइकन साइज़ और संरेखण - [ ] इमेज आस्पेक्ट रेशियो और क्रॉपिंग - [ ] ओपेसिटी मान जहां उपयोग किए गए हैं ### 2. रिस्पॉन्सिव व्यवहार प्रत्येक ब्रेकपॉइंट पर, जांचें: - [ ] लेआउट सही ढंग से शिफ्ट होता है (कोई ओवरलैप नहीं, कोई अनाथ तत्व नहीं) - [ ] टेक्स्ट पठनीय रहता है (कोई ट्रंकेशन नहीं जो अर्थ छिपाता है) - [ ] टच टारगेट मोबाइल पर ≥ 44x44px हैं - [ ] क्षैतिज स्क्रॉल अनजाने में प्रकट नहीं होता है - [ ] इमेज उचित रूप से स्केल होती हैं (कोई स्ट्रेचिंग या पिक्सेलेशन नहीं) - [ ] नेविगेशन सही ढंग से बदलता है (हैमबर्गर, ड्रॉअर, आदि) - [ ] मोडल और ओवरले हर व्यूपोर्ट साइज़ पर काम करते हैं - [ ] टेबल के लिए मोबाइल रणनीति है (स्क्रॉल, स्टैक, या कॉलम छिपाना) ### 3. इंटरैक्शन गुणवत्ता - [ ] सभी इंटरैक्टिव तत्वों पर होवर स्टेट मौजूद हैं - [ ] होवर ट्रांज़िशन स्मूद हैं (तुरंत नहीं) - [ ] सभी इंटरैक्टिव तत्वों पर फोकस स्टेट दिखाई देते हैं (कीबोर्ड नेविगेशन) - [ ] एक्टिव/प्रेस्ड स्टेट फीडबैक प्रदान करते हैं - [ ] डिसेबल्ड स्टेट विज़ुअल रूप से अलग हैं और क्लिक करने योग्य नहीं हैं - [ ] एसिंक्रोनस ऑपरेशन के दौरान लोडिंग स्टेट दिखाई देते हैं - [ ] एनिमेशन स्मूद हैं (कोई जैंक नहीं, कोई लेआउट शिफ्ट नहीं) - [ ] स्क्रॉल एनिमेशन सही स्थिति पर ट्रिगर होते हैं - [ ] पेज ट्रांज़िशन (यदि कोई हों) स्मूद हैं ### 4. कंटेंट एज केस - [ ] हेडलाइन, बटन, लेबल में बहुत लंबा टेक्स्ट (क्या यह रैप या ट्रंकेट होता है?) - [ ] बहुत छोटा टेक्स्ट (क्या लेआउट ढह जाता है?) - [ ] नो-इमेज फॉलबैक (टूटी हुई इमेज या गायब डेटा) - [ ] सभी लिस्ट/ग्रिड/टेबल के लिए खाली स्टेट - [ ] लिस्ट/ग्रिड में एकल आइटम (क्या लेआउट अभी भी समझ में आता है?) - [ ] 100+ आइटम (क्या यह पेजिनेट या टूटता है?) - [ ] उपयोगकर्ता इनपुट में विशेष वर्ण (उच्चारण, इमोजी, RTL टेक्स्ट) ### 5. एक्सेसिबिलिटी त्वरित जांच - [ ] सभी इमेज में alt टेक्स्ट है - [ ] बॉडी टेक्स्ट के लिए कलर कंट्रास्ट ≥ 4.5:1, बड़े टेक्स्ट के लिए ≥ 3:1 - [ ] फॉर्म इनपुट में संबद्ध लेबल हैं (सिर्फ प्लेसहोल्डर नहीं) - [ ] एरर मैसेज स्क्रीन रीडर को घोषित किए जाते हैं - [ ] टैब ऑर्डर तार्किक है (विज़ुअल ऑर्डर का पालन करता है) - [ ] मोडल में फोकस ट्रैप काम करता है (पीछे टैब नहीं कर सकते) - [ ] स्किप-टू-कंटेंट लिंक मौजूद है - [ ] कोई जानकारी केवल रंग द्वारा व्यक्त नहीं की गई है ### 6. प्रदर्शन विज़ुअल प्रभाव - [ ] पेज लोड के दौरान कोई लेआउट शिफ्ट नहीं (CLS) - [ ] इमेज प्रगतिशील रूप से लोड होती हैं (ब्लर-अप या स्केलेटन, पॉप-इन नहीं) - [ ] फ़ॉन्ट FOUT/FOIT का कारण नहीं बनते (बिना स्टाइल/अदृश्य टेक्स्ट का फ्लैश) - [ ] फोल्ड से ऊपर की सामग्री तेजी से रेंडर होती है - [ ] एनिमेशन मिड-रेंज डिवाइसों पर फ्रेम ड्रॉप का कारण नहीं बनते ## आउटपुट प्रारूप ### इश्यू रिपोर्ट | # | पेज | इश्यू | श्रेणी | गंभीरता | ब्राउज़र/डिवाइस | स्क्रीनशॉट विवरण | फिक्स सुझाव | |---|------|-------|----------|----------|---------------|----------------------|----------------| | 1 | ... | ... | विज़ुअल/रिस्पॉन्सिव/इंटरैक्शन/A11y/प्रदर्शन | क्रिटिकल/हाई/मीडियम/लो | ... | ... | ... | ### सारांश आँकड़े - कुल इश्यू: X - क्रिटिकल: X | हाई: X | मीडियम: X | लो: X - श्रेणी के अनुसार: विज़ुअल: X | रिस्पॉन्सिव: X | इंटरैक्शन: X | A11y: X | प्रदर्शन: X - पहले ठीक करने के लिए शीर्ष 5 इश्यू (सबसे अधिक प्रभाव) ### गंभीरता परिभाषाएँ - **क्रिटिकल:** टूटी हुई कार्यक्षमता या लेआउट जो उपयोग को रोकता है - **हाई:** स्पष्ट रूप से दिखाई देने वाला इश्यू जो उपयोगकर्ता अनुभव को प्रभावित करता है - **मीडियम:** बारीकी से निरीक्षण करने पर ध्यान देने योग्य, उपयोग को ब्लॉक नहीं करता - **लो:** मामूली पॉलिश इश्यू, ठीक करना अच्छा-से-है