# India First Localization > Hindi/regional language support, low-bandwidth optimization, UPI payment flows, regional content patterns, and Tier 2/3 city user behavior for the Indian market. - Skill: `mayurrathi/india-first-localization` (Agent Skill) - Install (CLI): `npx skillmds@latest add mayurrathi/india-first-localization` - Raw SKILL.md: https://api.skillmd.com/api/skills/mayurrathi/india-first-localization/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: mayurrathi (https://skillmd.com/u/mayurrathi) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/mayurrathi/india-first-localization --- # 2.2.4 India First Localization This skill defines the technical and UX standards for building applications optimized for the Indian market — the world's largest smartphone user base with unique connectivity, language, payment, and cultural considerations. ## 1. Multi-Language Architecture **Goal:** Full Hindi and regional language support without code duplication. * **i18n File Structure:** Create locale JSON files per language: `locales/en.json`, `locales/hi.json`, `locales/mr.json`, etc. Keys are semantic identifiers (`"game.start"`, `"nav.home"`), values are translated strings. * **Runtime Switching:** Implement language toggling via UI buttons (not a buried settings menu). Store the preference in `localStorage` as `lang`. Apply immediately without page reload by re-rendering string-dependent components. * **Font Support:** Load Noto Sans Devanagari (or equivalent) for Hindi/Marathi/Sanskrit scripts. Use `unicode-range` in `@font-face` to avoid loading Devanagari glyphs for English-only users. * **Text Expansion:** Hindi text is typically 20–40% longer than English equivalents. Design UI with flexible containers. Never use fixed-width text elements. Test all layouts in Hindi before shipping. * **Pluralization & Gender:** Hindi has different plural forms and gendered nouns. Use ICU MessageFormat or a library like `intl-messageformat` for proper pluralization and gender agreement. ## 2. Low-Bandwidth & Offline Optimization **Goal:** Full functionality on 2G/3G connections and in spotty coverage areas. * **Bundle Size Budget:** Target < 200KB initial JS bundle (gzipped). Use code-splitting with dynamic `import()` for non-critical features. Lazy-load images and heavy components. * **Image Strategy:** Use WebP format with aggressive compression (quality 60–70). Serve responsive images via `srcset` with appropriate sizes for mobile screens (rarely > 400px width). Implement blur-up placeholders. * **API Responses:** Minimize JSON payload sizes. Use field masks / selection (Firestore's `select()`) to fetch only required fields. Paginate all list endpoints. * **Offline Core:** The app's primary utility must work fully offline (Skill 05). Cache critical data in IndexedDB on first load. Show meaningful content even with no network. * **Network Detection:** Use `navigator.connection.effectiveType` to detect `2g`/`3g` and adapt: disable auto-play media, reduce image quality, defer non-essential network requests. ## 3. UPI & Indian Payment Flows **Goal:** Support India's dominant payment infrastructure. * **UPI Deep Links:** For simple payments, generate UPI intent URLs: `upi://pay?pa=&pn=&am=&cu=INR&tn=`. Open via `window.location.href` or an `` tag on mobile. * **QR Code Generation:** Use a client-side library (e.g., `qrcode.js`) to render UPI payment QR codes dynamically. Encode the same UPI URL into the QR payload. * **Payment Verification:** UPI payments are asynchronous. Implement a server-side webhook or polling mechanism to verify payment status via the payment gateway's API. Never trust client-side payment confirmation. * **Razorpay/Cashfree Integration:** For subscription or recurring payments, integrate with a local payment gateway. Both support UPI, cards, wallets, and net banking with battle-tested SDKs. * **₹ Formatting:** Always display currency in Indian format: `₹1,00,000` (lakh grouping), not `₹100,000`. Use `Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' })`. ## 4. Regional Content Patterns **Goal:** Design content and interactions that resonate with Indian users. * **Visual Language:** Use culturally relevant iconography and illustrations. Avoid Western-centric metaphors (mailbox for email, etc.). Prefer universally understood symbols or India-specific visuals. * **Festivals & Seasons:** Implement seasonal theming (Diwali, Holi, Navratri, Eid) with dynamic CSS theme overrides. Schedule theme changes via date-based logic. This drives engagement and sharing. * **Local Units:** Support local measurement units where relevant (bigha, guntha for land; quintal for weight). Provide conversion between local and metric. * **WhatsApp as Primary Share Channel:** In India, WhatsApp is the dominant sharing platform. Prioritize WhatsApp share buttons. Format shared content for WhatsApp's text+image preview (message + URL with OG tags). * **Voice & Vernacular Input:** Consider voice input support for Hindi and regional languages using Web Speech API. Many Tier 2/3 users prefer voice over typing. ## 5. Tier 2/3 City User Behavior **Goal:** Design for the next billion users, not Silicon Valley power users. * **Affordability Sensitivity:** Price points must be India-appropriate. ₹49–99/month is the sweet spot for subscriptions. Offer weekly plans. Free tiers must be generous. * **Storage Constraints:** Users frequently clear app data to free space. Persist critical user data in the cloud (not just locally). Implement seamless data restoration on re-install via anonymous auth → account linking. * **Screen Size:** Design for 5"–6.5" screens. Touch targets minimum 48px. Avoid dense information layouts. Use bottom navigation (reachable with one thumb). * **Digital Literacy:** Don't assume familiarity with common UI patterns (hamburger menus, swipe gestures). Use explicit labels, onboarding tooltips, and visual cues. Prefer button-based language selection over dropdown menus. * **Data Saver Mode:** Detect Android's Data Saver mode via `navigator.connection.saveData`. Automatically reduce data usage: lower image quality, disable prefetching, pause background sync.