तकनीकी स्टैक विश्लेषण और कर्सर नियम जनरेटर

=================== --- description: globs: alwaysApply: true --- # पेज UI टेक स्टैक और डिपेंडेंसी गाइड ## प्रोजेक्ट अवलोकन **पेज UI** एक लैंडिंग पेज कंपोनेंट लाइब्रेरी है जो आधुनिक React/Next.js स्टैक पर बनी है: - **वेबसाइट**: कंपोनेंट डेमो के साथ Next.js 14 डॉक्यूमेंटेशन साइट - **CLI टूल**: आसान प्रोजेक्ट इनिशियलाइज़ेशन के लिए `@ page-ui/wizard` - **कंपोनेंट्स**: Radix UI + Tailwind CSS पर बने कॉपी-पेस्ट React कंपोनेंट्स ## कोर फ्रेमवर्क स्टैक ### **Next.js 14.2.24** (App Router) - **फ्रेमवर्क**: App Router आर्किटेक्चर के साथ React मेटा-फ्रेमवर्क - **उपयोग की गई सुविधाएँ**: API रूट्स, SSG/SSR, OG इमेज जनरेशन, बंडल एनालिसिस - **सर्वोत्तम अभ्यास**: App Router पैटर्न का उपयोग करें, pages डायरेक्टरी से बचें ### **React 18.2.0** - **UI लाइब्रेरी**: कंकरेंट फीचर्स के साथ कोर React लाइब्रेरी - **सुविधाएँ**: Suspense, ऑटोमैटिक बैचिंग, सर्वर कंपोनेंट्स - **सर्वोत्तम अभ्यास**: React 18 पैटर्न का उपयोग करें ### **TypeScript 5.1.3** - **कॉन्फ़िगरेशन**: बेहतर टाइप सुरक्षा के लिए स्ट्रिक्ट मोड सक्षम - **सर्वोत्तम अभ्यास**: आधुनिक TS वर्जन ## UI कंपोनेंट सिस्टम ### **Radix UI प्रिमिटिव्स** (v1.x सीरीज़) एक्सेसिबिलिटी-फर्स्ट कंपोनेंट लाइब्रेरी इकोसिस्टम: **सर्वोत्तम अभ्यास**: - कंपाउंड कंपोनेंट पैटर्न का उपयोग करें - हमेशा इनलाइन स्टाइल के बजाय Tailwind क्लासेस से कस्टमाइज़ करें - उचित ARIA एट्रिब्यूट्स लागू करें (बिल्ट-इन) - लगातार स्टाइलिंग के लिए कस्टम कंपोनेंट्स में लपेटें ### **Shadcn/UI डिज़ाइन पैटर्न** - **स्थान**: `/components/shared/ui/` डायरेक्टरी - **फिलॉसफी**: NPM डिपेंडेंसी नहीं, कॉपी-पेस्ट कंपोनेंट्स - **स्टाइलिंग**: थीमिंग के लिए Tailwind CSS + CSS वेरिएबल्स - **वेरिएंट्स**: टाइप-सेफ वेरिएंट्स के लिए `class-variance-authority` का उपयोग करता है ## स्टाइलिंग और डिज़ाइन सिस्टम ### **Tailwind CSS 3.3.3** + इकोसिस्टम ```json { "tailwindcss": "^3.3.3", "@ tailwindcss/forms": "^0.5.4", "@ tailwindcss/typography": "^0.5.9", "tailwindcss-animate": "^1.0.7", "tailwind-merge": "^1.14.0" } ``` **सर्वोत्तम अभ्यास**: - कंडीशनल क्लासेस के लिए `tailwind-merge` का उपयोग करें: `cn(baseClasses, conditionalClasses)` - थीमिंग के लिए CSS वेरिएबल्स का लाभ उठाएं: `hsl(var(--primary))` - फॉर्म्स और टाइपोग्राफी के लिए प्लगइन्स का उपयोग करें - लगातार स्पेसिंग और कलर सिस्टम लागू करें ### **एनिमेशन लाइब्रेरीज़** - **Framer Motion 10.16.4**: जटिल एनिमेशन, पेज ट्रांज़िशन - **Tailwind Animate**: सरल CSS एनिमेशन - **सर्वोत्तम अभ्यास**: सरल इफेक्ट्स के लिए CSS एनिमेशन का उपयोग करें, जटिल इंटरैक्शन के लिए Framer Motion का उपयोग करें ```typescript // Framer Motion सर्वोत्तम अभ्यास: import { motion, AnimatePresence } from 'framer-motion' function AnimatedComponent() { return ( <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.3 }} > Content </motion.div> ) } ``` ## स्टेट मैनेजमेंट और फॉर्म्स ### **Zustand 4.5.2** (ग्लोबल स्टेट) - **फिलॉसफी**: न्यूनतम, अनओपिनियनेटेड स्टेट मैनेजमेंट - **उपयोग**: थीम प्रेफरेंस, ग्लोबल UI स्टेट, कंपोनेंट प्लेग्राउंड स्टेट - **सर्वोत्तम अभ्यास**: उचित सेलेक्टर्स के साथ टाइप्ड स्टोर्स बनाएं ```typescript interface ThemeState { theme: 'light' | 'dark' setTheme: (theme: 'light' | 'dark') => void } export const useThemeStore = create<ThemeState>((set) => ({ theme: 'light', setTheme: (theme) => set({ theme }), })) ``` ### **React Hook Form 7.46.2** + वैलिडेशन - **फॉर्म लाइब्रेरी**: परफॉर्मेंट, अनकंट्रोल्ड फॉर्म्स - **वैलिडेशन**: `@ hookform/resolvers` ^3.3.1 + `zod` ^3.22.2 - **इंटीग्रेशन**: Radix UI फॉर्म कंपोनेंट्स के साथ सहजता से काम करता है ```typescript // सर्वोत्तम अभ्यास फॉर्म सेटअप: const formSchema = z.object({ email: z.string().email(), name: z.string().min(2), }) function ContactForm() { const form = useForm<z.infer<typeof formSchema>>({ resolver: zodResolver(formSchema), }) return <form onSubmit={form.handleSubmit(onSubmit)}>...</form> } ``` ### **Zod 3.22.2** (स्कीमा वैलिडेशन) - **उपयोग**: फॉर्म वैलिडेशन, API रिस्पॉन्स वैलिडेशन, टाइप जनरेशन - **सर्वोत्तम अभ्यास**: उपयोग के करीब स्कीमा परिभाषित करें, टाइप इन्फ्रेंस का लाभ उठाएं ## कंटेंट मैनेजमेंट सिस्टम ### **कस्टम Contentlayer इम्प्लीमेंटेशन** ```json { "@ shipixen/next-contentlayer-module": "1.0.2", "shipixen-contentlayer": "1.0.2", "@ shipixen/pliny": "1.0.13" } ``` **सुविधाएँ**: - टाइप-सेफ MDX प्रोसेसिंग - फ्रंटमैटर पार्सिंग - ऑटोमेटेड कंटेंट इम्पोर्ट्स - RSS फीड जनरेशन ### **MDX प्रोसेसिंग पाइपलाइन** **Remark प्लगइन्स** (मार्कडाउन प्रोसेसिंग): - `remark-gfm` ^3.0.1: GitHub फ्लेवर्ड मार्कडाउन - `remark-math` ^5.1.1: गणितीय एक्सप्रेशन **Rehype प्लगइन्स** (HTML प्रोसेसिंग): - `rehype-slug` ^5.1.0: हेडिंग आईडी ऑटो-जनरेट करें - `rehype-autolink-headings` ^6.1.0: हेडिंग्स को ऑटो-लिंक करें - `rehype-prism-plus` ^1.6.1: सिंटैक्स हाइलाइटिंग - `rehype-katex` ^6.0.3: गणित रेंडरिंग **सर्वोत्तम अभ्यास**: - कंटेंट को रनटाइम पर नहीं, बिल्ड टाइम पर प्रोसेस करें - स्थिर बिल्ड्स के लिए लगातार प्लगइन वर्जन का उपयोग करें - जनरेटेड टाइप्स के साथ टाइप-सेफ कंटेंट क्वेरीज़ ## डेवलपमेंट एक्सपीरियंस ### **कोड क्वालिटी टूल्स** ```json { "eslint": "^8.45.0", "@ typescript-eslint/eslint-plugin": "^6.1.0", "@ typescript-eslint/parser": "^6.1.0", "eslint-config-next": "^14.2.24", "eslint-config-prettier": "^8.8.0", "prettier": "^3.0.0", "prettier-plugin-tailwindcss": "^0.4.1" } ``` **Git वर्कफ़्लो**: - **Husky 8.0.0**: Git हुक्स ऑटोमेशन - **lint-staged 13.0.0**: प्री-कमिट लिंटिंग और फॉर्मेटिंग ### **इंटरैक्टिव डेवलपमेंट टूल्स** - **Monaco Editor 0.45.0**: कंपोनेंट प्लेग्राउंड के लिए इन-ब्राउज़र कोड एडिटिंग - **कमांड पैलेट**: `cmdk` ^0.2.0 ग्लोबल सर्च और नेविगेशन के लिए - **बंडल एनालाइज़र**: `@ next/bundle-analyzer` परफॉर्मेंस मॉनिटरिंग के लिए ## CLI टूलिंग (@ page-ui/wizard) ### **पैकेज कॉन्फ़िगरेशन** ```json { "name": "@ page-ui/wizard", "type": "module", "bin": "./packages/cli/index.mjs", "engines": { "node": ">=14.17.0" } } ``` ### **CLI डिपेंडेंसीज़** ```json { "chalk": "^5.3.0", // टर्मिनल कलर्स और स्टाइलिंग "commander": "^12.0.0", // कमांड-लाइन इंटरफेस फ्रेमवर्क "enquirer": "^2.4.1", // इंटरैक्टिव CLI प्रॉम्प्ट्स "ora": "^8.0.1" // CLI के लिए लोडिंग स्पिनर्स } ``` **सर्वोत्तम अभ्यास**: - ESM मॉड्यूल्स (`.mjs` एक्सटेंशन) का उपयोग करें - enquirer के साथ इंटरैक्टिव प्रॉम्प्ट्स प्रदान करें - ora स्पिनर्स के साथ प्रोग्रेस दिखाएं - chalk के साथ लगातार टर्मिनल स्टाइलिंग ## एनालिटिक्स और एक्सटर्नल सर्विसेज़ ### **Vercel इकोसिस्टम** - **एनालिटिक्स**: `@ vercel/analytics` ^1.1.1 - **OG इमेजेस**: `@ vercel/og` ^0.5.20 - **सर्वोत्तम अभ्यास**: इष्टतम परफॉर्मेंस के लिए Vercel के नेटिव टूलिंग का उपयोग करें ### **प्रोडक्ट एनालिटिक्स** - **PostHog 1.130.1**: फीचर फ्लैग्स, यूज़र ट्रैकिंग, A/B टेस्टिंग - **सर्वोत्तम अभ्यास**: उचित कंसेंट मैनेजमेंट के साथ प्राइवेसी-कंप्लाइंट सेटअप ### **HTTP क्लाइंट** - **Axios 1.7.7**: API कॉल्स, न्यूज़लेटर सब्सक्रिप्शन - **सर्वोत्तम अभ्यास**: बेस कॉन्फ़िगरेशन के साथ axios इंस्टेंस बनाएं ## यूटिलिटी लाइब्रेरीज़ ### **डेट और टाइम** - **date-fns 2.30.0**: मॉड्यूलर डेट यूटिलिटी लाइब्रेरी - **सर्वोत्तम अभ्यास**: ट्री-शेकिंग के लिए केवल आवश्यक फंक्शन इम्पोर्ट करें ```typescript // अच्छा: ट्री-शेकेबल इम्पोर्ट्स import { format, parseISO } from 'date-fns' // बुरा: पूरी लाइब्रेरी इम्पोर्ट import * as dateFns from 'date-fns' ``` ### **स्टाइलिंग और UI यूटिलिटीज़** - **clsx 2.0.0**: कंडीशनल className यूटिलिटी - **class-variance-authority 0.7.0**: टाइप-सेफ कंपोनेंट वेरिएंट्स - **chroma-js 2.4.2**: कलर मैनिपुलेशन और थीम जनरेशन ### **डेटा प्रेजेंटेशन** - **@tanstack/react-table 8.10.7**: पावरफुल टेबल कंपोनेंट - **lucide-react 0.400.0**: आइकन लाइब्रेरी - **sonner 1.3.1**: टोस्ट नोटिफिकेशन