AI द्वारा लिखे गए फ़्रंटएंड कोड को तुरंत प्रोडक्शन में डालने के लिए एक ऑटोमेटेड एनवायरनमेंट बनाना
makedream٢٦ يوليو ٢٠٢٦
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
AI टूल्स के डेमो वीडियो में कुछ बटन दबाने और कुछ वाक्य टाइप करने पर शानदार UI बनकर सामने आ जाता है। असली समस्या ज़मीनी हकीकत में है। जैसे ही आप AI द्वारा जनरेट किए गए कोड को अपने मौजूदा प्रोजेक्ट में लाते हैं, स्टाइल पूरी तरह टूट जाता है और स्टेट मैनेजमेंट उलझ जाता है। इसे ठीक करने और संभालकर रखने में डेवलपर का समय दोगुना लग जाता है—यह अनुभव हममें से लगभग हर किसी ने कभी न कभी ज़रूर किया होगा।
आखिरकार, AI कोड को बिना किसी परेशानी के इस्तेमाल करने के लिए आपको स्टैटिक एनालिसिस, स्टेट स्ट्रक्चरिंग और विजुअल वेरिफिकेशन को ऑटोमेटेड गार्डरेल्स (guardrails) के साथ बांधना होगा। यहाँ वो सटीक सेटअप गाइड दी गई है जिससे आप रात भर कोड ठीक करने के बजाय उसे तुरंत इस्तेमाल करने लायक स्थिति में ला सकते हैं।
AI संदर्भ (context) को अच्छी तरह समझने के बाद भी अचानक प्रोजेक्ट टोकन्स को नज़रअंदाज़ कर देता है। वह w-[327px] जैसे स्क्वेयर ब्रैकेट वाले मनमाने मान या हेक्सा कोड वाले इनलाइन स्टाइल्स को अपनी मर्ज़ी से कोड में ठूंस देता है। इससे डिज़ाइन सिस्टम एक ही बार में ध्वस्त हो जाता है और CSS की प्राथमिकताएँ उलझ जाती हैं।
अगर कोई इंसान इसे देखकर खुद ठीक करने बैठेगा, तो बहुत देर हो जाएगी। Linter का इस्तेमाल करके कोड के प्रवेश द्वार पर ही इसे रोकना होगा।
प्रोजेक्ट के लिए ज़रूरी पैकेज इंस्टॉल करें।bash npm install -D eslint-plugin-tailwindcss @html-eslint/eslint-plugin
eslint.config.mjs फ़ाइल में स्क्वेयर ब्रैकेट वाले मानों और इनलाइन स्टाइल्स को एरर के रूप में पकड़ने के नियम जोड़ें।
Package स्क्रिप्ट में npx eslint --fix को रजिस्टर करें और कोड मिलते ही तुरंत इसे चलाएं।
इस तरह से सेट करने पर, जैसे ही स्क्वेयर ब्रैकेट या इनलाइन स्टाइल आता है, लिंटर इसे एरर मानकर तुरंत सबसे करीब वाले स्टैंडर्ड यूटिलिटी क्लास से बदल देता है। इससे बेकार के काम खत्म हो जाते हैं और स्टाइल मिलाने में लगने वाला समय प्रति सप्ताह 5 घंटे से अधिक बच जाता है।
`javascript
// eslint.config.mjs
import eslintPluginTailwindcss from "eslint-plugin-tailwindcss";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
plugins: {
tailwindcss: eslintPluginTailwindcss,
},
settings: {
tailwindcss: {
cssConfigPath: "./styles/tailwind.css",
},
},
rules: {
"tailwindcss/no-arbitrary-value": "error",
"tailwindcss/no-custom-classname": [
"error",
{ whitelist: ["custom-*"] },
],
"tailwindcss/classnames-order": "warn",
},
},
]);
`
| लिंटिंग नियम | जाँच का तरीका | ब्लॉक किए जाने वाले उदाहरण | ऑटो-करेक्ट परिणाम |
|---|---|---|---|
| @html-eslint/no-inline-styles | JSX इनलाइन स्टाइल्स को ब्लॉक करना | <div style={{color: '#ff0a00'}}> |
<div className="text-destructive"> |
| tailwindcss/no-arbitrary-value | स्क्वेयर ब्रैकेट मानों को ब्लॉक करना | <button className="w-[327px]"> |
<button className="w-80"> |
| tailwindcss/no-custom-classname | अनरजिस्टर्ड क्लास नामों का पता लगाना | <div className="my-custom-card"> |
<div className="rounded-lg border bg-card shadow-sm"> |
जब आप AI से React कंपोनेंट बनाने के लिए कहते हैं, तो दस में से नौ बार वह एक ही फ़ाइल के अंदर तीन-चार useState बिखेर देता है। इसके ऊपर अगर एसिंक्रोनस API कॉल्स और एरर हैंडलिंग भी उलझ जाएं, तो रेंडरिंग का धमाका होना तय है।
क्लाइंट UI स्टेट को Zustand के साथ इकट्ठा किया जाना चाहिए, और सर्वर डेटा को React Query का उपयोग करके अलग किया जाना चाहिए। इनपुट फॉर्म्स के लिए Zod और react-hook-form के कॉम्बिनेशन से ढांचा फिक्स करें।
डिपेंडेंसी लाइब्रेरीज़ इंस्टॉल करें।bash npm install @tanstack/react-query zod react-hook-form @hookform/resolvers
AI प्रॉम्प्ट स्कीमा में डायरेक्ट fetch के उपयोग को प्रतिबंधित करें और उसे Zod स्कीमा के साथ पहले टाइप्स को परिभाषित करने का निर्देश दें।
वेरिफिकेशन को ऑटोमेट करने के लिए react-hook-form में zodResolver जोड़ें, और सबमिट के समय useMutation को कॉल करने के लिए स्ट्रक्चर सेट करें।
अनावश्यक री-रेंडरिंग पूरी तरह गायब हो जाएगी। इनपुट वैल्यू वेरिफिकेशन की विफलताएँ कंपोनेंट के अंदर तक पहुँच भी नहीं पाएँगी।
`typescript
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
export const userProfileSchema = z.object({
username: z.string().min(2, { message: '이름은 최소 2자 이상이어야 합니다.' }),
email: z.string().email({ message: '올바른 이메일 형식이 아닙니다.' }),
role: z.enum(['admin', 'user'], { required_error: '역할을 선택하세요.' }),
});
export type UserProfileInputs = z.infer;
export function ProfileForm() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(userProfileSchema),
});
const onSubmit = (data: UserProfileInputs) => {
// React Query Mutation 실행
};
return (
| क्षेत्र | AI एंटी-पैटर्न | रिफाइंड स्ट्रक्चर | लाभ |
|---|---|---|---|
| क्लाइंट स्टेट | बिखरा हुआ useState | Zustand सिंगल स्टोर | अनावश्यक री-रेंडरिंग से बचाव |
| सर्वर डेटा | useEffect के अंदर fetch | React Query रैपिंग | ऑटोमैटिक कैशिंग और डिक्लेरेटिव लोडिंग हैंडलिंग |
| फॉर्म वेरिफिकेशन | मैनुअल कंडीशनल चेक्स | Zod + react-hook-form | टाइप सेफ्टी और ऑटोमेटेड वेरिफिकेशन |
अक्सर सिर्फ एक डेस्कटॉप स्क्रीन देखकर लोग सोच लेते हैं कि "वाह, यह बहुत बढ़िया दिख रहा है", लेकिन जब उसे मोबाइल पर खोलते हैं तो लेआउट पूरी तरह से बिगड़ा हुआ मिलता है। WebAIM की 2025 वेब एक्सेसिबिलिटी रिपोर्ट के अनुसार, टॉप 1 मिलियन साइटों के केवल मुख्य पेजों पर ही औसतन 51 से अधिक WCAG त्रुटियाँ पाई जाती हैं। ऐसे में AI द्वारा अभी-अभी निकाले गए कोड के रिस्पॉन्सिव लेआउट का टूटना तो तय ही है।
Playwright और Pixelmatch के साथ रिग्रेशन टेस्टिंग को ऑटोमेट करके आपको ब्राउज़र विंडो का आकार एक-एक करके छोटा करके जांचने की आवश्यकता नहीं होगी।
टेस्टिंग टूल्स इंस्टॉल करें।bash npm install -D @playwright/test @axe-core/playwright
मोबाइल (375px), टैबलेट (768px), और डेस्कटॉप (1440px) व्यूपोर्ट्स से होते हुए स्नैपशॉट लेने वाला एक स्क्रिप्ट जोड़ें।
maxDiffPixelRatio थ्रेशोल्ड को 0.02 पर सेट करें। यदि यह इससे अधिक होता है, तो पिक्सेल अंतर वाली इमेज को AI प्रॉम्प्ट पर वापस भेजें ताकि यह मीडिया क्वेरीज़ को दोबारा लिख सके।
इस रेंडरिंग टेस्ट लूप को चलाने के बाद, UI के मैनुअल निरीक्षण का समय 80% से अधिक कम हो गया है।
`typescript
import { test, expect } from '@playwright/test';
const viewports = [
{ name: 'mobile', width: 375, height: 667 },
{ name: 'tablet', width: 768, height: 1024 },
{ name: 'desktop', width: 1440, height: 900 },
];
for (const vp of viewports) {
test(Responsive layout test - ${vp.name}, async ({ page }) => {
await page.setViewportSize({ width: vp.width, height: vp.height });
await page.goto('/render-test-harness');
await expect(page.locator('#ai-component-root')).toHaveScreenshot(
`component-${vp.name}.png`,
{
maxDiffPixelRatio: 0.02,
threshold: 0.2,
animations: 'disabled',
}
);
});
}
`
चाहे आप प्रॉम्प्ट कितने भी अच्छे से क्यों न लिखें, AI से कभी-कभी कचरा कोड निकल ही आता है। कमिट करने से ठीक पहले जिन कोड्स में टाइप एरर आ रहे हों या जो लिंट को पास न कर पा रहे हों, उन्हें Git वर्किंग स्पेस में आने से ही रोका जाना चाहिए।
Lefthook के साथ Git hooks सेट करें।
प्रोजेक्ट में Lefthook इंस्टॉल करें और रूट में lefthook.yml बनाएँ।bash npm install -D lefthook
pre-commit स्टेज में ESLint, Prettier, और TypeScript चेक कमांड्स जोड़ें।
stage_fixed: true ऑप्शन को चालू करें ताकि ऑटो-करेक्ट किए गए बदलाव तुरंत कमिट में रिफ्लेक्ट हो सकें।
यदि कोई संशोधित टाइप त्रुटि या अनधिकृत रूप से हटाए गए Props हैं, तो कमिट वहीं रुक जाएगा। यह डेवलपर्स द्वारा एक-एक करके कोड रिव्यूअर बनकर AI के कचरे को साफ़ करने की अकुशलता को खत्म करने का सबसे निश्चित तरीका है।
`yaml
pre-commit:
commands:
eslint-autofix:
glob: ".{js,ts,jsx,tsx}"
run: npx eslint --fix {staged_files}
stage_fixed: true
prettier-format:
glob: ".{js,ts,jsx,tsx,css,json}"
run: npx prettier --write {staged_files}
stage_fixed: true
typescript-check:
glob: "*.{ts,tsx}"
run: npx tsc --noEmit
`