@adlas/create-app 1.0.47 → 1.0.48

package/package.json

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

package/templates/boilerplate/styles/hero.ts

@@ -1,5 +1,24 @@
 // hero.ts
-import { heroui } from "@heroui/react";
+import { heroui } from '@heroui/react';
 // or import from theme package if you are using individual packages.
 // import { heroui } from "@heroui/theme";
-export default heroui();
+export default heroui({
+  themes: {
+    extend: {
+      colors: {
+        primary: {
+          50: '',
+          100: '',
+          200: '',
+          300: '',
+          400: '',
+          500: '',
+          600: '',
+          700: '',
+          800: '',
+          900: '',
+        },
+      },
+    },
+  },
+});

package/templates/docs/FIGMA_TO_CODE_GUIDE.md

@@ -10,10 +10,93 @@ This document provides comprehensive guidelines for converting Figma designs to
 2. **Use ONLY existing components** - Never create custom implementations when project components exist
 3. **i18n for ALL text** - ALL labels, placeholders, titles, error messages MUST use translation keys
 4. **Navigation from config** - NEVER hardcode URLs. Always use `NAVIGATION_URLS` from config
-5. **HeroUI icons only** - Use icons from HeroUI Figma Kit: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-?node-id=10-1849
-6. **Follow project structure** - Place files in correct locations as defined below
-7. **Match coding patterns** - Use the same patterns found in existing code
-8. **Type safety first** - Use TypeScript strictly, no `any` types
+5. **Icons workflow** - Export SVG from Figma → Place in `src/assets/icons/` → Run `pnpm generate-icons` → Use generated TSX components
+6. **Logos workflow** - Export SVG/PNG from Figma → Place in `public/` → Reference via path (prefer SVG over PNG)
+7. **Use Tailwind standard classes** - Use closest Tailwind class instead of custom values (e.g., `h-10` not `h-[41px]`)
+8. **Follow project structure** - Place files in correct locations as defined below
+9. **Match coding patterns** - Use the same patterns found in existing code
+10. **Type safety first** - Use TypeScript strictly, no `any` types
+
+---
+
+## 🎨 Component Configuration & Customization
+
+### CRITICAL: Component Styles Must Be Configured, Not Inline
+
+**❌ WRONG - Inline custom styles**:
+```tsx
+// Don't apply component-specific styles inline
+<Button className="h-10 rounded-full bg-[#19ffa3] px-4 text-sm text-black">
+  Click Me
+</Button>
+
+// Don't use HTML elements when HeroUI component exists
+<button onClick={handler}>Click</button>
+```
+
+**✅ CORRECT - Configure in component wrapper or use variants**:
+```tsx
+// Option 1: If this is a reusable button style, extend Button component
+// File: src/components/ui/Button.tsx
+import { extendVariants, Button as HeroUIButton } from '@heroui/react';
+
+export const Button = extendVariants(HeroUIButton, {
+  variants: {
+    color: {
+      primary: 'bg-[#19ffa3] text-black hover:bg-[#00e68a]',
+    },
+    size: {
+      md: 'h-10 px-4 text-sm',
+    },
+  },
+});
+
+// Usage in code:
+<Button color="primary" size="md" radius="full">
+  Click Me
+</Button>
+
+// Option 2: For one-off usage, use HeroUI Button with minimal custom classes
+import { Button } from '@/components/ui';
+<Button color="primary" radius="full">Click Me</Button>
+```
+
+**When to configure vs use inline**:
+- ✅ Configure: Repeated styles, component variants, brand colors
+- ✅ Inline: Layout utilities only (`mt-4`, `hidden`, `lg:block`)
+- ❌ Never inline: Component-specific styles (heights, colors, padding, text sizes)
+
+### Data Must Be Mapped from Constants
+
+**❌ WRONG - Hardcoded data**:
+```tsx
+<DropdownMenu>
+  <DropdownItem key="option1">Option 1</DropdownItem>
+  <DropdownItem key="option2">Option 2</DropdownItem>
+  <DropdownItem key="option3">Option 3</DropdownItem>
+</DropdownMenu>
+```
+
+**✅ 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' },
+];
+
+// Usage:
+import { productMenuItems } from '@/config/menuOptions';
+
+<DropdownMenu>
+  {productMenuItems.map((item) => (
+    <DropdownItem key={item.key} href={item.href}>
+      {t(item.labelKey)}
+    </DropdownItem>
+  ))}
+</DropdownMenu>
+```
 
 ---
 
@@ -214,27 +297,253 @@ import { Modal, Chip, Breadcrumbs, Tabs, Icon } from '@/components/ui';
 
 ### Icons
 
-**IMPORTANT**: ALL icons MUST come from HeroUI Figma Kit
-- **Figma Source**: https://www.figma.com/design/kFGcjHsNKZx7zh2NxEJXYt/HeroUI-Figma-Kit--Community---Community-?node-id=10-1849
-- **Available in project**: ChevronDown, ChevronRight, Close, Eye, EyeSlash
+**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
+- Update `src/components/icons/index.ts` with exports
+
+#### Step 4: Use in Code
 ```tsx
