ima2-gen 2.0.15 → 2.0.16

package/skills/ima2-uiux/references/typography-line-breaks.md

@@ -0,0 +1,193 @@
+# Typography Line Breaks — Design Judgment Guide
+
+When to apply text wrapping control, how to evaluate line break quality, and what to check during visual verification.
+
+Read `dev-frontend/references/core/typography-wrapping.md` for the CSS implementation.
+
+---
+
+## 1. The Problem
+
+AI-generated and unreviewed web pages share a common tell: **uncontrolled text wrapping**. Headings break at arbitrary points, creating orphaned words, lopsided rags, and awkward visual rhythm.
+
+**Before (slop):**
+```
+Connects to what you
+already run                    ← "already run" orphaned, feels broken
+```
+
+**After (controlled):**
+```
+Connects to what
+you already run                ← Balanced, intentional
+```
+
+The difference is subtle but immediately signals whether a page was designed or merely generated.
+
+---
+
+## When Each Tool Applies
+
+| Element | Tool | Rationale |
+|---------|------|-----------|
+| Hero headline | `text-wrap: balance` + `max-width: 40-45ch` | High-visibility, must look intentional on every viewport |
+| **Hero subtitle/description** | **`text-wrap: balance`** + `max-width: 35-40ch` | **Short descriptor — `pretty` is insufficient at 1-2 lines** |
+| Section title | `text-wrap: balance` + `max-width: 50-55ch` | Consistency across sections |
+| Card title | `text-wrap: balance` + `max-width: 30-35ch` | Tight containers need compact control |
+| **Card description (1-3 lines)** | **`text-wrap: balance`** + `max-width: 30-35ch` | **Short descriptor — orphans extremely visible in small containers** |
+| **Caption / label text** | **`text-wrap: balance`** + `max-width: 25-30ch` | **Short descriptor — same reason** |
+| Body paragraph (4+ lines) | `text-wrap: pretty` + `max-width: 65ch` | Orphan prevention at paragraph end |
+| CTA/button label | Manual — keep to 1 line | Never let a CTA break across lines |
+| Navigation links | No wrapping needed | Always single-line |
+| Stat label | `max-width: 20ch` | Keep compact under the number |
+| Badge/tag text | `white-space: nowrap` | Never wrap |
+
+### Short Descriptors — The Missing Category
+
+Text that is **1-3 lines long** is neither a heading nor a body paragraph. Examples:
+- Hero subtitle / description
+- Card description / preview text
+- Product one-liner
+- Testimonial snippet
+- Feature description under an icon
+
+**Rule: Short descriptors MUST use `text-wrap: balance`, not `pretty`.**
+
+`text-wrap: pretty` optimizes the last few lines of long paragraphs. On 1-2 line text, the algorithm has nothing to redistribute — orphans pass through unchanged. `balance` distributes characters evenly across ALL lines, which is exactly what short text needs.
+
+**Before (pretty on short text — orphan passes through):**
+```
+마다가스카르 바닐라 시럽과 벨벳 스팀밀크의 조
+화.                                              ← "화." orphaned
+```
+
+**After (balance on short text — redistributed):**
+```
+마다가스카르 바닐라 시럽과
+벨벳 스팀밀크의 조화.                             ← balanced
+```
+
+---
+
+## Heading Break Quality Criteria
+
+When reviewing a heading visually, check:
+
+1. **No orphaned single word** — The last line should have at least 2 words (or ~33% of the longest line's length)
+2. **Balanced distribution** — Line lengths should be roughly equal, not one long line + one short stub
+3. **Semantic grouping** — Breaks should happen between thought units, not in the middle of a phrase
+4. **Viewport resilience** — The heading should look good at 390px, 768px, 1024px, AND 1440px, and at ARBITRARY widths between them (drag-resize / split-screen check — see the dynamic rewrap layer below)
+5. **Language-aware** — Korean (한글) headings with `word-break: keep-all` to prevent mid-word breaks
+
+**Bad breaks (cut mid-phrase):**
+```
+Everything you check in Datadog, without leaving
+vim                                               ← orphan
+```
+
+**Good breaks (between thought units):**
+```
+Everything you check in Datadog,
+without leaving vim                               ← balanced, semantic
+```
+
+---
+
+## Dynamic Rewrap Judgment (verified 2026-07-07)
+
+Text must break at natural phrase boundaries at ANY width, not just canonical
+breakpoints — containers resize continuously (drag-resizable panels,
+split-screen halves, foldables, mobile URL-bar dvh changes, container-query
+crossings). Judgment layer on top of the criteria above:
+
+- Breaks are chosen by the browser at render width; a heading that breaks
+  semantically at 390/768/1024/1440 can still orphan at 700px. Judge text in
+  CONTAINERS (sidebar, modal, half-window), not only device presets.
+- Prefer break-opportunity control (`keep-all`, `balance`, `max-width` in
+  `ch`) over width-specific hacks (`<br>`, manual media-query text swaps) —
+  hacks guarantee bad breaks at in-between widths.
+- Korean note: `text-wrap` only chooses among EXISTING break opportunities;
+  with `keep-all`, opportunities are 어절 boundaries — verify long 어절 and
+  mixed ko/Latin strings don't overflow narrow chips/buttons.
+- Mechanics + verification checklist (container-width sweep, dvh/zoom,
+  overflow asserts): `dev-frontend/references/core/typography-wrapping.md`
+  § Dynamic-Viewport Verification and
+  `dev-frontend/references/core/responsive-viewport.md` (container queries,
+  split-screen band).
+
+## Visual Verification Additions
+
+Add these checks to the UX pre-flight:
+
+- [ ] Hero headline renders balanced on desktop (1440px) AND mobile (390px)
+- [ ] No heading has an orphaned single word on the last line
+- [ ] Section titles do not exceed 55ch per line
+- [ ] Body paragraphs do not exceed 65ch per line
+- [ ] CTA buttons do not break across lines at any viewport
+- [ ] Korean headlines preserve word integrity (no mid-syllable breaks)
+- [ ] `text-wrap: balance` is applied to all headings globally
+
+---
+
+## Common Mistakes
+
+| Mistake | Why it happens | Fix |
+|---------|---------------|-----|
+| Using `<br>` for line breaks | Works at one viewport, breaks at others | Use `text-wrap: balance` instead |
+| `max-width` in `px` | Doesn't adapt to font size changes | Use `ch` units |
+| No `max-width` on headings | Lines stretch full container width | Add `max-width: 45-55ch` |
+| `text-wrap: balance` on body text | Performance cost, limited to ~6 lines | Use `text-wrap: pretty` for paragraphs |
+| Ignoring mobile line breaks | Heading looks good on desktop but orphans on mobile | Test at 390px |
+| Same `max-width` for all heading levels | Different font sizes produce different visual widths | Scale `max-width` by heading level |
+
+---
+
+## Korean Typography Notes
+
+```css
+[lang="ko"] {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+[lang="ko"] h1, [lang="ko"] h2 {
+  text-wrap: balance;
+  word-break: keep-all;
+}
+```
+
+`word-break: keep-all` is critical for Korean — without it, browsers break Hangul at any syllable boundary, creating unreadable mid-word splits.
+
+### Korean Orphan Criteria (MANDATORY)
+
+Korean text with `word-break: keep-all` prevents mid-word breaks but creates a specific orphan pattern: the last word gets pushed to a new line alone. This is especially visible with verb endings.
+
+**Korean last-line minimum:** The last line must contain at least **4 characters (2 syllable blocks)** or **33% of the longest line's width**. A line with only "합니다.", "화.", "입니다.", or any 1-3 character fragment is ALWAYS wrong.
+
+**Common Korean orphan patterns (all failures):**
+```
+직접 로스팅한 싱글 오리진 원두와 제철 디저트를 매일 준비
+합니다.           ← FAIL: "합니다." alone (3 chars + punctuation)
+
+마다가스카르 바닐라 시럽과 벨벳 스팀밀크의 조
+화.               ← FAIL: "화." alone (1 char + punctuation)
+
+16시간 저온 추출 콜드브루에 부드러운 우유를 더했습니
+다.               ← FAIL: "다." alone (1 char + punctuation)
+```
+
+**Fix priority for Korean short text:**
+1. Use `text-wrap: balance` (not `pretty`) — this alone fixes most cases
+2. If `balance` still orphans, adjust `max-width` by ±2-3ch to shift the break point
+3. As last resort, rewrite the copy to avoid the orphan
+
+**`text-wrap: pretty` does NOT solve Korean orphans in short text.** The `pretty` algorithm targets the last 4-8 lines of long paragraphs. On 1-3 line Korean text, it has no effect — the orphan passes through unchanged. This is the single most common Korean typography failure in AI-generated pages.
+
+### `-webkit-line-clamp` Conflict
+
+`-webkit-line-clamp` (used for "show 2 lines with ellipsis") **disables `text-wrap` entirely**. The browser switches to a legacy layout mode where `balance` and `pretty` have no effect.
+
+If you need line clamping AND orphan control:
+- Accept that clamped text will have uncontrolled wrapping, OR
+- Set `max-width` carefully so the natural break avoids orphans, OR
+- Use JavaScript-based truncation that preserves `text-wrap`

package/skills/ima2-uiux/references/ux-preflight.md

@@ -0,0 +1,65 @@
+# UX Preflight Checklist
+
+Run this checklist **before delivery** of any UI feature. Each item is a binary pass/fail.
+
+---
+
+## 1. State Coverage
+
+| State | Check | Pass? |
+|-------|-------|-------|
+| Empty | First-time user sees helpful guidance, not a blank screen | |
+| Loading | Skeleton or spinner matches final layout shape | |
+| Error | User knows what failed AND how to recover | |
+| Partial | Mixed loaded/pending content is visually coherent | |
+| Success | Confirmation is visible without being disruptive | |
+| Offline | Graceful degradation or clear "offline" indicator | |
+
+## Onboarding
+
+- [ ] First-run experience guides without blocking
+- [ ] Progressive disclosure: advanced features hidden until needed
+- [ ] Empty states include a clear primary action ("Create your first...")
+- [ ] No dead-end screens (every state has a next action)
+
+## Error States
+
+- [ ] Error messages are specific (not "Something went wrong")
+- [ ] Recovery action is available (retry, go back, contact support)
+- [ ] Form errors appear inline, not only as toast/alert
+- [ ] Network errors distinguish timeout from server error
+
+## Loading States
+
+- [ ] Skeleton loaders match actual content layout
+- [ ] No layout shift when content loads
+- [ ] Long operations show progress (determinate > indeterminate)
+- [ ] Optimistic UI used where safe (toggling, starring, archiving)
+
+## Interaction Feedback
+
+- [ ] Every clickable element has hover + active states
+- [ ] Destructive actions require confirmation
+- [ ] Undo available for reversible actions
+- [ ] Focus states visible for keyboard navigation
+
+## Responsive Verification
+
+- [ ] Test at 390px (mobile), 768px (tablet), 1440px (desktop)
+- [ ] No horizontal scroll at any viewport
+- [ ] Touch targets ≥ 44px on mobile
+- [ ] Navigation is accessible at all breakpoints
+
+## Typography
+
+- [ ] Headings render balanced (no orphaned single word)
+- [ ] Body text max-width ≤ 65ch
+- [ ] Line height comfortable for body (1.5-1.7) and headings (1.1-1.3)
+- [ ] CJK text uses `word-break: keep-all` where appropriate
+
+## Accessibility Minimum
+
+- [ ] All images have meaningful `alt` text (or `alt=""` for decorative)
+- [ ] Color contrast passes WCAG AA (4.5:1 text, 3:1 large text)
+- [ ] Skip-to-content link present
+- [ ] Forms have associated labels

package/skills/ima2-uiux/references/ux-states.md

@@ -0,0 +1,197 @@
+## 1. Onboarding & First-Run Patterns
+
+Design first-run experiences that deliver value immediately.
+
+**Rules:**
+- Enable action before profile completion. Let users DO something valuable first.
+- Deliver core value within 60 seconds of first interaction.
+- Collect only essential data on Day 1. Gather intent early (goal/use case) to personalize.
+- Make every tutorial, walkthrough, and setup step skippable.
+- Provide starter content, templates, or sample data so the first screen is never empty.
+
+### Welcome Screen Anatomy
+```
+┌─────────────────────────────────┐
+│  [Brand mark / illustration]    │
+│                                 │
+│  Headline (value proposition)   │
+│  Subtext (1 line, what to do)   │
+│                                 │
+│  [Primary CTA: Start Action]    │
+│  Skip / Later (text link)       │
+└─────────────────────────────────┘
+```
+
+### Feature Discovery Patterns
+
+| Pattern | When to Use | When to Avoid |
+|---------|-------------|---------------|
+| Contextual tooltip | First time a feature appears | Already-discovered features |
+| Coach mark (spotlight) | Complex multi-step workflows | Simple, self-explanatory UI |
+| Feature tour (multi-step) | Major new feature release | First-time onboarding (too heavy) |
+| Empty-state-as-onboarding | Dashboard/list views with no data | Views that always have data |
+| Progressive profile | Collecting user preferences over time | One-time setup flows |
+
+### Permission Request Timing
+Ask for permissions at the moment of need, not during onboarding. Explain why before asking: "To send you updates, we need notification access."
+
+---
+
+## 2. Empty State Design
+
+Every major view MUST have a designed empty state. Never leave a screen blank or show a generic "No data" message.
+
+### Three Types
+
+| Type | When | Tone |
+|------|------|------|
+| Informational | Content absent, user hasn't acted yet | Neutral, guiding: "Add your first project to get started" |
+| Action-oriented | Feature requires user input to populate | Encouraging, CTA-forward: "Create your first workspace" |
+| Celebratory | All items completed/resolved | Positive reinforcement: "All caught up!" |
+
+### Composition Template
+```
+┌─────────────────────────────────┐
+│      [Illustration / Icon]      │
+│     (contextual, not generic)   │
+│                                 │
+│   Headline (short, specific)    │
+│   Subtext (1 line, optional)    │
+│                                 │
+│   [Primary CTA button]          │
+│   Secondary link (optional)     │
+└─────────────────────────────────┘
+```
+
+**Rules:**
+- Tailor copy to the specific scenario: first-use vs empty-search vs completed-tasks each get different messages.
+- Use direct language ("Your cart is empty") not vague ("Nothing here yet").
+- Single prominent CTA. Never show multiple competing actions.
+- Match visuals to design system (colors, fonts, spacing, illustration style).
+- For search results: suggest alternatives ("Try adjusting filters or checking spelling").
+- For first-use: provide starter templates or sample data to reduce uncertainty.
+- Use ARIA live regions to notify assistive technology when content state changes.
+
+---
+
+## 3. Error State Taxonomy
+
+Every error message follows: (1) what happened, (2) why, (3) what to do next.
+
+| Pattern | When | Recovery | Severity |
+|---------|------|----------|----------|
+| Inline validation | Structured input (email, password) | Real-time feedback as user types | Preventative |
+| Toast notification | Low-severity temporary errors | Brief 3-5s non-modal, optional retry | Ambient |
+| Banner | System-wide warnings (maintenance, degraded) | Persistent, dismissible, with details link | Ambient |
+| Full-page error | Critical system failure, content cannot load | Centered: Try Again + escape hatch | Interrupting |
+| Empty-state error | No search results, empty filtered lists | Suggest alternatives or creation paths | Informational |
+| Network failure | Lost connection | Enable offline mode where possible, auto-retry on reconnect | Interrupting |
+| Timeout | Server response > 10–15s | Offer Cancel + Keep Waiting | Interrupting |
+| Permission denied | User lacks role access | Offer Request Access or role upgrade info | Informational |
+| 404 Not Found | URL does not exist | Branded page + search bar + top nav links. Never a dead end | Informational |
+| Rate limiting | API limits exceeded | Banner with wait time + link to docs | Ambient |
+
+**Rules:**
+- Never use generic messages ("Invalid input"). Be specific ("Password must contain at least 8 characters").
+- Never blame the user. "Enter a valid email address" not "You entered an invalid email."
+- Every error needs one primary action (retry, fix, request access) and one optional escape hatch (home, support).
+- For multi-step forms: surface errors at each step, not at final submission.
+- Never rely on color alone for error indication. Pair red with icons AND text.
+- Match error tone to product surface: playful for casual apps, professional for finance/health.
+- Severity hierarchy: Preventative (inline) → Ambient (toast) → Interrupting (full-page). Use full-page ONLY for showstoppers.
+
+---
+
+## 4. Loading State Patterns
+
+### Skeleton Loaders
+- Match the skeleton to the real layout (same heights, widths, spacing).
+- Shimmer direction: left-to-right, single wave, 1.5–2s duration.
+- Animate with `background-position` on a gradient — not opacity flicker.
+- Show skeleton for a minimum of 300ms to avoid flash.
+
+### Decision Table
+
+| Scenario | Pattern | Details |
+|----------|---------|---------|
+| Page initial load | Skeleton | Match layout, show immediately |
+| Data refresh | Stale-while-revalidate | Show old data + subtle loading indicator |
+| Action result | Optimistic update | Apply change immediately, revert on error |
+| Long operation (> 3s) | Progress bar / percentage | Show estimated time if available |
+| Background process | Toast / status badge | Non-blocking notification |
+| Infinite scroll | Skeleton rows at bottom | 3–5 placeholder rows |
+
+### Skeleton → Content Transition
+Fade skeleton out, fade content in. Duration: 200ms. Never pop — the transition must feel continuous.
+
+---
+
+## 5. Progressive Disclosure
+
+Show ONLY essential information first. Defer advanced/optional content behind explicit user action.
+
+### Three Categories
+
+| Category | Mechanism | Example |
+|----------|-----------|---------|
+| Step-by-step | Sequential multi-stage | Checkout: shipping → method → payment → confirm |
+| Conditional | Hidden until explicitly requested | "Advanced Settings" toggle |
+| Contextual | Content surfaced based on prior input | Show company fields only after selecting "Business" |
+
+### UI Components for Disclosure
+
+| Component | Use For |
+|-----------|---------|
+| Accordion | Structured information (FAQ, settings groups) |
+| Tabs | Categorized content at the same level |
+| Conditional form fields | Show/hide based on prior input |
+| Tooltip / popover | Context help on hover/click |
+| "Show more" link | Optional fields in forms |
+| Lazy loading | Supplementary content on scroll |
+
+**Rules:**
+- Discoverability test: hidden features MUST be findable when needed. If users cannot discover advanced options, the pattern has failed.
+- Do NOT use progressive disclosure when users need to compare information simultaneously.
+- Do NOT hide critical safety information or destructive-action warnings.
+- Save progress at each disclosure step. Users must be able to return without losing work.
+- Default to simple. "Advanced Settings" collapsed by default.
+- For forms: show only required fields initially. Optional fields appear via "Show more options."
+- For dashboards: show summary KPIs first. Drill-down detail on click.
+- For settings: group into Basic (visible) and Advanced (collapsed).
+
+---
+
+## 6. Error Page Taxonomy
+
+| Page | Content | Tone |
+|------|---------|------|
+| **404** | Branded page + search bar + top nav + "popular pages" links | Friendly, helpful |
+| **500** | Branded page + "We're working on it" + status page link + retry button | Reassuring, transparent |
+| **Maintenance** | Branded page + estimated return time + status page link | Professional, time-bound |
+| **Offline** | Service worker cached page + "You're offline" + cached content list | Informative, functional |
+
+Rules:
+- Every error page maintains site branding (logo, colors)
+- Every error page has a path back (nav, home link, search)
+- Never show stack traces or technical errors to end users
+- 500 page: auto-retry with exponential backoff (2s, 4s, 8s) + manual retry button
+- Offline page: cache in service worker during first successful visit
+- Maintenance page: deploy as static HTML (doesn't depend on the broken server)
+
+### Service Worker Offline Shell
+
+```javascript
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('offline-v1').then(cache => cache.add('/offline.html'))
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request).catch(() => caches.match('/offline.html'))
+    );
+  }
+});
+```

package/skills/ima2-uiux/references/visual-hierarchy.md

@@ -0,0 +1,115 @@
+# Visual Hierarchy
+
+The arrangement of visual elements by importance so the viewer's eye follows a deliberate path: most important → supporting → peripheral. Hierarchy is created through six levers: **size, weight, color, spacing, position, density**.
+
+## 1. Size Scale
+
+```
+Level 1 (hero headline):   clamp(2.25rem, 4vw + 1rem, 4rem)
+Level 2 (section heading):  clamp(1.5rem, 2.5vw + 0.75rem, 2.5rem)
+Level 3 (subsection):       clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem)
+Level 4 (body):             1rem (16px base)
+Level 5 (caption/meta):     0.875rem
+Level 6 (legal/fine print): 0.75rem
+```
+
+- Adjacent levels must differ by at least 1.25x ratio (L1:L2 ≥ 1.5x, L2:L3 ≥ 1.25x)
+- Never use more than 4 levels on a single viewport screen
+- Hero headline ≥ 2x body size or it reads as a paragraph
+
+## 2. Weight Contrast
+
+| Role | Weight | Use |
+|------|--------|-----|
+| Primary heading | 700-800 | Hero, section titles |
+| Secondary heading | 600 | Subsection, card titles |
+| Body emphasis | 500-600 | Key phrases, inline bold |
+| Body text | 400 | Default reading text |
+| De-emphasized | 300-400 | Captions, timestamps, metadata |
+
+- Primary vs body weight difference ≥ 200 (e.g., 700 vs 400)
+- Never use weight alone to create hierarchy — pair with size
+- Display-scale exception: at display sizes, size contrast may replace weight
+  contrast; a 300-400 light headline is legal when >= 3x body size
+  (FE-HERO-LIGHT-CENTER-01). The 700-800 primary-heading row applies to
+  in-content headings, not display heroes.
+- Monospace/code blocks: weight 400-500 max
+
+## 3. Color Emphasis
+
+```
+Level 1 (primary):    var(--color-text-primary)    — full contrast, used sparingly
+Level 2 (secondary):  var(--color-text-secondary)  — 70-80% of primary contrast
+Level 3 (tertiary):   var(--color-text-tertiary)   — 50-60% of primary contrast
+Level 4 (disabled):   var(--color-text-disabled)    — 35-40% of primary contrast
+Accent:               var(--color-accent)           — reserved for ONE interactive element per viewport
+```
+
+- Accent color on max 1-2 elements per viewport (CTA + link, not more)
+- If everything is accent-colored, nothing is — the "purple wash" anti-pattern
+- Heading color ≠ body color unless intentionally monochrome
+- Background color creates hierarchy: white surface > gray surface > dark surface for cards
+
+## 4. Spacing as Hierarchy
+
+```
+Section gap (between major sections):  clamp(4rem, 8vw, 8rem)
+Subsection gap:                         clamp(2rem, 4vw, 4rem)
+Element group gap:                      1.5rem - 2rem
+Element gap (within a group):           0.5rem - 1rem
+Tight (label-to-input, icon-to-text):   0.25rem - 0.5rem
+```
+
+- More whitespace around an element = more important (isolation draws the eye)
+- Hero section: generous padding (≥ 6rem top/bottom) — signals "start here"
+- Dense sections contrast with sparse sections to create rhythm
+- Gap between sections > gap within sections > gap between elements (nesting principle)
+
+## 5. Position Priority
+
+| Position | Priority | Use |
+|----------|----------|-----|
+| Above the fold, center | Highest | Hero headline, primary CTA |
+| Above the fold, left | High | Navigation, brand mark |
+| Below fold, first scroll | Medium | Social proof, key features |
+| Mid-page | Standard | Detailed features, comparison |
+| Footer area | Low | Legal, secondary nav, contact |
+
+- Primary CTA must appear above the fold
+- Repeat CTA after every 2-3 sections on long pages
+- F-pattern for text-heavy pages, Z-pattern for marketing/landing
+- Mobile: stack in strict priority order (most important = topmost)
+
+## 6. Density Contrast
+
+| Section Type | Density | Purpose |
+|-------------|---------|---------|
+| Hero | Sparse (1-3 elements) | Focus attention on single message |
+| Social proof | Medium (logos + quote) | Build trust without overwhelming |
+| Features | Dense (grid/cards) | Information delivery |
+| CTA/pricing | Medium-sparse | Decision moment — clear options |
+| Testimonial | Sparse (1 quote + photo) | Emotional pause, breathing room |
+
+- Alternate dense/sparse sections to prevent fatigue
+- Never stack two dense sections without a sparse break
+- Sparse section immediately after hero creates "breathing room"
+
+## 7. Pre-commit Checklist
+
+- [ ] Exactly 1 element per viewport is the obvious focal point
+- [ ] Size ratio between heading levels ≥ 1.25x
+- [ ] Weight difference between heading and body ≥ 200
+- [ ] Accent color on ≤ 2 elements per viewport
+- [ ] Section gaps > internal gaps > element gaps (nesting principle)
+- [ ] Hero section has most whitespace on the page
+- [ ] Primary CTA is above the fold
+- [ ] Dense and sparse sections alternate
+- [ ] F or Z reading pattern identifiable by squinting
+- [ ] Color hierarchy has ≥ 3 distinct levels
+
+## 8. Cross-references
+
+- Size scale clamp values: `dev-frontend/references/core/aesthetics.md` §Typography
+- Section composition order: `layout-macrostructures.md`
+- Responsive transforms: `dev-frontend/references/core/layout-discipline.md`
+- Color tokens: `color-system.md`

package/ui/dist/.vite/manifest.json

@@ -1,6 +1,6 @@
 {
   "index.html": {
-    "file": "assets/index-CoxMOXAU.js",
+    "file": "assets/index-Dm3pFxV4.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
@@ -17,11 +17,11 @@
       "src/components/PromptLibraryPanel.tsx"
     ],
     "css": [
-      "assets/index-2oG6in1i.css"
+      "assets/index-J8yDF3Ch.css"
     ]
   },
   "src/components/GenerationRequestLogPanel.tsx": {
-    "file": "assets/GenerationRequestLogPanel-C_qvEUi2.js",
+    "file": "assets/GenerationRequestLogPanel-DnmUQdKR.js",
     "name": "GenerationRequestLogPanel",
     "src": "src/components/GenerationRequestLogPanel.tsx",
     "isDynamicEntry": true,
@@ -30,7 +30,7 @@
     ]
   },
   "src/components/NodeCanvas.tsx": {
-    "file": "assets/NodeCanvas-C67sLboA.js",
+    "file": "assets/NodeCanvas-CxpfIBI0.js",
     "name": "NodeCanvas",
     "src": "src/components/NodeCanvas.tsx",
     "isDynamicEntry": true,
@@ -42,7 +42,7 @@
     ]
   },
   "src/components/PromptImportDialog.tsx": {
-    "file": "assets/PromptImportDialog-DeQXsEEv.js",
+    "file": "assets/PromptImportDialog-BIxz_yEx.js",
     "name": "PromptImportDialog",
     "src": "src/components/PromptImportDialog.tsx",
     "isDynamicEntry": true,
@@ -55,7 +55,7 @@
     ]
   },
   "src/components/PromptImportDiscoverySection.tsx": {
-    "file": "assets/PromptImportDiscoverySection-CrwyUKYI.js",
+    "file": "assets/PromptImportDiscoverySection-BQTlPMME.js",
     "name": "PromptImportDiscoverySection",
     "src": "src/components/PromptImportDiscoverySection.tsx",
     "isDynamicEntry": true,
@@ -64,7 +64,7 @@
     ]
   },
   "src/components/PromptImportFolderSection.tsx": {
-    "file": "assets/PromptImportFolderSection-CToGMqYE.js",
+    "file": "assets/PromptImportFolderSection-Ds_Th9O3.js",
     "name": "PromptImportFolderSection",
     "src": "src/components/PromptImportFolderSection.tsx",
     "isDynamicEntry": true,
@@ -73,7 +73,7 @@
     ]
   },
   "src/components/PromptLibraryPanel.tsx": {
-    "file": "assets/PromptLibraryPanel-Db3xEPM_.js",
+    "file": "assets/PromptLibraryPanel-Rs4l45pV.js",
     "name": "PromptLibraryPanel",
     "src": "src/components/PromptLibraryPanel.tsx",
     "isDynamicEntry": true,
@@ -85,7 +85,7 @@
     ]
   },
   "src/components/SettingsWorkspace.tsx": {
-    "file": "assets/SettingsWorkspace-BDk_1W-V.js",
+    "file": "assets/SettingsWorkspace-p1AZ6uT9.js",
     "name": "SettingsWorkspace",
     "src": "src/components/SettingsWorkspace.tsx",
     "isDynamicEntry": true,
@@ -94,7 +94,7 @@
     ]
   },
   "src/components/agent/AgentWorkspace.tsx": {
-    "file": "assets/AgentWorkspace-DAg_7zpY.js",
+    "file": "assets/AgentWorkspace-CtYt4SF5.js",
     "name": "AgentWorkspace",
     "src": "src/components/agent/AgentWorkspace.tsx",
     "isDynamicEntry": true,
@@ -103,7 +103,7 @@
     ]
   },
   "src/components/canvas-mode/index.ts": {
-    "file": "assets/index-p8egnGHk.js",
+    "file": "assets/index-0-_vgFGs.js",
     "name": "index",
     "src": "src/components/canvas-mode/index.ts",
     "isDynamicEntry": true,
@@ -112,7 +112,7 @@
     ]
   },
   "src/components/card-news/CardNewsWorkspace.tsx": {
-    "file": "assets/CardNewsWorkspace-Cdxn1ohU.js",
+    "file": "assets/CardNewsWorkspace-DN5cVqG5.js",
     "name": "CardNewsWorkspace",
     "src": "src/components/card-news/CardNewsWorkspace.tsx",
     "isDynamicEntry": true,
@@ -121,7 +121,7 @@
     ]
   },
   "src/components/prompt-builder/PromptBuilderPanel.tsx": {
-    "file": "assets/PromptBuilderPanel-DjvVdAie.js",
+    "file": "assets/PromptBuilderPanel-C2R3ObtR.js",
     "name": "PromptBuilderPanel",
     "src": "src/components/prompt-builder/PromptBuilderPanel.tsx",
     "isDynamicEntry": true,