From 82ac7fc9f360e94098df95e7af8e8598632279ba Mon Sep 17 00:00:00 2001 From: Shayan Rais Date: Sun, 19 Apr 2026 12:28:22 +0500 Subject: [PATCH] .claude/agents/presentation-learning-journey: record hero-tier chip hierarchy pattern Document inline styling approach for dominant/supporting chip tiers on word-cloud slides: hero chips use 1.5-1.6rem / weight 800 / glow box-shadow; supporting chips use 0.9-1.0rem / weight 600 / plain shadow. No new CSS classes needed. Co-Authored-By: Claude --- .claude/agents/presentation-learning-journey.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.claude/agents/presentation-learning-journey.md b/.claude/agents/presentation-learning-journey.md index 1900948..fed24fd 100644 --- a/.claude/agents/presentation-learning-journey.md +++ b/.claude/agents/presentation-learning-journey.md @@ -160,5 +160,6 @@ After completing changes, report to the user: - Current level transitions (which slide carries which `data-level`) - Any tick-label or `LEVELS` map changes +- **2026-04-19 hero-tier chip visual hierarchy**: when a word-cloud slide needs a dominant/supporting split, introduce a hero tier by: (1) increasing font-size to ~1.5-1.6rem and font-weight to 800, (2) adding more padding (14px 28px vs 8px 16px), (3) using a stronger box-shadow with a colored glow (`0 4px 18px rgba(R,G,B,0.45), 0 0 0 2px rgba(R,G,B,0.2)` — the outer ring acts as a subtle halo), and (4) slightly increasing border-radius (28px vs 20px so the pill looks "fatter"). Supporting chips use padding 7-8px 14-16px, font-size 0.9-1.0rem, weight 600, and a plain `0 2px 6px rgba(0,0,0,0.18)` shadow. No new CSS classes are needed — all styling is inline on each ``. When squinting, the hero chips should be immediately readable as headlines; supporting chips recede into background. Color rebalancing rule when switching chip tiers: confirm each chip's target tier/color before editing — "harness" and "compaction" moved from blue hero to purple supporting; "agentic engineering", "orchestration", "dumb zone" moved from their previous colors to blue hero. Position re-scatter tip: space hero chips ~15-20% apart vertically and distribute them across left/right/centre columns so no two heroes are adjacent; fill gaps between heroes with supporting chips at 8-12% vertical spacing. - **2026-04-19 chip-splitting pattern (slide 2 jargon cloud)**: when splitting one combined-jargon chip into two, keep the first chip at the original position (slightly smaller font/padding to fit), and place the second chip in a new "Row Nb" at a top offset ~6-8% lower and a left offset ~2-4% inward from the right edge. This creates a natural staggered sub-cluster. Color rebalancing rule: when removing amber chips and adding replacements, assign new chips to whichever colors are below the median count — target no color exceeding 5 chips. Final distribution for 17 chips: 4 blue / 4 purple / 5 green / 4 amber. The `progressive disclosure` chip was nudged 2% left (60%→58%) to avoid visual crowding with the newly inserted `prompt engineering` chip in Row 1b. - **2026-04-19 chip overlap check method**: after any chip insertion, mentally walk each new chip's bounding box against its neighbors — chip height is roughly `padding-top + padding-bottom + font-size * line-height` ≈ 38-46px at 0.9-1.3rem. A 6-9% vertical gap on a 480px min-height container is ~29-43px which is tight but sufficient for same-column chips with different left offsets. If left offsets are within 15% of each other, require at least 8% vertical gap.