-import { ChevronDownIcon, ChevronRightIcon, CloseIcon, EyeIcon, EyeSlashIcon } from '@/components/icons';
+import { IconNameIcon, ChevronDownIcon } from '@/components/icons';
+
+<ChevronDownIcon className="size-5 text-white" />
+<IconNameIcon className="size-4" />
+```
+
+**Available Icons** (auto-generated):
+- ChevronDownIcon, ChevronRightIcon
+- CloseIcon, MenuIcon
+- EyeIcon, EyeSlashIcon
+- AddIcon, AddCircleIcon
+- ArrowUpIcon, ArrowCircleDownIcon
+- DotsVerticalIcon, FrameIcon
+- And more...
+
+**❌ DO NOT**:
+- Use Lucide, Font Awesome, or other icon libraries
+- Create manual icon components
+- Use `<img>` tags for icons
+- Hardcode SVG paths directly in components
+
+**✅ DO**:
+- Always export from Figma as SVG
+- Use `pnpm generate-icons` to create components
+- Import from `@/components/icons`
+- Use Tailwind classes for sizing (`size-4`, `size-5`, `size-6`)
+
+### Logos & Images
+
+**CRITICAL WORKFLOW**: Logos and images must be placed in `public/` directory:
+
+#### Step 1: Export from Figma
+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 2: Place in Public Folder
+```bash
+# Place logo/image files in public/
+public/
+├── logo.svg           # Main logo (SVG preferred)
+├── logo-dark.svg      # Dark mode logo
+├── logo.png           # Fallback PNG
+├── favicon.ico
+└── images/
+    ├── hero-bg.jpg
+    └── product-1.png
+```
 
-<ChevronDownIcon className="h-4 w-4" />
+#### Step 3: Create Centralized Image Constants
+
+**CRITICAL**: Create a centralized constants file for all image paths:
+
+```typescript
+// src/config/images.ts
+
+/**
+ * Centralized image path constants
+ * Organize by category: LOGOS, AUTH, WEBSITE, SERVICES, etc.
+ */
+
+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',
+} 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',
+} 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',
+} as const;
+
+const SERVICES = {
+  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',
+} as const;
+
+export const IMAGES = {
+  LOGOS,
+  AUTH,
+  WEBSITE,
+  SERVICES,
+  PRODUCTS,
+} as const;
 ```
 
-**For icons not yet in project**:
-1. Find the icon in HeroUI Figma Kit
-2. Create a new icon component in `src/components/icons/` following the existing pattern
-3. Export it from `src/components/icons/index.ts`
+#### Step 4: Reference in Code
+
+```tsx
+// Import from centralized constants
+import { IMAGES } from '@/config/images';
+import Image from 'next/image';
+
+// Using Next.js Image component (recommended)
+<Image
+  src={IMAGES.LOGOS.FULL}
+  alt="Company Logo"
+  width={120}
+  height={40}
+  priority
+/>
+
+// Using standard img tag (for SVGs with CSS control)
+<img src={IMAGES.LOGOS.PRIMARY_CIRCLE} alt="Logo" className="h-10 w-auto" />
 
