Daniel Avila
5cba740dde
## Changes Made: ### 1. Modal Text Display Improvements - Increased error/warning message font size from 14px to 16px for better readability - Improved line height from 1.5 to 1.6 for better spacing - Increased margin-bottom from 4px to 8px for better visual separation ### 2. Code Preview Text Wrapping - Removed horizontal scroll (`overflow-x: auto`) from code previews - Added `white-space: normal` to prevent excessive whitespace at line start - Added `word-wrap: break-word` and `overflow-wrap: break-word` for proper text wrapping - Applied to all code preview sections: - Error line text previews - Warning line text previews - Example line text in errors - Example line text in warnings ### 3. Line Number Scroll Synchronization - Added `position: relative` to `.code-body` for better layout control - Added `overflow: hidden` and `max-height: 600px` to `.code-line-numbers` - Added `max-height: 600px` to `.code-content` - Implemented JavaScript scroll sync between line numbers and code content - Line numbers now scroll perfectly in sync with code content ### 4. Clickable Error Line Numbers - Added `cursor: pointer` to error/warning line numbers - Added "Click to see details" tooltip on error/warning lines - Implemented click event listeners on all error/warning lines - Click handler searches through validators to find matching error - Opens validation modal with correct validator details when clicked - Added hover effects with `transform: translateX(-2px)` and `cursor: help` ## User Experience Improvements: - ✅ Error messages are now larger and easier to read (16px) - ✅ Code snippets wrap naturally without horizontal scroll - ✅ No excessive whitespace at the beginning of code lines - ✅ Line numbers stay synchronized during scroll - ✅ Error line numbers are interactive and open detailed validation modals - ✅ Better visual hierarchy with improved spacing and sizing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <noreply@anthropic.com>
Claude Code Templates (aitmpl.com)
Ready-to-use configurations for Anthropic's Claude Code. A comprehensive collection of AI agents, custom commands, settings, hooks, external integrations (MCPs), and project templates to enhance your development workflow.
Browse & Install Components and Templates
Browse All Templates - Interactive web interface to explore and install 100+ agents, commands, settings, hooks, and MCPs.
🚀 Quick Installation
# Install a complete development stack
npx claude-code-templates@latest --agent development-team/frontend-developer --command testing/generate-tests --mcp development/github-integration
# Browse and install interactively
npx claude-code-templates@latest
# Install specific components
npx claude-code-templates@latest --agent business-marketing/security-auditor
npx claude-code-templates@latest --command performance/optimize-bundle
npx claude-code-templates@latest --setting performance/mcp-timeouts
npx claude-code-templates@latest --hook git/pre-commit-validation
npx claude-code-templates@latest --mcp database/postgresql-integration
What You Get
| Component | Description | Examples |
|---|---|---|
| 🤖 Agents | AI specialists for specific domains | Security auditor, React performance optimizer, database architect |
| ⚡ Commands | Custom slash commands | /generate-tests, /optimize-bundle, /check-security |
| 🔌 MCPs | External service integrations | GitHub, PostgreSQL, Stripe, AWS, OpenAI |
| ⚙️ Settings | Claude Code configurations | Timeouts, memory settings, output styles |
| 🪝 Hooks | Automation triggers | Pre-commit validation, post-completion actions |
| 📦 Templates | Complete project configurations with CLAUDE.md, .claude/* files and .mcp.json | Framework-specific setups, project best practices |
🛠️ Additional Tools
Beyond the template catalog, Claude Code Templates includes powerful development tools:
📊 Claude Code Analytics
Monitor your AI-powered development sessions in real-time with live state detection and performance metrics.
npx claude-code-templates@latest --analytics
💬 Conversation Monitor
Mobile-optimized interface to view Claude responses in real-time with secure remote access.
# Local access
npx claude-code-templates@latest --chats
# Secure remote access via Cloudflare Tunnel
npx claude-code-templates@latest --chats --tunnel
🔍 Health Check
Comprehensive diagnostics to ensure your Claude Code installation is optimized.
npx claude-code-templates@latest --health-check
🔌 Plugin Dashboard
View marketplaces, installed plugins, and manage permissions from a unified interface.
npx claude-code-templates@latest --plugins
📖 Documentation
📚 docs.aitmpl.com - Complete guides, examples, and API reference for all components and tools.
Contributing
We welcome contributions! Browse existing templates to see what's available, then check our contributing guidelines to add your own agents, commands, MCPs, settings, or hooks.
Please read our Code of Conduct before contributing.
Attribution
This collection includes components from multiple sources:
Agents Collection:
- wshobson/agents Collection by wshobson - Licensed under MIT License (48 agents)
Commands Collection:
- awesome-claude-code Commands by hesreallyhim - Licensed under CC0 1.0 Universal (21 commands)
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🔗 Links
- 🌐 Browse Templates: aitmpl.com
- 📚 Documentation: docs.aitmpl.com
- 💬 Community: GitHub Discussions
- 🐛 Issues: GitHub Issues
⭐ Star History
⭐ Found this useful? Give us a star to support the project!
