ima2-gen 2.0.15 → 2.0.16

package/skills/ima2-uiux/references/favicon-logo.md

@@ -0,0 +1,355 @@
+# Favicon & Product Logo — Design Judgment & Patterns
+
+Design guidance for favicons, product logos, and brand identity elements in web applications. Covers decision-making and design rationale.
+
+Read `ima2-front` references for CSS implementation details.
+Read `logo-trust-sections.md` for partner/client logo bars (separate concern).
+
+---
+
+## 1. Favicon: The Modern Minimum Set
+
+You need **5 image files + 1 manifest**. Everything else is legacy bloat.
+
+| File | Size | Purpose |
+|------|------|---------|
+| `favicon.ico` | 32x32 | Legacy browser fallback |
+| `icon.svg` | Scalable | Modern browsers, dark mode via CSS media query |
+| `apple-touch-icon.png` | 180x180 | iOS home screen bookmark |
+| `icon-192.png` | 192x192 | Android home screen, PWA minimum |
+| `icon-512.png` | 512x512 | PWA splash screen, install prompt |
+
+Plus `site.webmanifest` referencing the 192 and 512 PNGs.
+
+**Skip list (2025+):** 96x96, 128x128, 64x64, 144x144, msapplication-TileImage. All obsolete.
+
+### HTML Head Markup
+
+```html
+<link rel="icon" href="/favicon.ico" sizes="32x32">
+<link rel="icon" href="/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<link rel="manifest" href="/site.webmanifest">
+<meta name="theme-color" content="#4a90d9">
+```
+
+Order matters: ICO first (fallback), then SVG (modern browsers pick this).
+
+### Web Manifest
+
+```json
+{
+  "name": "App Name",
+  "short_name": "App",
+  "icons": [
+    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
+    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
+    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
+  ],
+  "theme_color": "#4a90d9",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
+```
+
+### Maskable Icon (Android Adaptive)
+
+Android 13+ crops icons into adaptive shapes (circles, squircles). The safe zone is a centered circle with 40% radius of the canvas. In practice: **at least 10% padding on all sides**. Never reuse the standard 512 icon — create a dedicated maskable version. Preview at https://maskable.app.
+
+---
+
+## SVG Favicon Dark Mode
+
+SVG favicons can embed `prefers-color-scheme` to adapt automatically:
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <style>
+    .logo-fill { fill: #1a1a2e; }
+    @media (prefers-color-scheme: dark) {
+      .logo-fill { fill: #f0f0f0; }
+    }
+  </style>
+  <circle class="logo-fill" cx="64" cy="64" r="60" />
+</svg>
+```
+
+**Browser support:**
+
+| Browser | SVG Favicon | Dark Mode in SVG |
+|---------|-------------|------------------|
+| Chrome 80+ | Yes | Yes |
+| Firefox 41+ | Yes | Yes |
+| Edge (Chromium) | Yes | Yes |
+| Safari 15+ | Renders SVG | Does NOT apply embedded `@media` |
+
+Safari caveat: always shows light-mode variant. For Safari dark-mode favicons, swap a PNG via JS `matchMedia`.
+
+**Rules:**
+- Always set `viewBox`. Browsers default to 16x16 without it.
+- Keep SVG simple. Complex paths at 16px tab size become noise.
+- Test at actual tab size, not at source resolution.
+
+---
+
+## Deriving a Favicon from a Logo
+
+| Rule | Rationale |
+|------|-----------|
+| Use the logomark, not the wordmark | Text is illegible at 16x16 |
+| Strip to 1-2 elements | Detail vanishes at small sizes |
+| Maximum 3 colors (2 is better) | Color distinction fails at low resolution |
+| Push contrast hard | White mark on vivid background holds up better than subtle coloring |
+| Test on dark tab backgrounds | Dark favicons vanish against dark browser chrome |
+
+---
+
+## Generation Workflow
+
+1. Design the icon at 512x512 or as SVG in Figma/Illustrator
+2. Create the SVG version manually (for dark mode — generators can't produce this)
+3. Run through RealFaviconGenerator for all PNG/ICO sizes
+4. Create a separate maskable version with safe-zone padding
+5. Validate with RealFaviconGenerator's checker
+
+**Framework-specific:**
+- **Next.js App Router:** Drop `favicon.ico`, `icon.svg`, `apple-icon.png` into `app/`. Auto-generates `<link>` tags. For programmatic: export default from `app/icon.tsx` using `ImageResponse`.
+- **Vite/React/Vue:** Place in `public/`. Reference with absolute paths in `index.html`.
+
+---
+
+## Product Logo in Navigation
+
+### Sizing
+
+| Context | Height | Max Width |
+|---------|--------|-----------|
+| Desktop header | 40-48px | 280px |
+| Mobile header | 32-40px | 160px |
+| Retina/HiDPI | 2x PNG or SVG | Same |
+
+Use fixed height + `width: auto` + `max-width` constraint. Set explicit `width` and `height` attributes on `<img>` to prevent CLS.
+
+### Responsive Collapse
+
+1. **Full logo** (mark + wordmark) above 1024px
+2. **Logomark only** at 768-1024px
+3. **Hamburger appears** below 768px, logomark stays
+
+### Logo as Home Link
+
+Universal UX convention. Implementation:
+
+```html
+<a href="/" aria-label="Homepage">
+  <img src="/logo.svg" alt="Acme Corp" width="200" height="48">
+</a>
+```
+
+Rules:
+- Left-align (LTR). Always link to `/`.
+- Use SVG for the logo image when possible.
+- Click target: minimum 44x44px (WCAG 2.2 AAA). Pad with CSS if the logo is smaller.
+- If the logo is the only content identifying the company, `alt` must name the org.
+- If adjacent text already names the org, use `alt=""` (decorative).
+
+### Inline SVG Logo
+
+```html
+<a href="/">
+  <svg role="img" aria-label="Acme Corp" viewBox="0 0 200 48">
+    <title>Acme Corp</title>
+    <!-- paths -->
+  </svg>
+</a>
+```
+
+---
+
+## Dark Mode Logo
+
+Four techniques, ranked by reliability:
+
+### 1. Separate variants (most reliable)
+
+```html
+<picture>
+  <source srcset="/logo-dark.svg" media="(prefers-color-scheme: dark)">
+  <img src="/logo-light.svg" alt="Acme Corp" />
+</picture>
+```
+
+### 2. SVG embedded `prefers-color-scheme`
+
+Works in `<img>`, CSS backgrounds, and favicons.
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
+  <style>
+    .brand { fill: #1a1a2e; }
+    @media (prefers-color-scheme: dark) {
+      .brand { fill: #f5f5f5; }
+    }
+  </style>
+  <path class="brand" d="..." />
+</svg>
+```
+
+### 3. SVG `currentColor` (monochrome only)
+
+```xml
+<svg viewBox="0 0 100 100"><path fill="currentColor" d="..." /></svg>
+```
+
+Inherits parent's CSS `color`. Only works with inline SVGs, not `<img>` tags.
+
+### 4. CSS `filter` (last resort)
+
+```css
+@media (prefers-color-scheme: dark) {
+  .logo img { filter: invert(1) hue-rotate(180deg); }
+}
+```
+
+Imprecise for multi-color logos. Use only for simple single-color marks.
+
+---
+
+## Logo in Footer
+
+- Height: **50-75% of header logo** (16-20px if header is 28px)
+- Use a monochrome/neutral variant (grayscale or muted)
+- Left-aligned or centered, near copyright line
+- `loading="lazy"` if below the fold
+
+---
+
+## Open Graph & Social Sharing
+
+### Required Images
+
+| Platform | Size | Ratio |
+|----------|------|-------|
+| Facebook, LinkedIn, Slack, Discord | 1200x630px | 1.91:1 |
+| X summary_large_image | 1200x630px | 1.91:1 |
+| X summary card | 240x240px min | 1:1 |
+
+Keep text/elements within the center 1080x600 safe zone.
+
+### Meta Tags
+
+```html
+<meta property="og:image" content="https://example.com/og-image.png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:image:alt" content="Acme Corp" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image" content="https://example.com/og-image.png" />
+```
+
+Tags must be server-rendered. Social crawlers do not execute JavaScript.
+
+### Schema.org Organization Logo
+
+```json
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Acme Corp",
+  "url": "https://example.com",
+  "logo": { "@type": "ImageObject", "url": "https://example.com/logo.png", "width": 600, "height": 600 }
+}
+```
+
+Google requires at least 112x112px. Must be crawlable.
+
+---
+
+## Brand Tokens from Logo
+
+Extract the primary brand color from the logo and generate a full scale:
+
+**Primitive tokens** (raw values):
+```css
+:root {
+  --color-brand-500: #1a73e8;  /* logo primary color */
+  --color-brand-400: #4a90d9;
+  --color-brand-600: #1557b0;
+}
+```
+
+**Semantic tokens** (usage-based):
+```css
+:root {
+  --color-brand-primary:    var(--color-brand-500);
+  --color-brand-hover:      var(--color-brand-600);
+  --color-brand-subtle:     var(--color-brand-400);
+  --color-brand-on-primary: #ffffff;
+}
+```
+
+Generate the full 50-950 scale using OKLCH for perceptual evenness. Reference: `color-system.md`.
+
+---
+
+## Empty State & Error Page Logos
+
+| Context | Logo Treatment |
+|---------|---------------|
+| 404 / 500 error | Simplified mark, not prominent. Focus is on error message + recovery action. |
+| Empty state (no data) | Contextual illustration preferred over logo. Brand presence via nav header. |
+| First-run / onboarding | Full logo acceptable as part of welcome. |
+| Maintenance page | Full logo + brand colors to reassure users. |
+
+Never place a large isolated logo as the centerpiece of a 404 page — users read it as a dead end. Pair a small mark with clear next-step navigation.
+
+---
+
+## Animated Logo
+
+**When appropriate:** App launch/splash (under 3s), page transitions as loading indicator, marketing hero sections.
+
+**When not:** Nav logo on every page load, on scroll, or as persistent decoration.
+
+**Performance:**
+- Prefer CSS animations (transform, opacity) — GPU-composited.
+- Lottie for complex animations adds 50-250KB. Only justified for splash screens.
+- Keep animated SVGs under 10KB.
+
+**`prefers-reduced-motion` is mandatory (WCAG 2.1 AA):**
+
+```css
+.logo-animated { animation: logo-entrance 1.2s ease-out; }
+@media (prefers-reduced-motion: reduce) {
+  .logo-animated { animation: none; }
+}
+```
+
+---
+
+## Common Mistakes
+
+| Mistake | Why It Matters |
+|---------|---------------|
+| Blurry favicons | Scaling 512px to 16px with generic resampling. Generate each size natively or use SVG. |
+| Missing apple-touch-icon | iOS shows ugly screenshot clip on home screen save. |
+| Reusing standard icon as maskable | Android crops it — logo text gets clipped without safe-zone padding. |
+| Not testing at actual tab size | 512px preview is meaningless. Test at 16px in real browser tabs. |
+| Forgetting dark mode | Dark favicon vanishes against dark browser chrome. |
+| Transparent apple-touch-icon | iOS replaces transparency with black. Always use solid background. |
+| Missing `sizes` attribute | Browser picks wrong resolution file. |
+| No explicit width/height on logo `<img>` | Causes CLS as image loads. |
+| Over-complex favicon design | Detailed illustrations at 16px become noise. Simplify ruthlessly. |
+| Stale cached favicons | Use `?v=2` query string during rollout, remove after propagation. |
+
+---
+
+## Performance
+
+- **Cache aggressively:** `Cache-Control: public, immutable, max-age=31536000` for favicons (rarely change).
+- **Minify SVG:** SVGO, strip editor metadata. Target under 1KB for favicon SVGs.
+- **Compress PNG:** pngquant/oxipng. 32x32 should be under 2KB.
+- **Don't serve from a different domain** (extra DNS lookup).
+- **Don't use Base64 data URIs** for favicons (bloats HTML, defeats caching).
+- **Preload primary favicon** if needed: `<link rel="preload" href="/icon.svg" as="image" type="image/svg+xml">` — but only the primary one.
+- **`loading="lazy"`** on trust-bar logos below fold, NOT on header logo.

package/skills/ima2-uiux/references/form-patterns.md

@@ -0,0 +1,118 @@
+# Form Design Patterns
+
+Validation timing, multi-step wizards, auth forms, file upload, and search/filter.
+
+## 1. Validation Timing
+
+| Strategy | When | Use For |
+|----------|------|---------|
+| **On blur** (default) | User leaves the field | Most fields — email, name, phone |
+| **On submit** | Form is submitted | Short forms (≤ 4 fields), payment |
+| **Real-time** | As user types, debounced 300ms | Username availability, search |
+| **On blur + on change after first error** | First error on blur, subsequent on keystroke | Long forms |
+
+- Never show errors on empty fields before first interaction
+- Error appears below the field, not in a top-level alert
+- Error state: red border + error icon + message text (never color alone)
+- Success state: green check on field, NOT green border (a11y)
+- Clear error when user starts correcting
+
+## Multi-Step Form (Wizard)
+
+```
+Step Indicator (1/3, 2/3, 3/3)
+├── Step Title
+├── Fields for this step
+├── [Back] [Next / Submit]
+└── Progress bar (optional)
+```
+
+- Step indicator always visible (horizontal bar or numbered pills)
+- Back button preserves all entered data
+- Validate current step before allowing Next
+- Final step shows summary before Submit
+- Save partial state to sessionStorage (refresh-safe)
+- Mobile: full-width steps, no horizontal scroll for indicator
+- Max 5 steps — break longer flows into separate forms
+
+## Auth / Password Forms
+
+### Sign In
+
+```
+[Email / Username]
+[Password] [Show/Hide toggle]
+[Forgot password?]
+[Sign In]
+[— or —]
+[Social login buttons]
+```
+
+### Sign Up
+
+```
+[Email]
+[Password] [Strength meter below]
+[Confirm password]
+[Terms checkbox]
+[Sign Up]
+```
+
+- Show/hide toggle as icon button inside the password field
+- Strength meter: visual bar (red → yellow → green) + text label
+  - Weak: < 8 chars or common password
+  - Medium: 8+ chars, mixed case
+  - Strong: 12+ chars, mixed case + number + symbol
+- Never disable paste on password fields
+- `autocomplete`: `username`, `current-password`, `new-password`
+- Passkey/WebAuthn: offer as primary when supported
+- Wrong credentials: "Invalid email or password" (never reveal which)
+
+## File Upload
+
+```
+[Drop zone: dashed border, icon, "Drag files here or click"]
+[File list: name, size, progress bar, remove]
+```
+
+- `accept` attribute: specify allowed types
+- Max file size visible in drop zone text
+- Individual progress bar per file
+- Preview: thumbnails for images, icon + filename for documents
+- Failed files: red highlight + retry button
+- Multiple files: drag handles if order matters
+- Drop zone is `<button>` or `role="button"`, keyboard-activatable
+- Mobile: tap opens file picker, camera option for images
+
+## Search / Filter
+
+Filter dropdowns, sort menus, and search comboboxes use the project's unified
+dropdown design layer (`ima2-front` `dropdown-layer.md`
+FE-DROPDOWN-LAYER-01): one skin, behavior-correct primitive per pattern.
+
+```
+[Search input + icon]
+[Filter pills / dropdown] [Active filter count]
+[Results count: "42 results"]
+[Clear all filters]
+```
+
+- Debounce search input 300ms before querying
+- Empty: show suggestions or recent searches
+- Filter state reflected in URL query params (shareable, back-button works)
+- Loading: skeleton results, not blank screen
+- No results: helpful message + suggest clearing filters
+
+## Pre-flight
+
+- [ ] Validation uses on-blur timing by default
+- [ ] Error messages appear below the relevant field
+- [ ] Password fields have show/hide toggle and `autocomplete`
+- [ ] Multi-step forms preserve data on back/refresh
+- [ ] File uploads show individual progress and support drag-and-drop
+
+## Cross-references
+
+- Mobile form rules: `dev-frontend/references/core/mobile-ux.md`
+- Validation UX states: `ux-states.md` §9
+- Schema validation: `dev-frontend/SKILL.md` §10 (Zod + react-hook-form)

package/skills/ima2-uiux/references/intent-discovery-ladder.md

@@ -0,0 +1,86 @@
+# Intent Discovery Ladder
+
+Use this ladder only when UX-INTENT-01 step 2 fails (one fork was insufficient)
+or the user explicitly wants guided exploration. The compact flow in SKILL.md §1
+(Design Read → ONE clarifying fork → proceed) is the default; this ladder is the
+optional deepening path.
+
+Rules:
+- Use binary/ternary choices, not open-ended questions.
+- Reference known products — users recognize what they want faster than they articulate it.
+- If the diagram skill is available, offer: "참고로 스타일 비교를 다이어그램으로 보여드릴 수도 있어요."
+- If the user names a specific product reference, skip remaining steps and map
+  directly via `references/product-personalities.md`.
+
+## Step 1 — Mood
+
+Ask: "전체적인 분위기가 어떤 느낌이면 좋을까요?" / "What overall feeling should the product have?"
+
+| Option | Signals | Product References |
+|--------|---------|-------------------|
+| 전문적/신뢰감 (Professional) | swiss, flat, restrained | Linear, Vercel, GitHub |
+| 따뜻한/친근한 (Warm/Friendly) | rounded, warm-neutrals, illustrations | Notion, Airbnb, Toss |
+| 고급스러운/세련된 (Premium) | generous-whitespace, thin-type, restrained-color | Apple, Stripe, Aesop |
+| 재미있는/활기찬 (Fun/Energetic) | bright-colors, playful-shapes, bold-type | Figma, Discord |
+| 대담한/독특한 (Bold/Distinctive) | brutalism, asymmetry, experimental | Gumroad, Nothing |
+
+## Step 2 — Lightness
+
+Ask: "밝은 화면이 좋으신가요, 어두운 화면이 좋으신가요?" / "Light or dark background?"
+
+| Option | CSS |
+|--------|-----|
+| 밝은 배경 (Light) | `bg-white text-gray-900` |
+| 어두운 배경 (Dark) | `bg-gray-950 text-gray-100` |
+| 둘 다 (Both / auto) | `prefers-color-scheme` aware |
+
+## Step 3 — Density
+
+Ask: "화면에 정보가 많이 보이는 게 좋으신가요, 여유롭게 보이는 게 좋으신가요?" / "Dense or spacious?"
+
+| Option | VISUAL_DENSITY | Tokens |
+|--------|---------------|--------|
+| 빽빽하게 (Dense) | 8-10 | `text-sm py-1 px-2 gap-1` |
+| 보통 (Normal) | 4-7 | `text-base py-3 px-4 gap-4` |
+| 여유롭게 (Spacious) | 1-3 | `text-lg py-8 px-8 gap-8` |
+
+## Step 4 — Shape
+
+Ask: "모서리가 각진 느낌이 좋으신가요, 둥근 느낌이 좋으신가요?" / "Sharp or rounded?"
+
+| Option | CSS | Signals |
+|--------|-----|---------|
+| 각진 (Sharp) | `rounded-none` / 0-2px | Vercel, brutalism, swiss |
+| 살짝 둥근 (Slightly rounded) | `rounded-md` / 6-8px | Linear, Notion, material |
+| 많이 둥근 (Very rounded) | `rounded-2xl` / 16-24px | Figma, iOS, Toss |
+
+## Step 5 — Viewport Priority
+
+Ask: "주로 어떤 화면에서 볼 건가요?" / "What's the primary viewing device?"
+
+| Option | Responsive Strategy | Key Constraint |
+|--------|-------------------|----------------|
+| 데스크탑 위주 (Desktop-first) | Desktop layout → tablet → mobile collapse | Data density OK, hover interactions OK |
+| 모바일 위주 (Mobile-first) | Mobile layout → tablet → desktop expansion | Thumb zone, touch targets, minimal density |
+| 둘 다 중요 (Both equally) | Design mobile AND desktop as separate compositions | Most work — section order/composition may differ |
+
+Cross-ref: `references/responsive-nav.md` for canonical breakpoints, `dev-frontend/references/core/mobile-ux.md` for mobile rules.
+
+## Step 6 — Reference
+
+Ask: "혹시 '이런 느낌이면 좋겠다' 하는 사이트나 앱이 있으신가요?" / "Any website or app that feels like what you want?"
+
+This single question often resolves all ambiguity. If the user names a product, map it via `references/product-personalities.md`.
+
+## Vague Request Disambiguation
+
+When the user gives feedback without specifics, translate:
+
+| User says | Action |
+|-----------|--------|
+| "더 좋게" / "make it better" | Ask: "레이아웃? 색상? 타이포? 여백?" — identify the dimension |
+| "더 전문적으로" / "more professional" | Increase whitespace, reduce color count to 2-3, tighten grid alignment |
+| "더 모던하게" / "more modern" | Negative letter-spacing on headings, offer dark mode, reduce radius to 8px |
+| "더 재미있게" / "more exciting" | Add one bold accent color, increase type contrast, add micro-animation on hover |
+| "너무 심심해" / "too boring" | Add asymmetric layout, introduce one unexpected element, vary section rhythm |
+| "너무 복잡해" / "too busy" | Reduce element count, increase whitespace, limit to 2 colors |

package/skills/ima2-uiux/references/korean-design-vocabulary.md

@@ -0,0 +1,52 @@
+# Korean Design Vocabulary
+
+Map common Korean design descriptors to concrete tokens. When the user uses
+these words, translate before implementing.
+
+## Translation Table
+
+| Korean | Literal | CSS/Token Translation |
+|--------|---------|----------------------|
+| 깔끔하게 | cleanly | Generous whitespace (24-48px gaps), strict grid, max 2-3 colors, saturation < 60%, 1px borders or none, 4-8px radius, single font, no/subtle shadows |
+| 모던하게 | modern | Geometric sans-serif (Geist/Outfit), negative letter-spacing on headings, dark mode or high-contrast light, 8-16px radius, spring micro-interactions |
+| 고급스럽게 | luxurious | Very generous whitespace (48-96px padding), thin weights (300-400), refined sans by default, serif only with editorial/luxury rationale, low-saturation palette, slow animations (800ms+), 0-4px radius |
+| 심플하게 | simply | Max 3-4 element types per screen, 1-2 colors, single font, 2-3 size steps, hidden/minimal navigation, zero decoration |
+| 트렌디하게 | trendy | Glassmorphism, bento grid, gradient mesh, variable fonts — ask for a reference site |
+| 따뜻하게 | warmly | Warm hue range (stone/amber/orange), 12-20px radius, warm-tinted shadows rgba(180,140,100,0.1), rounded or humanist sans |
+| 차가운 | cold/cool | Cool grays (slate/zinc), blue-tinted whites, geometric sans, thin weights, 0-8px radius |
+| 감성적으로 | emotionally | Editorial/lifestyle, serif display + sans body, muted/pastel colors, generous line-height, photography-heavy |
+
+## Clarifying Questions per Term
+
+- 깔끔: "Notion처럼 따뜻한 깔끔함인지, Vercel처럼 차가운 깔끔함인지요?"
+- 모던: "다크 모드 + 날카로움(Linear)인지, 화이트 + 미니멀(Vercel)인지요?"
+- 고급: "브랜드 고급감(Apple/Stripe)인지, 패션 럭셔리(Art Deco)인지요?"
+- 심플: "기능이 적은 건지, 기능은 많지만 화면이 심플해 보이길 원하는 건지요?"
+
+## Quick-Match Table
+
+Rapid lookup: user word → concrete starting point.
+
+| User (KO) | User (EN) | Start From | Dark? | Radius | Density | Font |
+|------------|-----------|------------|-------|--------|---------|------|
+| 깔끔하게 | Clean | Notion or Vercel | No | 8px | 4-7 | Geist / Pretendard |
+| 모던하게 | Modern | Linear or Vercel | Yes | 6px | 4-7 | Geist / Outfit |
+| 고급스럽게 | Premium | Apple or Stripe | Either | 0-4px | 1-3 | Satoshi / system thin-300 |
+| 심플하게 | Simple | Vercel | Either | 0px | 1-3 | Geist |
+| 따뜻하게 | Warm | Notion or Toss | No | 12px | 4-7 | Pretendard / Cabinet Grotesk |
+| 재미있게 | Fun | Figma | No | 16px+ | 4-7 | Custom grotesque |
+| 전문적으로 | Professional | Linear or GitHub | Either | 6px | 4-7 | Geist / Outfit |
+| 대담하게 | Bold | Neobrutalism | No | 0px | 4-7 | Black 900 |
+| 감성적으로 | Aesthetic | Editorial | No | 0-4px | 1-3 | Serif display |
+| 트렌디하게 | Trendy | Ask for reference | Either | 12px | 4-7 | Variable font |
+
+## Font Selection Guidelines
+
+- **Typography stance (UX-TYPE-01)**: sans by default. Use serif only when the brief, brand system, or stated editorial/premium rationale supports it; do not inject one serif word into an otherwise sans headline for spice. When serif is justified (AI-product/editorial/research/trust surfaces), use the three-role system — display serif at light weights 330-400 + sans UI + mono accent — never as a bare AI-premium shortcut ("tasteslop"); gates in `ima2-front` `aesthetics.md`.
+- **Primary default**: Geist (modern SaaS, Vercel ecosystem)
+- **Korean-first**: Pretendard. Close alternatives: SUIT, Wanted Sans, LINE Seed KR, Noto Sans KR, Spoqa Han Sans Neo, Source Han Sans KR.
+- **Light centered Korean hero**: 300-400 weight is display-only (>= ~40px) for FE-HERO-LIGHT-CENTER-01.
+- **Warm/editorial**: Outfit or Cabinet Grotesk
+- **Premium/luxury**: Satoshi or system thin weights
+- **Korean serif display**: MaruBuri (Naver) 400-600 for editorial Hangul headlines, paired with Pretendard UI.
+- **Avoid defaulting to Inter** (DEFAULT) — #1 AI-generated UI tell.

package/skills/ima2-uiux/references/layout-macrostructures.md

@@ -0,0 +1,54 @@
+## 1. Layout Composition Patterns
+
+Select the layout that matches the product surface. Provide the CSS grid template.
+
+### Sidebar + Content (Dashboard default)
+```css
+display: grid;
+grid-template-columns: 256px 1fr; /* 64px when collapsed */
+grid-template-rows: auto 1fr;
+```
+**Use:** Dashboards, admin panels, docs. **Mobile collapse:** Sidebar becomes hamburger overlay or bottom nav.
+
+### Holy Grail (Three-column)
+```css
+display: grid;
+grid-template-columns: 200px 1fr 200px;
+grid-template-areas: "header header header" "left main right" "footer footer footer";
+```
+**Use:** Traditional websites with left/right sidebars. **Mobile collapse:** Stack vertically, hide sidebars behind toggles.
+
+### Responsive Card Grid
+```css
+display: grid;
+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+gap: 24px;
+```
+**Use:** Product listings, galleries, feature grids. **Mobile collapse:** Automatic — 1 col mobile, 2 tablet, 3+ desktop. Zero media queries.
+
+### Dashboard (Sidebar + Metrics + Content)
+```css
+.shell { display: grid; grid-template-columns: 256px 1fr; }
+.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
+.content { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
+```
+**Metric cards:** Primary number 28-32px, comparison 14px, ONE visual element per card (sparkline OR trend arrow, not both).
+
+### Bento Grid
+```css
+display: grid;
+grid-template-columns: repeat(4, 1fr);
+grid-auto-rows: minmax(180px, auto);
+gap: 16px;
+/* Feature items span 2 cols or 2 rows */
+```
+**Use:** Feature showcases, portfolio, marketing sections. **Mobile collapse:** Stack to single column, feature items full-width.
+
+### Master-Detail
+```css
+display: grid;
+grid-template-columns: 320px 1fr;
+```
+**Use:** Email, chat, file managers, list-with-preview. **Mobile collapse:** List view only, tap opens detail full-screen.
+
+---