diff --git a/packages/pen-ai-skills/skills/knowledge/icon-catalog.md b/packages/pen-ai-skills/skills/knowledge/icon-catalog.md
index 6156b835f..a8aec2862 100644
--- a/packages/pen-ai-skills/skills/knowledge/icon-catalog.md
+++ b/packages/pen-ai-skills/skills/knowledge/icon-catalog.md
@@ -8,17 +8,44 @@ budget: 1000
 category: base
 ---
 
-ICONS:
+ICONS — ALWAYS USE icon_font, NEVER `path` NODES:
 
-- Use "path" nodes, size 16-24px. ONLY use Feather icon names — PascalCase + "Icon" suffix (e.g. "SearchIcon").
-- System auto-resolves names to SVG paths. "d" is replaced automatically.
-- NEVER use emoji as icons. Use icon_font nodes for lucide icons.
+```json
+{
+  "type": "icon_font",
+  "name": "Search Icon",
+  "iconFontName": "search",
+  "iconFontFamily": "lucide",
+  "width": 20,
+  "height": 20,
+  "fill": [{ "type": "solid", "color": "#64748B" }]
+}
+```
 
-ICON_FONT NODES:
+- Sizes: 14 / 20 / 24px. `fill` is the icon color (string or fill array).
+- Icon-only buttons: `frame(w=44, h=44, layout=horizontal, alignItems=center, justifyContent=center)` containing one `icon_font`.
+- Use lucide names from the list below. NEVER invent names — unknown names fall back to a small circle on canvas.
 
-- Use icon_font type with iconFontName for lucide icons (e.g. iconFontName="search", "bell", "user").
-- Sizes: 14/20/24px. Fill can be a color string.
-- Icon-only buttons: frame(w=44, h=44, layout=none) > icon_font(x=12, y=12)
+DO NOT use `path` nodes for icons. The legacy "PascalCase + Icon suffix on a path node" pattern is bug-prone:
+when the model wraps it in a frame with a generic child name like "Icon Path" or "Search Icon Path", the resolver
+cannot recover the iconic word and the node renders as a placeholder circle. Stick to `icon_font`.
+
+ROLE → ICON NAME MAP (use these exact names — common slips below):
+
+- Cart tab / shopping cart → `shopping-cart` (NEVER `shopping-bag` for a checkout/cart action)
+- Bag / tote / package → `shopping-bag`
+- Price / money / currency → `dollar-sign` (NOT `dollar`, NOT `currency`)
+- Search → `search` (NOT `magnifier`, `magnifying-glass`, `find`)
+- Profile / account → `user` (NOT `profile`, `account`)
+- Home / house → `house` or `home`
+- Orders / receipts → `clipboard-list` or `receipt`
+- Notifications → `bell` (NOT `notification`)
+- Filter → `filter` or `sliders` (NOT `funnel`)
+- Location pin → `map-pin` (NOT `pin`, NOT `location`)
+- Time / delivery time → `clock` (NOT `timer`)
+- Rating → `star` (NOT `rating`)
+- Favorites → `heart` (NOT `favorite`, NOT `like`)
+- Pizza category → `pizza`. Sushi → `fish`. Burger → `hamburger`. Healthy → `salad`. Dessert/cake → `cake`. Coffee → `coffee`. Drink → `cup-soda`. Restaurant → `utensils-crossed`. Food (generic) → `utensils`.
 
 COMMON LUCIDE ICON NAMES:
 search, bell, user, heart, star, plus, x, check, chevron-right, chevron-left, chevron-down, chevron-up,
@@ -36,4 +63,5 @@ play, pause, skip-forward, skip-back, volume-2, mic,
 github, twitter, instagram, facebook, linkedin, youtube,
 globe, wifi, bluetooth, monitor, smartphone, tablet, cpu, database, server, hard-drive,
 code, terminal, git-branch, git-commit, git-pull-request,
-alert-circle, alert-triangle, info, help-circle, check-circle, x-circle
+alert-circle, alert-triangle, info, help-circle, check-circle, x-circle,
+pizza, fish, hamburger, salad, cake, coffee, cup-soda, utensils, utensils-crossed, beef, croissant, apple, cookie, ice-cream-cone, banana, carrot, wheat, soup, donut
diff --git a/packages/pen-ai-skills/skills/phases/generation/layout.md b/packages/pen-ai-skills/skills/phases/generation/layout.md
index e7dd6fa36..fef29301c 100644
--- a/packages/pen-ai-skills/skills/phases/generation/layout.md
+++ b/packages/pen-ai-skills/skills/phases/generation/layout.md
@@ -21,6 +21,7 @@ LAYOUT ENGINE (flexbox-based):
 - Two-column: horizontal frame - two child frames each "fill_container" width.
 - Keep hierarchy shallow: no pointless wrappers. Only use wrappers with visual purpose (fill, padding).
 - Section root: width="fill_container", height="fit_content", layout="vertical".
+- TRANSPARENT INNER SECTIONS — interior section wrappers (Header, Search Section, Categories Section, Near You Section, etc.) MUST have `fill: []` (transparent / inherit page bg). Adding an explicit fill like `#FFFFFF` on inner sections creates an unwanted "white card" against a colored page bg. Only use an explicit fill when the section is INTENTIONALLY a card with its own surface (a promo banner, an inset card, a different surface tone). Default to `fill: []` and only opt into a fill when you want a visible surface boundary.
 - FORMS: ALL inputs AND primary button MUST use width="fill_container". Vertical layout, gap=16-20.
 
 HORIZONTAL ROW WIDTH MATH (CRITICAL — prevents off-canvas clipping):