@adlas/create-app 1.0.50 → 1.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adlas/create-app",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "description": "Adlas project initializer with Figma and Swagger integration",
   "type": "module",
   "main": "./dist/cli.js",

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -11,25 +11,19 @@ This document provides comprehensive guidelines for converting Figma designs to
 **❌ NEVER use screenshots** - Screenshots lose design data, measurements, and context
 
 **✅ ALWAYS use Figma MCP server with node links**:
-
 ```typescript
 // Use get_design_context tool with node-id from Figma URL
 // Example URL: https://figma.com/design/:fileKey/:fileName?node-id=8486-1580
 // Extract node-id: 8486-1580 → use as: "8486:1580"
 
-mcp__figma -
-  dev -
-  mode -
-  mcp -
-  server__get_design_context({
-    nodeId: "8486:1580",
-    clientLanguages: "typescript",
-    clientFrameworks: "react,nextjs",
-  });
+mcp__figma-dev-mode-mcp-server__get_design_context({
+  nodeId: "8486:1580",
+  clientLanguages: "typescript",
+  clientFrameworks: "react,nextjs"
+})
 ```
 
 **Benefits of using Figma MCP**:
-
 - ✅ Get exact measurements, colors, and spacing
 - ✅ Access design tokens and styles
 - ✅ See component structure and hierarchy
@@ -59,7 +53,6 @@ mcp__figma -
 ### CRITICAL: Component Styles Must Be Configured, Not Inline
 
 **❌ WRONG - Inline component styles**:
-
 ```tsx
 // DON'T: Apply component-specific styles inline via className
 <Button className="h-10 rounded-full bg-[#19ffa3] px-4 text-sm text-black">
@@ -76,7 +69,6 @@ mcp__figma -
 ```
 
 **✅ CORRECT - Use props and configured variants**:
-
 ```tsx
 // Step 1: Configure variants in component wrapper
 // File: src/components/ui/Button.tsx
@@ -121,7 +113,6 @@ import { Button } from '@/components/ui';
 ```
 
 **Component Style Rules**:
-
 - ✅ **Configure in wrapper**: All component-specific styles (height, padding, colors, text size)
 - ✅ **Set defaultVariants**: Define defaults in wrapper so you don't repeat them in usage
 - ✅ **Use theme colors**: `bg-primary`, `bg-secondary`, `bg-success`, `bg-danger`, `bg-warning` from hero.ts
@@ -134,7 +125,6 @@ import { Button } from '@/components/ui';
 - ❌ **NEVER repeat defaultVariants**: Don't specify `size="md"` if `md` is already the default
 
 **Color Usage Rules**:
-
 ```tsx
 // ✅ CORRECT - Use theme colors from hero.ts or globals.css
 color: {
@@ -156,7 +146,6 @@ secondary, success, danger, warning, default, foreground, background
 ```
 
 **What goes where**:
-
 ```tsx
 // In Button.tsx configuration:
 const Button = extendVariants(HerouiButton, {
@@ -200,7 +189,6 @@ import { Icon } from '@/components/ui';
 ### Data Must Be Mapped from Constants
 
 **❌ WRONG - Hardcoded data**:
-
 ```tsx
 <DropdownMenu>
   <DropdownItem key="option1">Option 1</DropdownItem>
@@ -210,17 +198,16 @@ import { Icon } from '@/components/ui';
 ```
 
 **✅ CORRECT - Map from constants**:
-
 ```tsx
 // File: src/config/menuOptions.ts
 export const productMenuItems = [
-  { key: "analytics", labelKey: "product.analytics", href: "/analytics" },
-  { key: "insights", labelKey: "product.insights", href: "/insights" },
-  { key: "reports", labelKey: "product.reports", href: "/reports" },
+  { key: 'analytics', labelKey: 'product.analytics', href: '/analytics' },
+  { key: 'insights', labelKey: 'product.insights', href: '/insights' },
+  { key: 'reports', labelKey: 'product.reports', href: '/reports' },
 ];
 
 // Usage:
-import { productMenuItems } from "@/config/menuOptions";
+import { productMenuItems } from '@/config/menuOptions';
 
 <DropdownMenu>
   {productMenuItems.map((item) => (
@@ -228,7 +215,7 @@ import { productMenuItems } from "@/config/menuOptions";
       {t(item.labelKey)}
     </DropdownItem>
   ))}
