Add explanation of token counter tool on claude-token-counter page

[simonw]

Add explanatory text to the top of the page on claude-token-counter explaining that is uses your Anthropic API key to count tokens in text and images using Anthropic’s token counting API - and link to https://platform.claude.com/docs/en/build-with-claude/token-counting

[claude]

Claude finished @simonw's task —— View job

---

Code Review Complete ✅

Reviewing this PR that adds explanatory text to the claude-token-counter page.

Todo List:

• Read repository guidelines (CLAUDE.md)
• Analyze the modified HTML file
• Check code quality and best practices
• Review for potential bugs or issues
• Assess performance considerations
• Check for security concerns
• Evaluate test coverage needs
• Provide comprehensive feedback

Review Feedback

This is a clean, straightforward documentation improvement. The changes look excellent overall with just one minor suggestion:

✅ Code Quality & Best Practices

• Well-structured change: Simple addition of explanatory text without modifying existing functionality
• Semantic HTML: Proper use of <p> tag for descriptive content
• Good placement: Explanation appears right after the h1 title, which is the ideal location for introductory text

✅ Security

• External link security: The link to https://platform.claude.com/docs/en/build-with-claude/token-counting is to Anthropic's official documentation domain, which is appropriate and safe
• No security risks: The change only adds static text content with no executable code or user input handling

✅ Performance

• Minimal impact: Adding a single paragraph with one external link has negligible performance impact
• No additional resources: No new CSS, JavaScript, or external dependencies introduced

✅ Functionality

• No bugs introduced: The change is purely additive and doesn't modify existing logic
• Clear messaging: The explanation accurately describes what the tool does and provides helpful context

💡 Minor Suggestion

Consider adding target="_blank" and rel="noopener noreferrer" to the external link for better UX and security:

<a href="https://platform.claude.com/docs/en/build-with-claude/token-counting" target="_blank" rel="noopener noreferrer">Anthropic's token counting API</a>

ℹ️ Test Coverage

No test coverage needed - this is a static documentation change that doesn't affect application logic.

Overall Assessment: This is a valuable improvement that provides users with essential context about the tool's functionality and data usage. The implementation is clean and follows web standards. Approved for merge with the optional link enhancement above.