updated presentation

This commit is contained in:
Shayan Rais
2026-02-12 22:02:38 +05:00
parent ef233afc7c
commit 0f3aeb4230
8 changed files with 101 additions and 41 deletions
+21 -1
View File
@@ -52,6 +52,13 @@ After changes, verify:
3. No duplicate slide numbers exist 3. No duplicate slide numbers exist
4. The `totalSlides` JS variable matches the actual count (it's auto-computed from DOM) 4. The `totalSlides` JS variable matches the actual count (it's auto-computed from DOM)
5. Any `goToSlide()` calls in the TOC point to correct slide numbers 5. Any `goToSlide()` calls in the TOC point to correct slide numbers
6. Weighted slide titles in `vibe-to-agentic-framework` match actual `<h1>` titles in `presentation/index.html`
7. Agent identifiers are consistent across examples (use `frontend-engineer` / `backend-engineer`; do not introduce aliases like `frontend-eng`)
8. Hook references remain canonical (`15 hook events`) in presentation-facing content
9. Do not manually insert `.weight-badge` markup in slide HTML (badges are JS-injected)
10. Settings precedence text must separate user-writable override order from enforced policy (`managed-settings.json`)
11. If slide 32 is touched, ensure skill frontmatter coverage includes `context: fork`
12. Keep the framework skill identity canonical: `presentation/vibe-to-agentic-framework` (do not rename to variants)
### Step 5: Self-Evolution (after every execution) ### Step 5: Self-Evolution (after every execution)
@@ -74,7 +81,15 @@ Update `.claude/skills/presentation/presentation-structure/SKILL.md`:
- **Weight Distribution table**: Update section slide ranges and total weights to match the current presentation. - **Weight Distribution table**: Update section slide ranges and total weights to match the current presentation.
- **Section divider examples**: If section divider format changed, update the example HTML. - **Section divider examples**: If section divider format changed, update the example HTML.
#### 5c. Update This Agent (yourself) #### 5c. Cross-Doc Consistency (when claims change)
If your slide edits change canonical claims that are also documented elsewhere, sync these files in the same execution:
- `reports/claude-settings.md` for settings precedence and hook counts
- `.claude/hooks/HOOKS-README.md` for hook-event totals and names
- `reports/claude-global-vs-project-settings.md` for settings precedence language
#### 5d. Update This Agent (yourself)
If you encountered an edge case, discovered a new pattern, or found that the workflow needed adjustment, append a brief note to the "Learnings" section below. This helps future invocations avoid the same issues. If you encountered an edge case, discovered a new pattern, or found that the workflow needed adjustment, append a brief note to the "Learnings" section below. This helps future invocations avoid the same issues.
@@ -82,6 +97,11 @@ If you encountered an edge case, discovered a new pattern, or found that the wor
_Findings from previous executions are recorded here. Add new entries as bullet points._ _Findings from previous executions are recorded here. Add new entries as bullet points._
- Hook-event references drifted across files. Treat `15 hook events` as canonical and sync all docs in the same run.
- Do not use shorthand agent names in examples (`frontend-eng`). Keep identifiers exactly aligned with agent definitions.
- Never hardcode `.weight-badge` in slide HTML; badges are runtime-injected.
- Keep the framework skill name stable as `vibe-to-agentic-framework` to avoid broken skill references.
## Critical Requirements ## Critical Requirements
1. **Sequential Numbering**: After any add/remove/reorder, renumber ALL slides sequentially 1. **Sequential Numbering**: After any add/remove/reorder, renumber ALL slides sequentially
+28 -15
View File
@@ -1,17 +1,23 @@
# HOOKS-README # HOOKS-README
contains all the details, scripts, and instructions for the hooks contains all the details, scripts, and instructions for the hooks
## Hook Events Overview - [Official 9 Hooks](https://docs.claude.com/en/docs/claude-code/hooks-guide) ## Hook Events Overview - [Official 15 Hooks](https://docs.claude.com/en/docs/claude-code/hooks-guide)
Claude Code provides several hook events that run at different points in the workflow: Claude Code provides several hook events that run at different points in the workflow:
1. PreToolUse: Runs before tool calls (can block them) 1. SessionStart: Runs when Claude Code starts a new session or resumes one
2. PostToolUse: Runs after tool calls complete 2. SessionEnd: Runs when a Claude Code session ends
3. UserPromptSubmit: Runs when the user submits a prompt, before Claude processes it 3. UserPromptSubmit: Runs when the user submits a prompt
4. Notification: Runs when Claude Code sends notifications 4. PreToolUse: Runs before tool calls (can block them)
5. Stop: Runs when Claude Code finishes responding 5. PostToolUse: Runs after tool calls complete
6. SubagentStop: Runs when subagent tasks complete 6. PostToolUseFailure: Runs after tool calls fail
7. PreCompact: Runs before Claude Code is about to run a compact operation 7. PermissionRequest: Runs when Claude asks for a permission decision
8. SessionStart: Runs when Claude Code starts a new session or resumes an existing session 8. Notification: Runs when Claude Code sends notifications
9. SessionEnd: Runs when Claude Code session ends 9. Stop: Runs when Claude Code finishes responding
10. SubagentStart: Runs when a subagent task begins
11. SubagentStop: Runs when a subagent task completes
12. PreCompact: Runs before Claude runs context compaction
13. Setup: Runs during setup/maintenance workflows
14. TeammateIdle: Runs when an Agent Team teammate goes idle
15. TaskCompleted: Runs when a tracked task reaches completion
## Prerequisites ## Prerequisites
@@ -62,15 +68,22 @@ Edit `.claude/hooks/config/hooks-config.json` for team-wide defaults:
```json ```json
{ {
"disableSessionStartHook": false,
"disableSessionEndHook": false,
"disableUserPromptSubmitHook": false,
"disablePreToolUseHook": false, "disablePreToolUseHook": false,
"disablePostToolUseHook": false, "disablePostToolUseHook": false,
"disableUserPromptSubmitHook": false, "disablePostToolUseFailureHook": false,
"disablePermissionRequestHook": false,
"disableNotificationHook": false, "disableNotificationHook": false,
"disableSubagentStartHook": false,
"disableStopHook": false, "disableStopHook": false,
"disableSubagentStopHook": false, "disableSubagentStopHook": false,
"disablePreCompactHook": false, "disablePreCompactHook": false,
"disableSessionStartHook": false, "disableSetupHook": false,
"disableSessionEndHook": false "disableTeammateIdleHook": false,
"disableTaskCompletedHook": false,
"disableLogging": true
} }
``` ```
@@ -87,8 +100,8 @@ Create or edit `.claude/hooks/config/hooks-config.local.json` for personal prefe
In this example, only the PostToolUse and SessionStart hooks are overridden locally. All other hooks will use the shared configuration values. In this example, only the PostToolUse and SessionStart hooks are overridden locally. All other hooks will use the shared configuration values.
**Note:** Individual hook toggles are checked by the hook script (`.claude/hooks/scripts/hooks.py`). Local settings override shared settings, and if a hook is disabled, the script exits silently without playing any sounds or executing hook logic. **Note:** Individual hook toggles are checked by the hook script (`.claude/hooks/scripts/hooks.py`). Local settings override shared settings, and if a hook is disabled, the script exits silently without playing sounds or executing hook logic.
### Text to Speech (TTS) ### Text to Speech (TTS)
website used to generate sounds: https://elevenlabs.io/ website used to generate sounds: https://elevenlabs.io/
voice used: Samara X voice used: Samara X
+11 -5
View File
@@ -3,7 +3,7 @@
Claude Code Hook Handler Claude Code Hook Handler
============================================= =============================================
This script handles events from Claude Code and plays sounds for different hook events. This script handles events from Claude Code and plays sounds for different hook events.
Supports all 9 Claude Code hooks: https://docs.claude.com/en/docs/claude-code/hooks-guide Supports all 15 Claude Code hook event names: https://docs.claude.com/en/docs/claude-code/hooks-guide
Special handling for git commits: plays pretooluse-git-committing.mp3 Special handling for git commits: plays pretooluse-git-committing.mp3
""" """
@@ -24,15 +24,21 @@ except ImportError:
# ===== HOOK EVENT TO SOUND FOLDER MAPPING ===== # ===== HOOK EVENT TO SOUND FOLDER MAPPING =====
# Maps each hook event to its corresponding sound folder # Maps each hook event to its corresponding sound folder
HOOK_SOUND_MAP = { HOOK_SOUND_MAP = {
"SessionStart": "sessionstart",
"SessionEnd": "sessionend",
"UserPromptSubmit": "userpromptsubmit",
"PreToolUse": "pretooluse", "PreToolUse": "pretooluse",
"PostToolUse": "posttooluse", "PostToolUse": "posttooluse",
"UserPromptSubmit": "userpromptsubmit", "PostToolUseFailure": "posttoolusefailure",
"PermissionRequest": "permissionrequest",
"Notification": "notification", "Notification": "notification",
"Stop": "stop", "Stop": "stop",
"SubagentStart": "subagentstart",
"SubagentStop": "subagentstop", "SubagentStop": "subagentstop",
"PreCompact": "precompact", "PreCompact": "precompact",
"SessionStart": "sessionstart", "Setup": "setup",
"SessionEnd": "sessionend" "TeammateIdle": "teammateidle",
"TaskCompleted": "taskcompleted",
} }
# ===== BASH COMMAND PATTERNS ===== # ===== BASH COMMAND PATTERNS =====
@@ -345,4 +351,4 @@ def main():
# Entry point - Python calls main() when the script runs # Entry point - Python calls main() when the script runs
if __name__ == "__main__": if __name__ == "__main__":
main() main()
@@ -56,7 +56,7 @@ Inside `.code-block`, use these spans for syntax coloring:
### Content Slide with Two Columns (Good vs Bad) ### Content Slide with Two Columns (Good vs Bad)
```html ```html
<div class="slide" data-slide="N" data-weight="5"> <div class="slide" data-slide="N" data-weight="5">
<h1>Title <span class="weight-badge">+5%</span></h1> <h1>Title</h1>
<div class="two-col"> <div class="two-col">
<div class="col-card bad"> <div class="col-card bad">
<h4>Before (Vibe Coding)</h4> <h4>Before (Vibe Coding)</h4>
@@ -70,6 +70,8 @@ Inside `.code-block`, use these spans for syntax coloring:
</div> </div>
``` ```
Do not hardcode `<span class="weight-badge">` in slide HTML. The presentation JavaScript injects and removes weight badges automatically.
### Content Slide with Code Example ### Content Slide with Code Example
```html ```html
<div class="slide" data-slide="N"> <div class="slide" data-slide="N">
@@ -23,9 +23,12 @@ Every technique is demonstrated on a realistic full-stack project:
todoapp/ todoapp/
├── backend/ # FastAPI (Python) ├── backend/ # FastAPI (Python)
│ ├── main.py # App entry + CORS │ ├── main.py # App entry + CORS
│ ├── models.py # SQLAlchemy models
│ ├── routes/ │ ├── routes/
│ │ └── todos.py # CRUD endpoints │ │ └── todos.py # CRUD endpoints
│ │ └── users.py # Auth endpoints
│ ├── models/
│ │ ├── todo.py # SQLAlchemy Todo model
│ │ └── user.py # SQLAlchemy User model
│ └── tests/ │ └── tests/
│ └── test_todos.py │ └── test_todos.py
├── frontend/ # Next.js (TypeScript) ├── frontend/ # Next.js (TypeScript)
@@ -33,7 +36,10 @@ todoapp/
│ │ ├── TodoList.tsx │ │ ├── TodoList.tsx
│ │ └── Sidebar.tsx │ │ └── Sidebar.tsx
│ ├── pages/ │ ├── pages/
└── styles/ # Tailwind tokens │ ├── index.tsx
│ │ └── todos.tsx
│ └── lib/
│ └── api.ts # API client
└── CLAUDE.md └── CLAUDE.md
``` ```
+14 -7
View File
@@ -763,8 +763,9 @@ When creating or modifying frontend components:
<div class="use-case-item"><span class="use-case-icon">&#128221;</span><div class="use-case-text"><strong>description</strong><span>When to invoke &mdash; helps Claude auto-discover the skill</span></div></div> <div class="use-case-item"><span class="use-case-icon">&#128221;</span><div class="use-case-text"><strong>description</strong><span>When to invoke &mdash; helps Claude auto-discover the skill</span></div></div>
<div class="use-case-item"><span class="use-case-icon">&#129302;</span><div class="use-case-text"><strong>model</strong><span>Override which model runs the skill</span></div></div> <div class="use-case-item"><span class="use-case-icon">&#129302;</span><div class="use-case-text"><strong>model</strong><span>Override which model runs the skill</span></div></div>
<div class="use-case-item"><span class="use-case-icon">&#128295;</span><div class="use-case-text"><strong>allowed-tools</strong><span>Restrict which tools the skill can use</span></div></div> <div class="use-case-item"><span class="use-case-icon">&#128295;</span><div class="use-case-text"><strong>allowed-tools</strong><span>Restrict which tools the skill can use</span></div></div>
<div class="use-case-item"><span class="use-case-icon">&#128257;</span><div class="use-case-text"><strong>context: fork</strong><span>Run the skill in an isolated subagent context for complex workflows</span></div></div>
</div> </div>
<h3>Three Ways to Invoke</h3> <h3>Invocation &amp; Execution Modes</h3>
<div class="code-block"><span class="comment"># 1. Manual: slash command</span> <div class="code-block"><span class="comment"># 1. Manual: slash command</span>
<span class="cmd">&gt;</span> /frontend-conventions <span class="cmd">&gt;</span> /frontend-conventions
@@ -773,7 +774,10 @@ When creating or modifying frontend components:
<span class="comment"># 3. Preloaded: in an agent's frontmatter</span> <span class="comment"># 3. Preloaded: in an agent's frontmatter</span>
<span class="key">skills</span>: <span class="key">skills</span>:
- frontend-conventions</div> - frontend-conventions
<span class="comment"># 4. Optional isolation for heavy workflows</span>
<span class="key">context</span>: <span class="string">fork</span></div>
</div> </div>
<!-- Slide 33: Skills Summary --> <!-- Slide 33: Skills Summary -->
@@ -826,13 +830,13 @@ When creating or modifying frontend components:
<div class="col-card"> <div class="col-card">
<h4>As Main Agent</h4> <h4>As Main Agent</h4>
<p>Replaces default Claude for your conversation.</p> <p>Replaces default Claude for your conversation.</p>
<div class="code-block"><span class="cmd">$</span> claude --agent frontend-eng</div> <div class="code-block"><span class="cmd">$</span> claude --agent frontend-engineer</div>
</div> </div>
<div class="col-card"> <div class="col-card">
<h4>As Subagent</h4> <h4>As Subagent</h4>
<p>Spawned in an isolated context via Task tool.</p> <p>Spawned in an isolated context via Task tool.</p>
<div class="code-block">Task( <div class="code-block">Task(
subagent_type=<span class="string">"frontend-eng"</span> subagent_type=<span class="string">"frontend-engineer"</span>
prompt=<span class="string">"Add a settings page"</span> prompt=<span class="string">"Add a settings page"</span>
)</div> )</div>
</div> </div>
@@ -1447,12 +1451,15 @@ Read(.env) <span class="comment">// Block reading secrets</span></di
<h4>Settings Hierarchy</h4> <h4>Settings Hierarchy</h4>
<p>Settings cascade from most specific to least specific. Higher priority wins.</p> <p>Settings cascade from most specific to least specific. Higher priority wins.</p>
</div> </div>
<div class="code-block"><span class="comment"># Priority order (highest to lowest):</span> <div class="code-block"><span class="comment"># User-writable override order (highest to lowest):</span>
1. Command line flags <span class="comment"># --model opus</span> 1. Command line flags <span class="comment"># --model opus</span>
2. .claude/settings.local.json <span class="comment"># Personal, git-ignored</span> 2. .claude/settings.local.json <span class="comment"># Personal, git-ignored</span>
3. .claude/settings.json <span class="comment"># Team-shared, committed</span> 3. .claude/settings.json <span class="comment"># Team-shared, committed</span>
4. ~/.claude/settings.json <span class="comment"># Global personal</span> 4. ~/.claude/settings.local.json <span class="comment"># Global personal override</span>
5. managed-settings.json <span class="comment"># Organization policies</span></div> 5. ~/.claude/settings.json <span class="comment"># Global personal default</span>
<span class="comment"># Policy layer:</span>
managed-settings.json <span class="comment"># Organization policy (enforced)</span></div>
</div> </div>
<!-- Slide 66: Spinner Verbs --> <!-- Slide 66: Spinner Verbs -->
+5 -3
View File
@@ -67,17 +67,19 @@ These exist at both levels, with **project-level taking precedence** over global
## Settings Precedence ## Settings Precedence
Settings apply in order from highest to lowest priority: User-writable settings apply in this override order (highest to lowest):
| Priority | Location | Scope | Version Control | Purpose | | Priority | Location | Scope | Version Control | Purpose |
|----------|----------|-------|-----------------|---------| |----------|----------|-------|-----------------|---------|
| 1 | Managed settings | System | Read-only | Organization/admin policies | | 1 | Command line flags | Session | N/A | Single-session overrides |
| 2 | `.claude/settings.local.json` | Project | No (git-ignored) | Personal project-specific | | 2 | `.claude/settings.local.json` | Project | No (git-ignored) | Personal project-specific |
| 3 | `.claude/settings.json` | Project | Yes (committed) | Team-shared settings | | 3 | `.claude/settings.json` | Project | Yes (committed) | Team-shared settings |
| 4 | `~/.claude/settings.local.json` | User | N/A | Personal global overrides | | 4 | `~/.claude/settings.local.json` | User | N/A | Personal global overrides |
| 5 | `~/.claude/settings.json` | User | N/A | Global personal settings | | 5 | `~/.claude/settings.json` | User | N/A | Global personal settings |
**Important**: `deny` rules have the highest priority and cannot be overridden by any lower-priority settings. Policy layer: `managed-settings.json` is organization-enforced and cannot be overridden by local files.
**Important**: `deny` rules have the highest safety precedence and cannot be overridden by lower-priority allow/ask rules.
--- ---
+11 -7
View File
@@ -28,19 +28,21 @@ A comprehensive guide to all available configuration options in Claude Code's `s
## Settings Hierarchy ## Settings Hierarchy
Claude Code uses a 4-tier configuration hierarchy (highest to lowest priority): Claude Code settings use a 5-level user-writable override chain plus an enforced policy layer:
| Priority | Location | Scope | Version Control | Purpose | | Priority | Location | Scope | Version Control | Purpose |
|----------|----------|-------|-----------------|---------| |----------|----------|-------|-----------------|---------|
| 1 | Command line arguments | Session | N/A | Single-session overrides | | 1 | Command line arguments | Session | N/A | Single-session overrides |
| 2 | `.claude/settings.local.json` | Project | No (git-ignored) | Personal project-specific | | 2 | `.claude/settings.local.json` | Project | No (git-ignored) | Personal project-specific |
| 3 | `.claude/settings.json` | Project | Yes (committed) | Team-shared settings | | 3 | `.claude/settings.json` | Project | Yes (committed) | Team-shared settings |
| 4 | `~/.claude/settings.json` | User | N/A | Global personal settings | | 4 | `~/.claude/settings.local.json` | User | N/A | Personal global overrides |
| 5 | `managed-settings.json` | System | Read-only | Organization policies | | 5 | `~/.claude/settings.json` | User | N/A | Global personal defaults |
**Important**: Later values override earlier ones EXCEPT for: **Policy layer**: `managed-settings.json` is organization-enforced and cannot be overridden by local settings.
- `deny` rules (highest priority - cannot be overridden)
- Managed settings (cannot be overridden by any local settings) **Important**:
- `deny` rules have highest safety precedence and cannot be overridden by lower-priority allow/ask rules.
- Managed settings may lock or override local behavior even if local files specify different values.
--- ---
@@ -237,7 +239,7 @@ Control what tools and operations Claude can perform.
Execute custom shell commands at various points in Claude Code's lifecycle. Execute custom shell commands at various points in Claude Code's lifecycle.
### Hook Events (13 total) ### Hook Events (15 total)
| Event | When Fired | Matcher Support | Common Use Cases | | Event | When Fired | Matcher Support | Common Use Cases |
|-------|------------|-----------------|------------------| |-------|------------|-----------------|------------------|
@@ -254,6 +256,8 @@ Execute custom shell commands at various points in Claude Code's lifecycle.
| `SubagentStop` | Subagent completes | Yes | Cleanup, validation | | `SubagentStop` | Subagent completes | Yes | Cleanup, validation |
| `PreCompact` | Before context compaction | Yes | Backup, logging | | `PreCompact` | Before context compaction | Yes | Backup, logging |
| `Setup` | Repository init (`--init`, `--maintenance`) | Yes | One-time setup | | `Setup` | Repository init (`--init`, `--maintenance`) | Yes | One-time setup |
| `TeammateIdle` | Agent Teams teammate goes idle | Yes | Team orchestration, routing |
| `TaskCompleted` | A tracked task is completed | Yes | Progress automation, notifications |
### Hook Configuration Structure ### Hook Configuration Structure