-**DO NOT use Lucide, Font Awesome, or other icon libraries**
+// Background images via Tailwind
+<div className={`bg-[url('${IMAGES.WEBSITE.HOME_HERO}')] bg-cover bg-center`}>
+
+// In authentication pages
+<Image
+  src={IMAGES.AUTH.LOGIN_BG}
+  alt="Login background"
+  fill
+  className="object-cover"
+/>
+```
+
+**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
+- Forget to optimize images before adding
+- 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)
+- Use `as const` for type safety
+- Import from `@/config/images` in components
+- Prefer SVG for logos and icons
+- Optimize images before adding (use tools like ImageOptim, Squoosh)
+- Use Next.js `<Image>` component for automatic optimization
 
 ---
 
 ## 🎨 Tailwind CSS Guidelines
 
+### Using Standard Tailwind Classes
+
+**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]"
+
+// ✅ 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)
+```
+
+**Tailwind Size Reference**:
+```css
+/* Spacing Scale (padding, margin, gap, etc.) */
+0.5 = 2px    4  = 16px    12 = 48px
+1   = 4px    5  = 20px    14 = 56px
+2   = 8px    6  = 24px    16 = 64px
+3   = 12px   8  = 32px    20 = 80px
+3.5 = 14px   10 = 40px    24 = 96px
+
+/* Font Sizes */
+xs   = 12px (0.75rem)
+sm   = 14px (0.875rem)
+base = 16px (1rem)
+lg   = 18px (1.125rem)
+xl   = 20px (1.25rem)
+2xl  = 24px (1.5rem)
+3xl  = 30px (1.875rem)
+
+/* Width/Height */
+auto, full, screen, fit, min, max
+4-96 (in increments of 4px)
+```
+
+**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">
+
+// ✅ Acceptable - Design tokens
+<div className="bg-[var(--colors/primary)] text-[#19ffa3]">
+
+// ❌ Bad - Should use standard classes
+<div className="h-[40px] w-[100%] p-[24px] text-[14px]">
+```
+
 ### Responsive Breakpoints (Mobile-First)
 ```css
 /* Mobile */
