gilles/claude-code-best-practice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

presentation/learning-journey: split 2 combined chips into 4 on slide 2

Browse Source 
Replaced `hallucination prompt engineering` with `hallucination` (amber)
and `prompt engineering` (green). Replaced `one shot AI slop` with
`short prompting` (amber) and `AI slop` (green). Slide 2 now shows 17
chips. Color distribution: 4 blue / 4 purple / 5 green / 4 amber — no
color exceeds 5. New chips placed in rows 1b and 3b with chaotic-scatter
positioning (-5° to +5° rotation, 0.95–1.05rem font sizes).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shayan Rais
2026-04-19 11:57:14 +05:00
parent 27df25fb04
commit 705a681a4a
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/learning-journey/index.html
+9 -3
View File
@@ -163,21 +163,27 @@
<span style="position: absolute; top: 2%; left: 45%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">agentic engineering</span>
<span style="position: absolute; top: 6%; left: 72%; transform: rotate(-6deg); background: #e65100; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hallucination prompt engineering</span>
<span style="position: absolute; top: 5%; left: 72%; transform: rotate(-5deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">hallucination</span>
<!-- Row 1b -->
<span style="position: absolute; top: 11%; left: 68%; transform: rotate(4deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">prompt engineering</span>
<!-- Row 2 -->
<span style="position: absolute; top: 18%; left: 3%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.1rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context engineering</span>
<span style="position: absolute; top: 20%; left: 35%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 7px 14px; border-radius: 24px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context bloat</span>
<span style="position: absolute; top: 17%; left: 60%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">progressive disclosure</span>
<span style="position: absolute; top: 17%; left: 58%; transform: rotate(4deg); background: #1565c0; color: #fff; padding: 11px 22px; border-radius: 24px; font-size: 1.3rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">progressive disclosure</span>
<!-- Row 3 (middle) -->
<span style="position: absolute; top: 35%; left: 8%; transform: rotate(-5deg); background: #2e7d32; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 1.15rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">context rot</span>
<span style="position: absolute; top: 37%; left: 30%; transform: rotate(6deg); background: #7b1fa2; color: #fff; padding: 12px 24px; border-radius: 24px; font-size: 1.4rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">orchestration</span>
<span style="position: absolute; top: 33%; left: 60%; transform: rotate(-4deg); background: #e65100; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">one shot AI slop</span>
<span style="position: absolute; top: 33%; left: 60%; transform: rotate(-3deg); background: #e65100; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">short prompting</span>
<!-- Row 3b -->
<span style="position: absolute; top: 42%; left: 62%; transform: rotate(5deg); background: #2e7d32; color: #fff; padding: 9px 18px; border-radius: 24px; font-size: 1.05rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">AI slop</span>
<!-- Row 4 -->
<span style="position: absolute; top: 52%; left: 2%; transform: rotate(3deg); background: #7b1fa2; color: #fff; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">MCP</span>