-</DropdownMenu>;
+</DropdownMenu>
 ```
 
 ---
@@ -236,14 +223,11 @@ import { productMenuItems } from "@/config/menuOptions";
 ## 🎨 Component Priority & Usage Strategy
 
 ### 1. Check HeroUI First
-
 Before creating ANY component, check if HeroUI provides it:
-
 - **HeroUI Documentation**: https://heroui.com/docs/components
 - **HeroUI Figma Kit**: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-
 
 ### 2. Component Selection Flow
-
 ```
 1. Does HeroUI have this component?
    → YES: Use HeroUI component (via @/components/ui wrapper if exists)
@@ -259,7 +243,6 @@ Before creating ANY component, check if HeroUI provides it:
 ```
 
 ### 3. Example Decision Tree
-
 ```tsx
 // Need a Button?
 import { Button } from '@/components/ui';  // ✅ Use HeroUI Button wrapper
@@ -278,12 +261,10 @@ import { Input } from '@/components/ui';   // ✅ Use HeroUI Input wrapper
 ## 📁 Project Structure
 
 ### Pages Location
-
 - **With i18n**: `src/app/[locale]/(route-group)/page.tsx`
 - **Without i18n**: `src/app/(route-group)/page.tsx`
 
 ### Components Location
-
 ```
 src/components/
 ├── ui/              # Reusable UI components (HeroUI wrappers)
@@ -293,7 +274,6 @@ src/components/
 ```
 
 ### Styling
-
 - **Global styles**: `src/styles/globals.css`
 - **Theme config**: `src/styles/hero.ts`
 - **Approach**: Tailwind CSS utility classes ONLY
@@ -306,7 +286,6 @@ src/components/
 ### Navigation Components
 
 #### Navbar (HeroUI)
-
 **CRITICAL**: Always use HeroUI Navbar component for navigation bars:
 
 ```tsx
@@ -318,8 +297,8 @@ import {
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
-} from "@heroui/react";
-import { Button } from "@/components/ui";
+} from '@heroui/react';
+import { Button } from '@/components/ui';
 
 <Navbar maxWidth="full" className="bg-black border-b-2">
   {/* Logo */}
@@ -330,16 +309,14 @@ import { Button } from "@/components/ui";
   {/* Desktop Menu */}
   <NavbarContent className="hidden lg:flex" justify="center">
     <NavbarItem>
-      <Button variant="light">Menu Item</Button>{" "}
-      {/* size="md" omitted - it's default */}
+      <Button variant="light">Menu Item</Button>  {/* size="md" omitted - it's default */}
     </NavbarItem>
   </NavbarContent>
 
   {/* CTA */}
   <NavbarContent className="hidden lg:flex" justify="end">
     <NavbarItem>
-      <Button color="primary">CTA</Button>{" "}
-      {/* size="md" omitted - it's default */}
+      <Button color="primary">CTA</Button>  {/* size="md" omitted - it's default */}
     </NavbarItem>
   </NavbarContent>
 
@@ -349,16 +326,13 @@ import { Button } from "@/components/ui";
   {/* Mobile Menu */}
   <NavbarMenu>
     <NavbarMenuItem>
-      <Button variant="light" fullWidth>
-        Menu Item
-      </Button>
+      <Button variant="light" fullWidth>Menu Item</Button>
     </NavbarMenuItem>
   </NavbarMenu>
-</Navbar>;
+</Navbar>
 ```
 
 **Key Points**:
-
 - ✅ Use `Navbar` from `@heroui/react`
 - ✅ Use `Button` from `@/components/ui` for menu items
 - ✅ Use props (`color`, `size`, `variant`) NOT className for styles
@@ -366,11 +340,9 @@ import { Button } from "@/components/ui";
 - ❌ DON'T use custom `<header>` or `<nav>` tags
 
 ### Form Components
-
 All located in `src/components/ui/`:
 
 #### Input Fields
