daniel 519fdf0950 perf: split components.json to cut dashboard browser payload
The dashboard is on Cloudflare Pages with a 24h edge cache already in
place, but every island still downloaded the full ~1.9MB index (327KB
gz) — even the sidebars/plugins/collection pages that only need per-type
counts. This splits the index into purpose-built artifacts so the
browser fetches only what each surface needs.

Generator (scripts/generate_components_json.py):
- Decouple the docs and dashboard index writes (they were a byte copy).
  docs/components.json keeps `security` (the legacy site renders it);
  the dashboard index drops both `content` and `security` (unused there)
  → ~13% smaller.
- Emit dashboard/public/counts.json (per-type counts, ~150 bytes),
  components/{type}.json (per-type slices), and search-index.json
  (flat name/description/category/type/path for global search).

Dashboard islands:
- ComponentGrid loads only the active type via fetchComponentsByType,
  re-fetching on type switch (per-type in-memory cache).
- SearchModal (Cmd+K) uses the lighter search-index.json.
- Sidebar + plugins index/detail + collection pages fetch counts.json
  instead of the full index just to read array lengths.
- data.ts gains fetchComponentsByType/fetchSearchIndex (additive);
  fetchComponents() stays for the SSR detail page and Discord bot.

Fix: SendToRepoModal read `match.content` off an index that no longer
carries content, so "Send to repo" produced empty PRs / threw "No
component content found". buildFileMap now pulls each item's content via
fetchComponentContent (the per-component files), which also removes its
full-index fetch.

_headers: cache/CORS blocks for counts.json, components/*, search-index.json.

Payload (gzip on-the-wire): sidebars/plugins/collection 327KB → ~124B;
grid default type (agents) 327KB → 145KB; Cmd+K 327KB → 260KB.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-04 16:20:24 -04:00
2025-11-09 12:20:27 -05:00

npm version npm downloads License: MIT PRs Welcome Sponsored by Z.AI Claude for Open Source Neon Open Source Program Buy Me A Coffee GitHub stars

davila7%2Fclaude-code-templates | Trendshift

Vercel OSS Program    Neon Open Source Program    Claude for Open Source


🧪 NEW: Dashboard — Explore components, manage collections, and track installations at www.aitmpl.com. Currently in beta — feedback welcome!

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.

Screenshot 2025-08-19 at 08 09 24

🚀 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 --yes

# Browse and install interactively
npx claude-code-templates@latest

# Install specific components
npx claude-code-templates@latest --agent development-tools/code-reviewer --yes
npx claude-code-templates@latest --command performance/optimize-bundle --yes
npx claude-code-templates@latest --setting performance/mcp-timeouts --yes
npx claude-code-templates@latest --hook git/pre-commit-validation --yes
npx claude-code-templates@latest --mcp database/postgresql-integration --yes

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
🎨 Skills Reusable capabilities with progressive disclosure PDF processing, Excel automation, custom workflows

🛠️ 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:

Scientific Skills:

Official Anthropic:

Community Skills & Agents:

  • obra/superpowers by Jesse Obra - MIT License (14 workflow skills)
  • alirezarezvani/claude-skills by Alireza Rezvani - MIT License (36 professional role skills)
  • wshobson/agents by wshobson - MIT License (48 agents)
  • NerdyChefsAI Skills - Community contribution - MIT License (specialized enterprise skills)

Commands & Tools:

Each of these resources retains its original license and attribution, as defined by their respective authors. We respect and credit all original creators for their work and contributions to the Claude ecosystem.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Stargazers over time

Stargazers over time


⭐ Found this useful? Give us a star to support the project!

Buy Me A Coffee

S
Description
senior-data-scientist: World-class data science skill for statistical modeling, experimentation, causal inference, and advanced analytics. Expertise in Python (NumPy, Pandas,…; senior-backend: Comprehensive backend development skill for building scalable backend systems using NodeJS, Express, Go, Python, Postgres, GraphQL, REST APIs. Includes API…; excel-analysis: Analyze Excel spreadsheets, create pivot tables, generate charts, and perform data analysis. Use when analyzing Excel files, spreads…
Readme MIT 256 MiB
Languages
Python 44.1%
HTML 13.7%
JavaScript 12.6%
TypeScript 9.5%
TeX 7.7%
Other 12%