🎨 Update index.html for improved clarity and user engagement in Claude Code documentation

Author: davila7

docs/components.json

@@ -2368,6 +2368,14 @@
     }
   ],
   "hooks": [
+    {
+      "name": "TELEGRAM_SETUP",
+      "path": "automation/TELEGRAM_SETUP.md",
+      "category": "automation",
+      "type": "hook",
+      "content": "# 📱 Telegram Notifications Setup Guide\n\n## Overview\nGet real-time Telegram notifications when Claude Code finishes working, encounters long operations, or needs attention.\n\n## Available Hooks\n\n### 1. `telegram-notifications` - Basic Notifications\n- ✅ Notifies when main Claude Code session ends\n- 🎯 Notifies when subagent tasks complete\n- Simple timestamp information\n\n### 2. `telegram-detailed-notifications` - Advanced Session Tracking\n- 🚀 Session start notifications\n- ✅ Detailed completion notifications with duration\n- 💾 Memory usage information\n- 📁 Project name tracking\n\n### 3. `telegram-error-notifications` - Productivity Monitoring\n- ⚠️ Alerts for long-running Bash operations (>30 seconds)\n- 🔔 Notifications when Claude Code waits for user input\n- Helps catch stuck processes\n\n## Setup Instructions\n\n### Step 1: Create a Telegram Bot\n1. Message [@BotFather](https://t.me/BotFather) on Telegram\n2. Send `/newbot` command\n3. Follow instructions to create your bot\n4. Copy the **Bot Token** (looks like: `123456789:ABCD-EFGHijklmnop_qrstuvwxyz`)\n\n### Step 2: Get Your Chat ID\n1. Start a conversation with your bot\n2. Send any message to the bot\n3. Visit: `https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates`\n4. Find your **Chat ID** in the response (usually a number like `123456789`)\n\n### Step 3: Set Environment Variables\n\n#### Option A: Global Configuration (Recommended)\nAdd to your shell profile (`.bashrc`, `.zshrc`, or `.profile`):\n\n```bash\nexport TELEGRAM_BOT_TOKEN=\"123456789:ABCD-EFGHijklmnop_qrstuvwxyz\"\nexport TELEGRAM_CHAT_ID=\"123456789\"\n```\n\n#### Option B: Project-Specific Configuration\nAdd to your project's `.env` file or `.claude/settings.local.json`:\n\n```json\n{\n  \"env\": {\n    \"TELEGRAM_BOT_TOKEN\": \"123456789:ABCD-EFGHijklmnop_qrstuvwxyz\",\n    \"TELEGRAM_CHAT_ID\": \"123456789\"\n  }\n}\n```\n\n### Step 4: Install the Hook\n```bash\n# Basic notifications\nnpx claude-code-templates@latest --hook=automation/telegram-notifications\n\n# Detailed session tracking\nnpx claude-code-templates@latest --hook=automation/telegram-detailed-notifications\n\n# Productivity monitoring\nnpx claude-code-templates@latest --hook=automation/telegram-error-notifications\n```\n\n## Testing\nAfter setup, test the hook by running:\n```bash\n# This should trigger a notification when the command completes\necho \"Test complete\"\n```\n\n## Security Notes\n- ⚠️ **Never commit bot tokens to version control**\n- 🔒 Use `.claude/settings.local.json` for sensitive credentials\n- 🏢 For teams, consider using enterprise managed settings\n- 🔐 Regularly rotate bot tokens for security\n\n## Troubleshooting\n\n### No notifications received?\n1. Verify environment variables: `echo $TELEGRAM_BOT_TOKEN`\n2. Check bot token format (should contain `:`)\n3. Ensure you've messaged the bot first\n4. Verify chat ID is correct (numeric)\n\n### Bot responds with \"Forbidden\"?\n- The chat ID might be incorrect\n- You need to start a conversation with the bot first\n\n### Hook not triggering?\n- Verify hook is installed: check `.claude/settings.json`\n- Test with a simple command first\n- Check Claude Code version compatibility\n\n## Message Examples\n\n### Basic Notification\n```\n🤖 Claude Code finished working at 2025-01-15 14:30:45\n```\n\n### Detailed Notification\n```\n✅ Claude Code Session Completed\n📁 Project: my-awesome-project\n⏱️ Duration: 15m 32s\n💾 Memory Used: 245MB\n⏰ Finished: 14:30:45\n📅 Date: 2025-01-15\n```\n\n### Long Operation Alert\n```\n⚠️ Long Bash Operation\n⏱️ Duration: 2m 15s\n📁 Project: data-processing\n⏰ Time: 14:28:30\n```\n\n## Advanced Configuration\n\n### Custom Message Format\nYou can modify the hooks to customize message format:\n- Edit the `MESSAGE` variable in the hook command\n- Use HTML formatting with `parse_mode=HTML`\n- Add emojis and custom text\n\n### Group Notifications\n- Add the bot to a Telegram group\n- Use the group chat ID instead of personal chat ID\n- Perfect for team notifications\n\n### Multiple Projects\n- Use different bots for different projects\n- Set project-specific environment variables\n- Configure in `.claude/settings.local.json` per project",
+      "description": ""
+    },
     {
       "name": "build-on-change",
       "path": "automation/build-on-change.json",
@@ -2392,6 +2400,30 @@
       "content": "{\n  \"description\": \"Send simple desktop notifications when Claude Code operations complete. Works on macOS and Linux systems.\",\n  \"hooks\": {\n    \"PostToolUse\": [\n      {\n        \"matcher\": \"*\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"if command -v osascript >/dev/null 2>&1; then osascript -e 'display notification \\\"Tool: $CLAUDE_TOOL_NAME completed\\\" with title \\\"Claude Code\\\"'; elif command -v notify-send >/dev/null 2>&1; then notify-send 'Claude Code' \\\"Tool: $CLAUDE_TOOL_NAME completed\\\"; fi\"\n          }\n        ]\n      }\n    ]\n  }\n}",
       "description": "Send simple desktop notifications when Claude Code operations complete. Works on macOS and Linux systems."
     },
+    {
+      "name": "telegram-detailed-notifications",
+      "path": "automation/telegram-detailed-notifications.json",
+      "category": "automation",
+      "type": "hook",
+      "content": "{\n  \"description\": \"Send detailed Telegram notifications with session information when Claude Code finishes. Includes working directory, session duration, and system info. Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID environment variables.\",\n  \"hooks\": {\n    \"SessionStart\": [\n      {\n        \"matcher\": \"startup\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"if [[ -n \\\"$TELEGRAM_BOT_TOKEN\\\" && -n \\\"$TELEGRAM_CHAT_ID\\\" ]]; then echo \\\"$(date +%s)\\\" > ~/.claude/session_start.tmp; PROJECT_DIR=\\\"$(basename \\\"$(pwd)\\\")\\\" && MESSAGE=\\\"🚀 <b>Claude Code Session Started</b>%0A📁 Project: $PROJECT_DIR%0A⏰ Time: $(date '+%H:%M:%S')%0A📅 Date: $(date '+%Y-%m-%d')\\\"; curl -s -X POST \\\"https://api.telegram.org/bot$TELEGRAM_BOT_TOKEN/sendMessage\\\" -d \\\"chat_id=$TELEGRAM_CHAT_ID\\\" -d \\\"text=$MESSAGE\\\" -d \\\"parse_mode=HTML\\\" >/dev/null 2>&1; fi\"\n          }\n        ]\n      }\n    ],\n    \"Stop\": [\n      {\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"if [[ -n \\\"$TELEGRAM_BOT_TOKEN\\\" && -n \\\"$TELEGRAM_CHAT_ID\\\" ]]; then END_TIME=\\\"$(date +%s)\\\"; if [[ -f ~/.claude/session_start.tmp ]]; then START_TIME=\\\"$(cat ~/.claude/session_start.tmp)\\\"; DURATION=\\\"$((END_TIME - START_TIME))\\\"; MINUTES=\\\"$((DURATION / 60))\\\"; SECONDS=\\\"$((DURATION % 60))\\\"; DURATION_TEXT=\\\"${MINUTES}m ${SECONDS}s\\\"; rm -f ~/.claude/session_start.tmp; else DURATION_TEXT=\\\"Unknown\\\"; fi; PROJECT_DIR=\\\"$(basename \\\"$(pwd)\\\")\\\"; MEMORY_MB=\\\"$(ps -o rss= -p $$ 2>/dev/null | awk '{print int($1/1024)}' || echo 'N/A')\\\"; MESSAGE=\\\"✅ <b>Claude Code Session Completed</b>%0A📁 Project: $PROJECT_DIR%0A⏱️ Duration: $DURATION_TEXT%0A💾 Memory Used: ${MEMORY_MB}MB%0A⏰ Finished: $(date '+%H:%M:%S')%0A📅 Date: $(date '+%Y-%m-%d')\\\"; curl -s -X POST \\\"https://api.telegram.org/bot$TELEGRAM_BOT_TOKEN/sendMessage\\\" -d \\\"chat_id=$TELEGRAM_CHAT_ID\\\" -d \\\"text=$MESSAGE\\\" -d \\\"parse_mode=HTML\\\" >/dev/null 2>&1 || echo \\\"Failed to send detailed Telegram notification\\\"; else echo \\\"⚠️ Detailed Telegram notification skipped: Set TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID\\\"; fi\"\n          }\n        ]\n      }\n    ]\n  }\n}",
+      "description": "Send detailed Telegram notifications with session information when Claude Code finishes. Includes working directory, session duration, and system info. Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID environment variables."
+    },
+    {
+      "name": "telegram-error-notifications",
+      "path": "automation/telegram-error-notifications.json",
+      "category": "automation",
+      "type": "hook",
+      "content": "{\n  \"description\": \"Send Telegram notifications when Claude Code encounters long-running operations or when tools take significant time. Helps monitor productivity and catch potential issues. Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID environment variables.\",\n  \"hooks\": {\n    \"PreToolUse\": [\n      {\n        \"matcher\": \"Bash\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"if [[ -n \\\"$TELEGRAM_BOT_TOKEN\\\" && -n \\\"$TELEGRAM_CHAT_ID\\\" ]]; then echo \\\"$(date +%s)\\\" > ~/.claude/bash_start.tmp; fi\"\n          }\n        ]\n      }\n    ],\n    \"PostToolUse\": [\n      {\n        \"matcher\": \"Bash\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"if [[ -n \\\"$TELEGRAM_BOT_TOKEN\\\" && -n \\\"$TELEGRAM_CHAT_ID\\\" && -f ~/.claude/bash_start.tmp ]]; then END_TIME=\\\"$(date +%s)\\\"; START_TIME=\\\"$(cat ~/.claude/bash_start.tmp)\\\"; DURATION=\\\"$((END_TIME - START_TIME))\\\"; rm -f ~/.claude/bash_start.tmp; if [[ $DURATION -gt 30 ]]; then MINUTES=\\\"$((DURATION / 60))\\\"; SECONDS=\\\"$((DURATION % 60))\\\"; MESSAGE=\\\"⚠️ <b>Long Bash Operation</b>%0A⏱️ Duration: ${MINUTES}m ${SECONDS}s%0A📁 Project: $(basename \\\"$(pwd)\\\")%0A⏰ Time: $(date '+%H:%M:%S')\\\"; curl -s -X POST \\\"https://api.telegram.org/bot$TELEGRAM_BOT_TOKEN/sendMessage\\\" -d \\\"chat_id=$TELEGRAM_CHAT_ID\\\" -d \\\"text=$MESSAGE\\\" -d \\\"parse_mode=HTML\\\" >/dev/null 2>&1; fi; fi\"\n          }\n        ]\n      }\n    ],\n    \"Notification\": [\n      {\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"if [[ -n \\\"$TELEGRAM_BOT_TOKEN\\\" && -n \\\"$TELEGRAM_CHAT_ID\\\" ]]; then MESSAGE=\\\"🔔 <b>Claude Code Notification</b>%0A📁 Project: $(basename \\\"$(pwd)\\\")%0A⏰ Time: $(date '+%H:%M:%S')%0A💬 Status: Waiting for user input or permission\\\"; curl -s -X POST \\\"https://api.telegram.org/bot$TELEGRAM_BOT_TOKEN/sendMessage\\\" -d \\\"chat_id=$TELEGRAM_CHAT_ID\\\" -d \\\"text=$MESSAGE\\\" -d \\\"parse_mode=HTML\\\" >/dev/null 2>&1; fi\"\n          }\n        ]\n      }\n    ]\n  }\n}",
+      "description": "Send Telegram notifications when Claude Code encounters long-running operations or when tools take significant time. Helps monitor productivity and catch potential issues. Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID environment variables."
+    },
+    {
+      "name": "telegram-notifications",
+      "path": "automation/telegram-notifications.json",
+      "category": "automation",
+      "type": "hook",
+      "content": "{\n  \"description\": \"Send Telegram notifications when Claude Code finishes working. Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID environment variables. Get bot token from @BotFather, get chat ID by messaging the bot and visiting https://api.telegram.org/bot<TOKEN>/getUpdates\",\n  \"hooks\": {\n    \"Stop\": [\n      {\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"if [[ -n \\\"$TELEGRAM_BOT_TOKEN\\\" && -n \\\"$TELEGRAM_CHAT_ID\\\" ]]; then MESSAGE=\\\"🤖 Claude Code finished working at $(date '+%Y-%m-%d %H:%M:%S')\\\"; curl -s -X POST \\\"https://api.telegram.org/bot$TELEGRAM_BOT_TOKEN/sendMessage\\\" -d \\\"chat_id=$TELEGRAM_CHAT_ID\\\" -d \\\"text=$MESSAGE\\\" -d \\\"parse_mode=HTML\\\" >/dev/null 2>&1 || echo \\\"Failed to send Telegram notification\\\"; else echo \\\"⚠️ Telegram notification skipped: Set TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID environment variables\\\"; fi\"\n          }\n        ]\n      }\n    ],\n    \"SubagentStop\": [\n      {\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"if [[ -n \\\"$TELEGRAM_BOT_TOKEN\\\" && -n \\\"$TELEGRAM_CHAT_ID\\\" ]]; then MESSAGE=\\\"🎯 Claude Code subagent completed task at $(date '+%Y-%m-%d %H:%M:%S')\\\"; curl -s -X POST \\\"https://api.telegram.org/bot$TELEGRAM_BOT_TOKEN/sendMessage\\\" -d \\\"chat_id=$TELEGRAM_CHAT_ID\\\" -d \\\"text=$MESSAGE\\\" -d \\\"parse_mode=HTML\\\" >/dev/null 2>&1 || echo \\\"Failed to send Telegram notification\\\"; else echo \\\"⚠️ Telegram notification skipped: Set TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID environment variables\\\"; fi\"\n          }\n        ]\n      }\n    ]\n  }\n}",
+      "description": "Send Telegram notifications when Claude Code finishes working. Requires TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID environment variables. Get bot token from @BotFather, get chat ID by messaging the bot and visiting https://api.telegram.org/bot<TOKEN>/getUpdates"
+    },
     {
       "name": "change-tracker",
       "path": "development-tools/change-tracker.json",

docs/index.html

@@ -86,7 +86,7 @@
             </div>
             <div class="terminal-subtitle">
                 <span class="status-dot"></span>
-                Professional configurations for <strong>Anthropic's Claude Code</strong> • Deep coding at terminal velocity
+                Ready-to-use configurations for your <strong>Claude Code</strong> projects
             </div>
         </div>
                 <div class="header-actions">
@@ -103,7 +103,7 @@
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                         </svg>
-                        Official Claude Code
+                        Claude Code
                     </a>
                     <a href="https://docs.aitmpl.com/" target="_blank" class="header-btn">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
@@ -155,23 +155,23 @@ <h3>Install CLI Tool (Optional)</h3>
                 <div class="step-card">
                     <div class="step-number">2</div>
                     <div class="step-content">
-                        <h3>Supercharge Claude Code</h3>
-                        <p>Transform Anthropic's Claude Code into a powerful AI development environment with specialized agents, automation hooks, and intelligent configurations</p>
+                        <h3>Build Your Stack</h3>
+                        <p>Create a complete development stack by combining agents, commands, MCPs, and settings </p>
                         <div class="step-highlight">
-                            <span class="highlight-text">🚀 Get Claude Opus 4.1 working at terminal velocity with professional templates</span>
+                            <span class="highlight-text">🛒 Add multiple components to your cart and generate a single installation command</span>
                         </div>
                     </div>
                 </div>
 
                 <div class="step-card">
                     <div class="step-number">3</div>
                     <div class="step-content">
-                        <h3>Start AI-Powered Development</h3>
-                        <p>Launch Claude Code and experience deep coding with Anthropic's most advanced model</p>
+                        <h3>Start Coding</h3>
+                        <p>Launch Claude Code and start developing with AI assistance</p>
                         <div class="command-line">
                             <span class="prompt">$</span>
                             <code class="command">claude</code>
-                            <span class="command-note">// Claude Opus 4.1 ready! 🤖</span>
+                            <span class="command-note">// That's it! 🎉</span>
                         </div>
                     </div>
                 </div>