-
 ```tsx
 import { Input, PasswordInput, NumberInput, Textarea } from '@/components/ui';
 
@@ -406,7 +378,6 @@ import { Input, PasswordInput, NumberInput, Textarea } from '@/components/ui';
 ```
 
 #### Selection Components
-
 ```tsx
 import { Select, RadioGroup, Checkbox, Autocomplete } from '@/components/ui';
 
@@ -439,18 +410,16 @@ import { Select, RadioGroup, Checkbox, Autocomplete } from '@/components/ui';
 ```
 
 #### Date & Time
-
 ```tsx
-import { DatePicker } from "@/components/ui";
+import { DatePicker } from '@/components/ui';
 
 <DatePicker
   label="Select Date"
   placeholderValue={new CalendarDate(2024, 1, 1)}
-/>;
+/>
 ```
 
 #### Buttons
-
 ```tsx
 import { Button } from '@/components/ui';
 
@@ -468,7 +437,6 @@ import { Button } from '@/components/ui';
 ```
 
 #### Other Components
-
 ```tsx
 import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
 
@@ -508,27 +476,23 @@ import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
 **CRITICAL WORKFLOW**: Icons must follow this exact process:
 
 #### Step 1: Export SVG from Figma
-
 1. Select the icon in Figma design
 2. Export as SVG (not PNG/JPG)
 3. Download the SVG file
 
 #### Step 2: Place in Icons Folder
-
 ```bash
 # Place SVG file in src/assets/icons/
 mv downloaded-icon.svg src/assets/icons/icon-name.svg
 ```
 
 #### Step 3: Generate React Components
-
 ```bash
 # Run the icon generation script
 pnpm generate-icons
 ```
 
 This command will:
-
 - Convert all SVG files in `src/assets/icons/` to React components
 - Place them in `src/components/icons/`
 - Auto-format and lint the generated code
@@ -548,7 +512,6 @@ import { Icon } from '@/components/ui';
 ```
 
 **❌ WRONG USAGE - DO NOT import individual icon components**:
-
 ```tsx
 // ❌ WRONG - Don't import and use individual icon components
 import { ChevronDownIcon, CloseIcon } from '@/components/icons';
@@ -557,7 +520,6 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 ```
 
 **Available Icons** (auto-generated):
-
 - ChevronDownIcon, ChevronRightIcon
 - CloseIcon, MenuIcon
 - EyeIcon, EyeSlashIcon
@@ -567,13 +529,11 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 - And more...
 
 **Icon Names**:
-
 - Icon names are PascalCase with "Icon" suffix (e.g., `ChevronDownIcon`)
 - Generated from SVG filename: `chevron-down.svg` → component `ChevronDownIcon`
 - The Icon component uses the exact component name from `@/components/icons`
 
 **❌ DO NOT**:
-
 - Import individual icon components directly
 - Use kebab-case names (use `ChevronDownIcon` not `chevron-down`)
 - Use Lucide, Font Awesome, or other icon libraries
@@ -582,7 +542,6 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 - Hardcode SVG paths directly in components
 
 **✅ DO**:
-
 - Always use `<Icon name="IconName" />` pattern with PascalCase
 - Always export from Figma as SVG
 - Use `pnpm generate-icons` to create components
@@ -595,7 +554,6 @@ import { ChevronDownIcon, CloseIcon } from '@/components/icons';
 #### Step 1: Check Existing Images First
 
 **BEFORE implementing or exporting from Figma**:
-
 1. Check `public/images/index.ts` to see if the image/logo already exists
 2. Check `public/images/logos/` directory for available logo files
 3. Only export from Figma if the asset doesn't exist
@@ -607,19 +565,16 @@ ls public/images/logos/
 ```
 
 **Why this matters**:
-
 - Avoid duplicate assets
 - User may have already exported the assets
 - Maintain consistency with existing naming conventions
 
 #### Step 2: Export from Figma (if needed)
-
 1. **For logos**: Export as SVG (preferred) or PNG if source is raster
 2. **For images**: Export as PNG, JPG, or WebP based on image type
 3. Use appropriate resolution (2x or 3x for retina displays)
 
 #### Step 3: Place in Public Folder
-
 ```bash
 # Place logo/image files in public/
 public/