@@ -364,15 +673,51 @@ export default function LoginForm() {
 **CRITICAL**: ALL text content MUST use i18n translation keys
 
 ### Navigation with i18n
+
+**Import Guidelines**:
+```tsx
+// For Link component - use Next.js Link
+import Link from 'next/link';
+
+// For navigation hooks - use next/navigation
+import { usePathname, useRouter } from 'next/navigation';
+
+// For navigation URLs - use centralized constants
+import { NAVIGATION_URLS } from '@/config/navigationUrls';
+```
+
+**Navigation Example**:
 ```tsx
-import { Link } from '@/libs/I18nNavigation';
+import Link from 'next/link';
 import { NAVIGATION_URLS } from '@/config/navigationUrls';
 
-// ✅ CORRECT - Using NAVIGATION_URLS
+// ✅ CORRECT - Using Next.js Link with NAVIGATION_URLS
 <Link href={NAVIGATION_URLS.ABOUT}>About</Link>
 
 // ❌ WRONG - Hardcoded URL
 <Link href="/about">About</Link>
+
+// ❌ WRONG - Using HeroUI Link for internal navigation
+import { Link } from '@heroui/react';
+<Link href={NAVIGATION_URLS.ABOUT}>About</Link>
+```
+
+**Using Navigation Hooks**:
+```tsx
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+
+export function MyComponent() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const handleNavigation = () => {
+    router.push(NAVIGATION_URLS.DASHBOARD.INDEX);
+  };
+
+  return <button onClick={handleNavigation}>Go to Dashboard</button>;
+}
 ```
 
 ### Translations for ALL text
@@ -517,30 +862,51 @@ import { Footer, Navbar } from '@/components/layout';
 ## ⚠️ CRITICAL RULES
 
 ### ❌ DO NOT
-1. ❌ Use non-HeroUI icons (Lucide, Font Awesome, etc.) - ONLY use HeroUI Figma Kit icons
-2. ❌ Hardcode ANY text - ALL text MUST use i18n translation keys
-3. ❌ Hardcode URLs - ALWAYS use `NAVIGATION_URLS` from config
-4. ❌ Create custom components when HeroUI provides them - check HeroUI first, then project components
-5. ❌ Use CSS modules or styled-components - ONLY Tailwind CSS
-6. ❌ Import from `@heroui/react` directly (use `@/components/ui` wrappers)
-7. ❌ Create duplicate utility functions (check `src/utils/helpers.ts` first)
-8. ❌ Use `any` type in TypeScript
-9. ❌ Ignore responsive design (always implement mobile-first)
-10. ❌ Skip form validation (always use Zod schemas)
+1. ❌ **Icons**: Create manual icon components - MUST use `pnpm generate-icons` workflow
+2. ❌ **Icons**: Use non-project icons (Lucide, Font Awesome, etc.)
+3. ❌ **Logos**: Put logos/images in `src/` folder - MUST go in `public/`
+4. ❌ **Logos**: Import images as modules unless necessary
+5. ❌ **Logos**: Hardcode image paths in components - MUST use centralized constants from `@/config/images`
+6. ❌ **Tailwind**: Use arbitrary values when standard classes exist (e.g., `h-[40px]` → use `h-10`)
+7. ❌ **Tailwind**: Use custom values like `w-[100%]` (use `w-full`)
+8. ❌ **Text**: Hardcode ANY text - ALL text MUST use i18n translation keys
+9. ❌ **URLs**: Hardcode URLs - ALWAYS use `NAVIGATION_URLS` from config
+10. ❌ **Data**: Hardcode menu items, dropdown options - MUST map from constants
+11. ❌ **Components**: Create custom components when HeroUI provides them
+12. ❌ **Components**: Use HTML elements when HeroUI component exists (e.g., `<button>` → use HeroUI `<Button>`)
+13. ❌ **Styling**: Apply component styles inline - MUST configure in component wrapper or theme
+14. ❌ **Styling**: Use CSS modules or styled-components - ONLY Tailwind CSS
+15. ❌ **Imports**: Import from `@heroui/react` directly (use `@/components/ui` wrappers)
+16. ❌ **Navigation**: Use HeroUI `Link` for internal navigation (use Next.js `Link` from `next/link`)
+17. ❌ **Navigation**: Import `usePathname`, `useRouter` from wrong source (MUST use `next/navigation`)
+18. ❌ **TypeScript**: Use `any` type
+19. ❌ **Design**: Ignore responsive design (always implement mobile-first)
+20. ❌ **Forms**: Skip form validation (always use Zod schemas)
 
 ### ✅ DO
-1. ✅ Use HeroUI components first (check HeroUI library before creating custom components)
-2. ✅ Use icons ONLY from HeroUI Figma Kit
-3. ✅ Use i18n translation keys for ALL text (labels, placeholders, titles, errors, etc.)
-4. ✅ Use `NAVIGATION_URLS` for ALL navigation links
-5. ✅ Use existing UI components from `src/components/ui/`
-6. ✅ Use Tailwind CSS ONLY for styling (no CSS modules, no styled-components)
-7. ✅ Implement TypeScript strictly with proper types
-8. ✅ Use `'use client'` directive for interactive components
-9. ✅ Follow mobile-first responsive design
-10. ✅ Use semantic color classes from HeroUI theme
-11. ✅ Implement proper loading and error states
-12. ✅ Follow existing code patterns and naming conventions
+1. ✅ **Icons**: Export SVG from Figma → `src/assets/icons/` → Run `pnpm generate-icons`
+2. ✅ **Icons**: Import from `@/components/icons` (auto-generated components)
+3. ✅ **Logos**: Export SVG/PNG from Figma → Place in `public/images/` with organized folders
+4. ✅ **Logos**: Create centralized constants file `src/config/images.ts` with LOGOS, AUTH, WEBSITE, etc.
+5. ✅ **Logos**: Import from `@/config/images` and use `IMAGES.LOGOS.PRIMARY`
+6. ✅ **Logos**: Prefer SVG over PNG when source is vector
+7. ✅ **Tailwind**: Use standard classes (`h-10`, `p-6`, `text-sm` instead of arbitrary values)
+8. ✅ **Tailwind**: Use size utilities (`size-4`, `size-5`) for icons
+9. ✅ **Navigation**: Use Next.js `Link` from `next/link` for internal navigation
+10. ✅ **Navigation**: Import `usePathname`, `useRouter` from `next/navigation`
+11. ✅ **Text**: Use i18n translation keys for ALL text (`t('key')`)
+12. ✅ **URLs**: Use `NAVIGATION_URLS` for ALL navigation links
+13. ✅ **Data**: Map menu items, dropdown options from constants (never hardcode)
+14. ✅ **Components**: Use HeroUI components first (check library before custom)
+15. ✅ **Components**: Use existing wrappers from `src/components/ui/` (e.g., `<Button>` not `<button>`)
+16. ✅ **Components**: Configure styles in component wrappers, not inline
+17. ✅ **Styling**: Use Tailwind CSS ONLY (utility classes)
+18. ✅ **TypeScript**: Implement strict typing with proper types
+19. ✅ **React**: Use `'use client'` directive for interactive components
+20. ✅ **Design**: Follow mobile-first responsive design
+21. ✅ **Colors**: Use semantic color classes from HeroUI theme
+22. ✅ **States**: Implement proper loading and error states
+23. ✅ **Patterns**: Follow existing code patterns and naming conventions
 
 ---
 
@@ -548,12 +914,27 @@ import { Footer, 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
+- [ ] Imported icons from `@/components/icons`
+- [ ] Exported logos/images as SVG (preferred) or PNG
+- [ ] Placed logos/images in `public/images/` with organized folders (logos/, auth/, website/, services/)
+- [ ] Created centralized constants file `src/config/images.ts`
+- [ ] Organized image paths by category (LOGOS, AUTH, WEBSITE, SERVICES, PRODUCTS)
+- [ ] Used `as const` for type safety
+- [ ] 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
-- [ ] Used ONLY HeroUI Figma Kit icons (no Lucide, Font Awesome, etc.)
+- [ ] Used HeroUI components via `src/components/ui/` wrappers (e.g., `<Button>` not `<button>`)
+- [ ] Configured component styles in wrapper/theme (not inline)
+- [ ] Used only layout utilities inline (`mt-4`, `hidden`, `lg:block`)
 - [ ] Applied Tailwind CSS classes only (no custom CSS, no CSS modules)
+- [ ] Used standard Tailwind classes instead of arbitrary values (e.g., `h-10` not `h-[40px]`)
 - [ ] Followed HeroUI theme colors (bg-background, bg-primary, etc.)
+- [ ] Mapped all data from constants (no hardcoded menu items/dropdowns)
 
 ### Content & Navigation
 - [ ] ALL text uses i18n translation keys (no hardcoded text)
@@ -587,11 +968,20 @@ When converting Figma to code, ensure:
 
 Before finalizing code, verify:
 
-### Icons & Components
-1. **Icons from HeroUI only** - Check all icons come from HeroUI Figma Kit
-2. **HeroUI components first** - Verify HeroUI library was checked before custom implementation
-3. **No direct HeroUI imports** - Only through `@/components/ui`
-4. **Component reuse** - Don't duplicate existing components
+### 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
+4. **Use HeroUI components** - No HTML elements when HeroUI component exists (e.g., use `<Button>` not `<button>`)
+5. **Configure, don't inline** - Component styles in wrapper/theme, not inline classNames
+6. **Standard Tailwind classes** - No arbitrary values when standard class exists (e.g., `h-10` not `h-[40px]`)
+7. **Map from constants** - All menu items, dropdown options mapped from config files
 
 ### i18n & Navigation
 5. **Zero hardcoded text** - ALL text uses `t('key')`
@@ -621,4 +1011,109 @@ When in doubt, check these example files:
 
 ---
 
+## 🚀 Quick Reference Guide
+
+### Icons Workflow
+```bash
+# 1. Export SVG from Figma
+# 2. Place in folder
+mv icon.svg src/assets/icons/
+
+# 3. Generate components
+pnpm generate-icons
+
+# 4. Use in code
+import { IconIcon } from '@/components/icons';
+<IconIcon className="size-5" />
+```
+
+### Logos/Images Workflow
+```bash
+# 1. Export SVG/PNG from Figma
+# 2. Place in public with organized folders
+mv logo.svg public/images/logos/
+
+# 3. Create centralized constants file
+# src/config/images.ts
+const LOGOS = {
+  PRIMARY: '/images/logos/logo-primary.svg',
+  ICON: '/images/logos/logo-icon.svg',
+} as const;
+
+const WEBSITE = {
+  HOME_HERO: '/images/website/home-hero.webp',
+} as const;
+
+export const IMAGES = {
+  LOGOS,
+  WEBSITE,
+} as const;
+
+# 4. Use in code
+import { IMAGES } from '@/config/images';
+<img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
+# OR
+<Image src={IMAGES.LOGOS.PRIMARY} alt="Logo" width={120} height={40} />
+```
+
+### Tailwind Standard Classes
+```tsx
+// Heights/Widths
+h-10 = 40px    w-14 = 56px    size-5 = 20px
+h-12 = 48px    w-20 = 80px    size-6 = 24px
+
+// Spacing
+p-6 = 24px     gap-3 = 12px    m-4 = 16px
+p-8 = 32px     gap-4 = 16px    m-8 = 32px
+
+// Text
+text-sm = 14px    text-xl = 20px
+text-base = 16px  text-2xl = 24px
+text-lg = 18px    text-3xl = 30px
+
+// Use standard class if within 2-4px of target
+// Only use arbitrary [value] for design tokens
+```
+
+### Common Patterns
+```tsx
+// Icons (auto-generated)
+import { MenuIcon, CloseIcon } from '@/components/icons';
+<MenuIcon className="size-6 text-white" />
+
+// Logos (centralized constants)
+import { IMAGES } from '@/config/images';
+<img src={IMAGES.LOGOS.PRIMARY} alt="Logo" className="h-10 w-auto" />
+
+// Navigation (Next.js Link + constants)
+import Link from 'next/link';
+import { NAVIGATION_URLS } from '@/config/navigationUrls';
+<Link href={NAVIGATION_URLS.ABOUT}>{t('about')}</Link>
+
+// Navigation hooks (from next/navigation)
+import { usePathname, useRouter } from 'next/navigation';
+const pathname = usePathname();
+const router = useRouter();
+
+// Translation (all text)
+const t = useTranslations('namespace');
+<h1>{t('title')}</h1>
+
+// Components (use HeroUI, not HTML)
+import { Button } from '@/components/ui';
+<Button color="primary">Click</Button>  // ✅
+<button>Click</button>                  // ❌
+
+// Data mapping (from constants)
+const menuItems = [
+  { key: 'home', labelKey: 'home', href: NAVIGATION_URLS.ROOT },
+];
+{menuItems.map(item => <Item key={item.key}>{t(item.labelKey)}</Item>)}
+
+// Responsive (mobile-first)
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+```
+
+---
+
 **Remember**: This project has a well-defined structure and component library. Your job is to use them correctly, not to reinvent them. Stay within the boundaries of the existing architecture.

package/templates/docs/PROJECT_DOCUMENTATION.md

@@ -51,7 +51,7 @@ cli-tool/
 │   │   ├── next.config.ts
 │   │   ├── tsconfig.json
 │   │   └── ... (other config files)
-│   └── docs/                # Documentation (CURRENTLY EMPTY)
+│   └── docs/                # Documentation templates
 ├── package.json
 ├── tsconfig.json
 └── README.md
@@ -290,7 +290,14 @@ pnpm build
 
 ## Project History (Recent Changes)
 
-### v1.0.41 (Latest)
+### v1.0.47 (Latest)
+- **Removed documentation files from init**: No longer generates ARCHITECTURE_PATTERNS.md, AI_QUICK_REFERENCE.md, UI_COMPONENTS_GUIDE.md, IMPLEMENTATION_GUIDE.md
+- **Simplified documentation**: Projects now only get PROJECT_OVERVIEW.md, FIGMA_TO_CODE_GUIDE.md, and DOCUMENTATION_INDEX.md
+- **Updated FIGMA_TO_CODE_GUIDE.md**: Added comprehensive guidelines for icons, logos, images, Tailwind classes, component configuration, and data mapping
+- **Updated update command**: Only updates FIGMA_TO_CODE_GUIDE.md (removed other docs from update list)
+- **Updated project detection**: Changed from checking ARCHITECTURE_PATTERNS.md to PROJECT_OVERVIEW.md
+
+### v1.0.41
 - **CRITICAL FIX**: Fixed import spacing in generated `next.config.ts`
 - **CRITICAL FIX**: Fixed `import type` usage in generated `next-pwa.d.ts`
 - Generated projects now pass `pnpm lint` and `pnpm check:types` without errors
@@ -448,5 +455,5 @@ This series of releases focused on ensuring generated projects pass all quality
 
 ---
 
-**Last Updated**: December 23, 2025 (v1.0.41)
+**Last Updated**: December 24, 2025 (v1.0.47)
 **Documentation Created For**: Claude AI continuation in different account