CLAUDE

Notes

• exps and experiments refers to the same thing

Common Mistakes & Solutions

GitHub Wiki Internal Links

Problem: Wiki links using .md extensions point to raw files instead of proper wiki pages, breaking navigation.

Solution: Remove .md extensions from internal wiki links. GitHub wiki automatically routes to the correct page format.

Examples:

• ❌ Wrong: [News](News.md) → Links to raw.githubusercontent.com/wiki/hbt/ai-stuff/News.md
• ✅ Correct: [News](News) → Links to github.com/hbt/ai-stuff/wiki/News

Detection: Links appear to work in markdown preview but lead to raw file URLs on live wiki.

Fix Process:

1. Remove .md from all internal wiki links
2. Commit and push changes to update live wiki
3. Verify links work properly on GitHub wiki interface

Browser MCP Usage

Browser MCP allows Claude to interact with web pages through a browser extension.

Setup

1. Install the Browser MCP extension in your browser
2. Click the extension icon in the toolbar
3. Click the 'Connect' button to establish connection

Available Commands

Navigation

mcp__browsermcp__browser_navigate - Navigate to a URL
mcp__browsermcp__browser_go_back - Go back to previous page  
mcp__browsermcp__browser_go_forward - Go forward to next page

Page Interaction

mcp__browsermcp__browser_snapshot - Capture accessibility snapshot for element references
mcp__browsermcp__browser_screenshot - Take a screenshot of current page
mcp__browsermcp__browser_click - Click on page elements (requires element ref from snapshot)
mcp__browsermcp__browser_hover - Hover over elements
mcp__browsermcp__browser_type - Type text into editable elements
mcp__browsermcp__browser_select_option - Select dropdown options
mcp__browsermcp__browser_press_key - Press keyboard keys (e.g., PageDown, Enter, etc.)
mcp__browsermcp__browser_wait - Wait for specified time in seconds

Debugging

mcp__browsermcp__browser_get_console_logs - Get browser console logs

Common Workflow

1. Navigate to a page with browser_navigate
2. Take a browser_screenshot to see the page
3. Use browser_snapshot to get element references for interaction
4. Interact with elements using browser_click, browser_type, etc.
5. Use browser_press_key for navigation (PageDown, PageUp, etc.)

When to Use Browser MCP

Use Browser MCP as an alternative when:

• WebFetch tool fails due to blocked domains or anti-scraping measures
• curl commands are blocked or return insufficient data
• Sites require JavaScript rendering or user interaction
• Need to interact with dynamic content (SPAs, AJAX-loaded content)
• Want to capture visual information via screenshots
• Need to fill forms or click buttons programmatically

Limitations

• Large pages may exceed token limits (25000 tokens max)
• Some sites block automated access
• Requires browser extension to be connected
• Page content must fit within response limits

Setup

Browser MCP is automatically configured through setupClaudeServers() function:

claude mcp add browsermcp -- npx @browsermcp/mcp@latest

For detailed documentation, see claude/tools-and-integrations/browser-mcp.md.

Custom Claude Code Commands

Claude Code allows you to create custom slash commands using the .claude/commands/ directory.

How It Works

• Create Markdown files in .claude/commands/ to define project-specific commands
• Filename determines command name (e.g., summarize.md → /project:summarize)
• Nested directories create namespaced commands (e.g., frontend/component.md → /project:frontend:component)
• File content becomes the prompt sent to Claude when invoked
• Use $ARGUMENTS placeholder to accept user input
• Commands are available to everyone who clones the repository

Example Command

Create .claude/commands/summarize.md:

# Summarize Code or Files

Please provide a concise summary of $ARGUMENTS. Focus on:
- Main purpose and functionality  
- Key components or sections
- Important patterns or techniques used

Keep the summary brief but informative.

Usage: /project:summarize src/main.js

Tips

• Keep commands focused on common project tasks
• Use descriptive filenames for clarity
• Include usage examples in command descriptions
• Test commands with different argument types