@@ -645,36 +600,36 @@ public/
  */
 
 const LOGOS = {
-  PRIMARY_CIRCLE: "/images/logos/logo-circle-primary.svg",
-  SECONDARY_CIRCLE: "/images/logos/logo-circle-secondary.svg",
-  FULL: "/images/logos/logo-full.svg",
-  FULL_BLACK: "/images/logos/logo-full-black.svg",
-  FULL_WHITE: "/images/logos/logo-full-white.svg",
-  ICON: "/images/logos/logo-icon.svg",
+  PRIMARY_CIRCLE: '/images/logos/logo-circle-primary.svg',
+  SECONDARY_CIRCLE: '/images/logos/logo-circle-secondary.svg',
+  FULL: '/images/logos/logo-full.svg',
+  FULL_BLACK: '/images/logos/logo-full-black.svg',
+  FULL_WHITE: '/images/logos/logo-full-white.svg',
+  ICON: '/images/logos/logo-icon.svg',
 } as const;
 
 const AUTH = {
-  LOGIN_BG: "/images/auth/login-background.jpg",
-  SIGNUP_BG: "/images/auth/signup-background.jpg",
-  RESET_PASSWORD: "/images/auth/reset-password.jpg",
+  LOGIN_BG: '/images/auth/login-background.jpg',
+  SIGNUP_BG: '/images/auth/signup-background.jpg',
+  RESET_PASSWORD: '/images/auth/reset-password.jpg',
 } as const;
 
 const WEBSITE = {
-  HOME_HERO: "/images/website/home-hero.webp",
-  HOME_NEWSLETTER: "/images/website/home-newsletter.webp",
-  ABOUT_HEADER: "/images/website/about-header.jpg",
-  CONTACT_MAP: "/images/website/contact-map.png",
+  HOME_HERO: '/images/website/home-hero.webp',
+  HOME_NEWSLETTER: '/images/website/home-newsletter.webp',
+  ABOUT_HEADER: '/images/website/about-header.jpg',
+  CONTACT_MAP: '/images/website/contact-map.png',
 } as const;
 
 const SERVICES = {
-  HEADER: "/images/services/services-header.webp",
-  FEATURE_1: "/images/services/feature-1.jpg",
-  FEATURE_2: "/images/services/feature-2.jpg",
+  HEADER: '/images/services/services-header.webp',
+  FEATURE_1: '/images/services/feature-1.jpg',
+  FEATURE_2: '/images/services/feature-2.jpg',
 } as const;
 
 const PRODUCTS = {
-  THUMBNAIL_DEFAULT: "/images/products/thumbnail-default.png",
-  HERO: "/images/products/hero-banner.jpg",
+  THUMBNAIL_DEFAULT: '/images/products/thumbnail-default.png',
+  HERO: '/images/products/hero-banner.jpg',
 } as const;
 
 export const IMAGES = {
@@ -718,14 +673,12 @@ import Image from 'next/image';
 ```
 
 **Preference Order**:
-
 1. ✅ **SVG** - Best for logos, icons, and vector graphics (scalable, small file size)
 2. ✅ **WebP** - Modern format for photos (smaller than PNG/JPG)
 3. ✅ **PNG** - For images requiring transparency
 4. ✅ **JPG** - For photos without transparency
 
 **❌ DO NOT**:
-
 - Put images in `src/` folder
 - Import images as modules unless necessary
 - Use base64 encoded images inline
@@ -733,7 +686,6 @@ import Image from 'next/image';
 - Hardcode image paths directly in components (use centralized constants)
 
 **✅ DO**:
-
 - Always place in `public/` directory
 - Create centralized image constants file (src/config/images.ts)
 - Organize image paths by category (LOGOS, AUTH, WEBSITE, SERVICES)
@@ -750,30 +702,27 @@ import Image from 'next/image';
 ### CRITICAL: Use Theme Colors, NOT Custom Values
 
 **Colors are defined in two places**:
-
 1. **`src/styles/hero.ts`** - HeroUI theme colors (primary, secondary, etc.)
 2. **`src/styles/globals.css`** - Additional custom theme colors
 
 ### Available Theme Colors
 
 #### From hero.ts (Primary Color Palette):
-
 ```typescript
 // Primary green shades (defined in hero.ts)
-primary - 50; // #E6FFF0  (lightest)
-primary - 100; // #CBFFE0
-primary - 200; // #AEFFD1
-primary - 300; // #8EFFC2
-primary - 400; // #66FFB2
-primary - 500; // #19FFA3  (default primary)
-primary - 600; // #25C780
-primary - 700; // #26915F
-primary - 800; // #215F40
-primary - 900; // #173123  (darkest)
+primary-50   // #E6FFF0  (lightest)
+primary-100  // #CBFFE0
+primary-200  // #AEFFD1
+primary-300  // #8EFFC2
+primary-400  // #66FFB2
+primary-500  // #19FFA3  (default primary)
+primary-600  // #25C780
+primary-700  // #26915F
+primary-800  // #215F40
+primary-900  // #173123  (darkest)
 ```
 
 #### HeroUI Default Colors:
-
 ```tsx
 // Semantic colors (built into HeroUI)
 bg-primary      text-primary      border-primary
@@ -789,7 +738,6 @@ bg-background   text-background   border-background
 ### Color Usage Examples
 
 **✅ CORRECT - Use theme colors**:
-
 ```tsx
 // In component configuration (NO hover states)
 color: {
@@ -803,7 +751,6 @@ className="bg-primary-50 text-primary-900"
 ```
 
 **❌ WRONG - Custom color values or hover states**:
-
 ```tsx
 // DON'T use hex values or hover states in config
 color: {
@@ -823,13 +770,11 @@ color: {
 ### When to Add Custom Colors
 
 **Only add custom colors to hero.ts if**:
-
 1. Color is NOT in the existing palette
 2. Color is used in multiple places (reusable)
 3. Color is part of the design system
 
 **Steps to add custom color**:
-
 ```typescript
 // 1. Add to hero.ts theme
 export default heroui({
@@ -838,9 +783,9 @@ export default heroui({
       colors: {
         // Add new color palette
         accent: {
-          50: "#...",
-          500: "#...",
-          900: "#...",
+          50: '#...',
+          500: '#...',
+          900: '#...',
         },
       },
     },
@@ -848,7 +793,7 @@ export default heroui({
 });
 
 // 2. Use in components
-className = "bg-accent text-accent-900";
+className="bg-accent text-accent-900"
 ```
 
 ---
@@ -860,23 +805,21 @@ className = "bg-accent text-accent-900";
 **CRITICAL**: Always use closest standard Tailwind class instead of custom arbitrary values
 
 **Common Conversions**:
-
 ```tsx
 // ❌ WRONG - Custom arbitrary values
-className = "h-[41px] w-[54.6px]";
-className = "p-[24px]";
-className = "text-[14px]";
-className = "gap-[11px]";
+className="h-[41px] w-[54.6px]"
+className="p-[24px]"
+className="text-[14px]"
+className="gap-[11px]"
 
 // ✅ CORRECT - Standard Tailwind classes
-className = "h-10 w-14"; // h-10 = 40px, w-14 = 56px (closest to 54.6px)
-className = "p-6"; // p-6 = 24px
-className = "text-sm"; // text-sm = 14px
-className = "gap-3"; // gap-3 = 12px (closest to 11px)
+className="h-10 w-14"        // h-10 = 40px, w-14 = 56px (closest to 54.6px)
+className="p-6"              // p-6 = 24px
+className="text-sm"          // text-sm = 14px
+className="gap-3"            // gap-3 = 12px (closest to 11px)
 ```
 
 **Tailwind Size Reference**:
-
 ```css
 /* Spacing Scale (padding, margin, gap, etc.) */
 0.5 = 2px    4  = 16px    12 = 48px
@@ -900,13 +843,11 @@ auto, full, screen, fit, min, max
 ```
 
 **Only use arbitrary values when**:
-
 - Exact pixel value is required by design system
 - No standard Tailwind class is close enough
 - Using design tokens/CSS variables: `bg-[var(--custom-color)]`
 
 **Examples**:
-
 ```tsx
 // ✅ Good - Using standard classes
 <div className="h-10 w-full p-6 text-sm">
@@ -916,7 +857,6 @@ auto, full, screen, fit, min, max
 ```
 
 ### Responsive Breakpoints (Mobile-First)
-
 ```css
 /* Mobile */
 4xs: 320px   /* iPhone SE */
@@ -937,7 +877,6 @@ xl:  1280px  /* MacBook Air */
 ```
 
 ### Usage Example
-
 ```tsx
 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
   {/* Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns */}
@@ -945,9 +884,7 @@ xl:  1280px  /* MacBook Air */
 ```
 
 ### HeroUI Color System
-
 Use these semantic colors from HeroUI theme:
-
 - `bg-background` - Main background
 - `bg-foreground` - Text color background
 - `bg-default` / `bg-default-50` to `bg-default-900` - Gray scale
@@ -958,7 +895,6 @@ Use these semantic colors from HeroUI theme:
 - `bg-danger` - Error/danger states
 
 ### Common Patterns
-
 ```tsx
 // Card
 <div className="rounded-lg bg-white p-6 shadow-md">
@@ -982,20 +918,19 @@ Use these semantic colors from HeroUI theme:
 ## 📝 Form Implementation with Zod
 
 ### Pattern to Follow
-
 ```tsx
-"use client";
+'use client';
 
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
-import { Button, Input } from "@/components/ui";
+import { Button, Input } from '@/components/ui';
 
 // 1. Define schema
 const schema = z.object({
-  email: z.string().email("Invalid email"),
-  password: z.string().min(8, "Password must be at least 8 characters"),
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
 });
 
 type FormData = z.infer<typeof schema>;
@@ -1022,7 +957,7 @@ export default function LoginForm() {
       <Input
         label="Email"
         type="email"
-        {...register("email")}
+        {...register('email')}
         errorMessage={errors.email?.message}
         isInvalid={!!errors.email}
       />
@@ -1030,7 +965,7 @@ export default function LoginForm() {
       <Input
         label="Password"
         type="password"
-        {...register("password")}
+        {...register('password')}
         errorMessage={errors.password?.message}
         isInvalid={!!errors.password}
       />
@@ -1052,20 +987,18 @@ export default function LoginForm() {
 ### Navigation with i18n
 
 **Import Guidelines**:
-
 ```tsx
 // For Link component - use Next.js Link
-import Link from "next/link";
+import Link from 'next/link';
 
 // For navigation hooks - use next/navigation
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter } from 'next/navigation';
 
 // For navigation URLs - use centralized constants
-import { NAVIGATION_URLS } from "@/config/navigationUrls";
+import { NAVIGATION_URLS } from '@/config/navigationUrls';
 ```
 
 **Navigation Example**:
-
 ```tsx
 import Link from 'next/link';
 import { NAVIGATION_URLS } from '@/config/navigationUrls';
@@ -1082,11 +1015,10 @@ import { Link } from '@heroui/react';
 ```
 
 **Using Navigation Hooks**:
-
 ```tsx
-"use client";
+'use client';
 
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter } from 'next/navigation';
 
 export function MyComponent() {
   const pathname = usePathname();
@@ -1101,9 +1033,8 @@ export function MyComponent() {
 ```
 
 ### Translations for ALL text
-
 ```tsx
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 function MyComponent() {
   const t = useTranslations();
@@ -1111,8 +1042,8 @@ function MyComponent() {
   return (
     <div>
       {/* ✅ CORRECT - Using translation key */}
-      <h1>{t("welcome")}</h1>
-      <p>{t("description")}</p>
+      <h1>{t('welcome')}</h1>
+      <p>{t('description')}</p>
 
       {/* ❌ WRONG - Hardcoded text */}
       <h1>Welcome</h1>
@@ -1122,9 +1053,8 @@ function MyComponent() {
 ```
 
 ### Form labels, placeholders, errors - ALL must use i18n
-
 ```tsx
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 function LoginForm() {
   const t = useTranslations();
@@ -1133,11 +1063,9 @@ function LoginForm() {
     <form>
       {/* ✅ CORRECT */}
       <Input
-        label={t("email")}
-        placeholder={t("enterEmail")}
-        errorMessage={
-          errors.email?.message ? t(errors.email.message) : undefined
-        }
+        label={t('email')}
+        placeholder={t('enterEmail')}
+        errorMessage={errors.email?.message ? t(errors.email.message) : undefined}
       />
 
       {/* ❌ WRONG - Hardcoded text */}
@@ -1152,7 +1080,6 @@ function LoginForm() {
 ```
 
 ### Navigation URLs Reference
-
 ```tsx
 import { NAVIGATION_URLS } from '@/config/navigationUrls';
 
@@ -1177,20 +1104,19 @@ NAVIGATION_URLS.DASHBOARD.INDEX         // '/dashboard'
 ## 🎯 Data Fetching
 
 ### Using React Query
-
 ```tsx
-"use client";
+'use client';
 
-import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
 
-import { QUERY_KEYS } from "@/libs/react-query";
+import { QUERY_KEYS } from '@/libs/react-query';
 
 export default function ProductList() {
   const { data, isLoading, error } = useQuery({
     queryKey: QUERY_KEYS.PRODUCTS.LIST,
     queryFn: async () => {
-      const response = await axios.get("/api/products");
+      const response = await axios.get('/api/products');
       return response.data;
     },
   });
@@ -1213,12 +1139,11 @@ export default function ProductList() {
 ## 📐 Layout Components
 
 ### Using Existing Layouts
-
 ```tsx
 // Auth pages use auth layout automatically
 // Location: src/app/[locale]/(auth)/login/page.tsx
 
-"use client";
+'use client';
 
 export default function LoginPage() {
   return (
@@ -1231,14 +1156,11 @@ export default function LoginPage() {
 ```
 
 ### Navbar & Footer
-
 Already implemented in `src/components/layout/`:
-
 - `Navbar.tsx` - Main navigation using HeroUI Navbar
 - `Footer.tsx` - Footer component
 
 **CRITICAL**: Navbar uses HeroUI Navbar component:
-
 ```tsx
 import { Navbar } from '@/components/layout';
 
@@ -1248,7 +1170,6 @@ import { Navbar } from '@/components/layout';
 ```
 
 **Implementation details** (see `src/components/layout/Navbar.tsx`):
-
 - ✅ Uses HeroUI `Navbar`, `NavbarBrand`, `NavbarContent`, `NavbarItem`
 - ✅ Uses `Button` from `@/components/ui` with props (`color`, `size`, `variant`)
 - ✅ All styles via props, NO className for component styles
@@ -1259,7 +1180,6 @@ import { Navbar } from '@/components/layout';
 ## ⚠️ CRITICAL RULES
 
 ### ❌ DO NOT
-
 1. ❌ **Figma**: Use screenshots to implement design - MUST use Figma MCP server with `get_design_context`
 2. ❌ **Figma**: Call `get_screenshot` tool - Design context provides all needed information
 3. ❌ **Icons**: Import individual icon components (e.g., `import { ChevronDownIcon }`) - MUST use `<Icon name="ChevronDownIcon" />`
@@ -1288,7 +1208,6 @@ import { Navbar } from '@/components/layout';
 26. ❌ **Forms**: Skip form validation (always use Zod schemas)
 
 ### ✅ DO
-
 1. ✅ **Figma**: Use Figma MCP server with `get_design_context` and node-id from Figma URL
 2. ✅ **Figma**: Extract node-id from URL (e.g., `node-id=8486-1580` → `"8486:1580"`)
 3. ✅ **Icons**: Export SVG from Figma → `src/assets/icons/` → Run `pnpm generate-icons`
@@ -1329,7 +1248,6 @@ import { Navbar } from '@/components/layout';
 When converting Figma to code, ensure:
 
 ### Icons & Assets
-
 - [ ] Exported icons as SVG from Figma
 - [ ] Placed SVG files in `src/assets/icons/`
 - [ ] Ran `pnpm generate-icons` to create React components
@@ -1344,7 +1262,6 @@ When converting Figma to code, ensure:
 - [ ] Referenced via `IMAGES.LOGOS.PRIMARY` (not hardcoded paths)
 
 ### Component & Styling
-
 - [ ] Checked HeroUI library first for component availability
 - [ ] Used HeroUI components via `src/components/ui/` wrappers (e.g., `<Button>` not `<button>`)
 - [ ] Configured component styles in wrapper/theme (not inline)
@@ -1355,7 +1272,6 @@ When converting Figma to code, ensure:
 - [ ] Mapped all data from constants (no hardcoded menu items/dropdowns)
 
 ### Content & Navigation
-
 - [ ] ALL text uses i18n translation keys (no hardcoded text)
 - [ ] ALL labels use `t('labelKey')`
 - [ ] ALL placeholders use `t('placeholderKey')`
@@ -1364,21 +1280,18 @@ When converting Figma to code, ensure:
 - [ ] ALL URLs use `NAVIGATION_URLS` from config (no hardcoded URLs)
 
 ### Structure & Types
-
 - [ ] Page created in correct location (`src/app/[locale]/...`)
 - [ ] Added TypeScript types for all data structures
 - [ ] Used `'use client'` for interactive components
 - [ ] No `any` types used
 
 ### Forms & Validation
-
 - [ ] Implemented forms with Zod validation schemas
 - [ ] Form labels use i18n
 - [ ] Form placeholders use i18n
 - [ ] Form errors use i18n
 
 ### Responsive & States
-
 - [ ] Implemented responsive design (mobile-first)
 - [ ] Added proper loading states
 - [ ] Added proper error states
@@ -1391,14 +1304,12 @@ When converting Figma to code, ensure:
 Before finalizing code, verify:
 
 ### Icons & Assets
-
 1. **Icons workflow** - All icons created via `pnpm generate-icons` (not manual)
 2. **Icons source** - SVG files exist in `src/assets/icons/`
 3. **Logos location** - All logos/images in `public/` directory (not `src/`)
 4. **Image format** - SVG used for logos when possible (not PNG)
 
 ### Components & Styling
-
 1. **HeroUI components first** - Verify HeroUI library was checked before custom implementation
 2. **No direct HeroUI imports** - Only through `@/components/ui`
 3. **Component reuse** - Don't duplicate existing components
@@ -1408,20 +1319,17 @@ Before finalizing code, verify:
 7. **Map from constants** - All menu items, dropdown options mapped from config files
 
 ### i18n & Navigation
-
 5. **Zero hardcoded text** - ALL text uses `t('key')`
 6. **Zero hardcoded URLs** - ALL links use `NAVIGATION_URLS`
 7. **Form fields i18n** - Labels, placeholders, errors all use translation keys
 
 ### Styling & Layout
-
 8. **Tailwind only** - No CSS modules, no styled-components
 9. **HeroUI theme colors** - Use semantic colors, not arbitrary values
 10. **Consistent spacing** - Use `space-y-*` and `space-x-*` utilities
 11. **Mobile-first** - Base styles for mobile, then `md:`, `lg:`, etc.
 
 ### TypeScript & Validation
-
 12. **Proper TypeScript** - No `any`, all props typed
 13. **Form validation** - Zod schemas for all forms
 
@@ -1430,7 +1338,6 @@ Before finalizing code, verify:
 ## 📚 Reference Files
 
 When in doubt, check these example files:
-
 - **Form example**: `src/components/ui/form/Form.tsx`
 - **Page example**: `src/app/[locale]/(auth)/login/page.tsx`
 - **Component example**: `src/components/ui/Input.tsx`
@@ -1442,7 +1349,6 @@ When in doubt, check these example files:
 ## 🚀 Quick Reference Guide
 
 ### Icons Workflow
-
 ```bash
 # 1. Export SVG from Figma
 # 2. Place in folder
@@ -1457,7 +1363,6 @@ import { IconIcon } from '@/components/icons';
 ```
 
 ### Logos/Images Workflow
-
 ```bash
 # 1. Export SVG/PNG from Figma
 # 2. Place in public with organized folders
@@ -1487,7 +1392,6 @@ import { IMAGES } from '@/config/images';
 ```
 
 ### Tailwind Standard Classes
-
 ```tsx
 // Heights/Widths
 h-10 = 40px    w-14 = 56px    size-5 = 20px
@@ -1507,7 +1411,6 @@ text-lg = 18px    text-3xl = 30px
 ```
 
 ### Common Patterns
-
 ```tsx
 // Icons (auto-generated)
 import { MenuIcon, CloseIcon } from '@/components/icons';