davila7__claude-code-templates

mirror of https://github.com/davila7/claude-code-templates.git synced 2026-09-19 01:30:23 +08:00

Author	SHA1	Message	Date
Dani	66be089cb7	Implement comprehensive shopping cart system for Claude Code Templates - Add Shopify-style cart sidebar with drag-from-right animation - Implement Add to Stack buttons for all component cards - Create dynamic command generation for agents, commands, and MCPs - Add cart state management with localStorage persistence - Implement notification system with auto-dismiss - Add social sharing for X/Twitter and Threads - Create overlay copy buttons for command text in cards and cart - Optimize card layout grid system (4 columns desktop, 2 tablet, 1 mobile) - Add cart floating button with item count badge - Fix scroll prevention and notification persistence issues - Remove quotes from agent parameters in generated commands - Implement compact cart item design with Clear All repositioning - Add comprehensive cart styling with responsive design - Include share functionality with proper URL encoding - Update CLI package version to 1.14.16 for npm compatibility 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-06 08:53:34 -04:00
Dani	921d55efb5	add commands and mcps	2025-08-04 14:58:32 -04:00
Dani	4b0953fdcd	add mcp descriptions	2025-08-04 13:55:52 -04:00
Dani	53c1ddc054	add mcp-server-atlassian-bitbucket	2025-08-04 10:34:08 -04:00
Dani	ec5ba6b488	refactor: move MCP description field inside mcpServer configuration - Move description field from root level to inside individual mcpServer configs - Update Python script to extract descriptions from mcpServer objects - Enhance CLI to remove description fields from within mcpServer configs - Ensure only clean mcpServers configuration is written to .mcp.json - Maintain frontend display functionality with descriptions from mcpServer objects Structure change: FROM: { "description": "...", "mcpServers": { "server": { ... } } } TO: { "mcpServers": { "server": { "description": "...", ... } } } 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-04 09:45:01 -04:00
Dani	8c0a027e7b	feat: add description field support for MCP components - Add description field to MCP JSON files for frontend display - Update generate_components_json.py to extract MCP descriptions - Modify CLI to exclude description field from downloaded .mcp.json files - Update frontend to display MCP descriptions in component cards - Implement separate description handling for MCPs vs other components Key changes: • MCP JSON files now include description field above mcpServers • Python script extracts descriptions into separate field in components.json • CLI automatically removes description field during installation • Frontend shows descriptive text for MCP cards using description field • Maintains backward compatibility with existing MCP installations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-04 09:37:46 -04:00
Dani	64e028bcd9	fix: remove Git merge conflict markers from components.json - Clean up Git merge conflict markers that were causing JSON parse errors - Fix syntax error at line 911 (position 424673) - Restore proper JSON structure for MCP components - Resolves data-loader.js error when loading components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-04 09:03:21 -04:00
Dani	f0ef2bbc80	resolve: merge conflict in components.json Keep local version with complete component data including: - All templates with .claude folder structure - MCP components with descriptions - Framework-specific commands and agents 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-04 09:00:21 -04:00
Dani	95409bfd5b	chore: clean up untracked files and update components data - Update components.json with latest data - Clean up temporary test directories and files - Prepare for merge to main branch 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-04 08:59:03 -04:00
Daniel Avila	e9b18ba38e	feat: comprehensive templates system enhancement and code organization (#61 ) * feat: implement comprehensive Workflow Builder system ## 🔧 Workflow Builder Web Interface - Drag-and-Drop Canvas: Visual workflow building with sortable steps - Component Library: Browse and search all agents, commands, and MCPs - Real-time Preview: Live workflow statistics and step management - Hash Generation: Secure workflow encoding with CryptoJS - YAML Export: Generate executable workflow files - Modal Interface: Professional workflow generation dialog ## ⚡ CLI Workflow Installation - --workflow option: Install workflows from hash (format: #hash) - Batch Installation: Download all workflow components automatically - Silent Mode: Clean output when installing multiple components - YAML Generation: Create step-by-step execution files - Error Handling: Comprehensive validation and user guidance ## 🎨 UI/UX Features - Responsive Design: Works on desktop and mobile devices - Professional Styling: Clean, modern interface with proper theming - Interactive Components: Hover effects, drag feedback, and animations - Search Functionality: Filter components by name and category - Navigation Integration: Added workflows link to main header ## 🔗 Architecture - Modular Frontend: Separate CSS and JS files for maintainability - GitHub Integration: Dynamic component loading from organized categories - Local Storage: Workflow state management for hash generation - Component Tracking: Analytics integration for usage monitoring ## 🚀 Workflow Execution Flow 1. Build: Create workflows in drag-and-drop interface 2. Generate: Export hash and YAML configuration 3. Install: Use CLI with generated hash to download all components 4. Execute: Use YAML file with Claude Code for step-by-step automation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: improve workflow organization and hide UI during testing ## 📁 Workflow Organization - Dedicated Workflows Folder: Create `.claude/workflows/` directory for better organization - Clean File Structure: Separate workflow YAML files from other components - Improved Path Display: Show correct relative path in installation success message ## 🔒 UI Access Control - Hidden Workflows Button: Comment out workflows navigation button during testing phase - Controlled Rollout: Keep feature accessible via direct URL while testing - Clean Header: Maintain professional appearance while feature is in beta ## 🧪 Testing Results - ✅ Workflow files now saved to `.claude/workflows/filename.yaml` - ✅ Directory structure: agents/, commands/, workflows/ for better organization - ✅ UI button hidden but functionality fully working - ✅ Direct URL access still available for testing: `/docs/workflows.html` Workflow installation now creates: ``` .claude/ ├── agents/ ├── commands/ ├── workflows/ │ └── workflow_name.yaml └── .mcp.json ``` 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: add comprehensive Claude Code workflow execution instructions ## 🤖 Smart Workflow YAML Generation - Detailed Instructions: Complete guide for Claude Code on how to execute workflows - Step-by-Step Guidance: Exact execution pattern and behavior expectations - Context Preservation: Instructions to maintain outputs between workflow steps - Error Handling: Clear error management and recovery procedures - Progress Tracking: Built-in progress reporting and status updates ## 📋 YAML Structure Enhancements - Professional Headers: Clear visual separation with decorative borders - Execution Phases: Preparation, Execution, Completion, and Error Handling - Component References: Direct paths to installed agents, commands, and MCPs - Configuration Settings: Timeout, error handling, and confirmation options - Summary Section: Overview of steps, timing, and component requirements ## 🎯 Claude Code Integration - Workflow Mode: Enable dedicated workflow execution behavior - Sequential Execution: Step-by-step processing with dependency management - User Confirmation: Optional approval before each step execution - Context Continuity: Maintain state and outputs throughout workflow - Component Validation: Verify all required components are installed ## 📝 Instruction Categories 1. Execution Behavior: READ → EXECUTE → CONFIRM → CONTINUE 2. Step Pattern: Announce → Action → Confirm → Next 3. Component Usage: Agents, Commands, MCPs with specific file locations 4. Error Management: Stop on failure with clear diagnostics 5. Progress Updates: Real-time status and completion reporting ## 🚀 Generated YAML Features - Clear visual structure with section dividers - Detailed per-step Claude instructions - File path references (.claude/agents/, .claude/commands/, etc.) - Execution templates for each step type - Comprehensive workflow summary with timing estimates - Production-ready configuration settings This ensures Claude Code will understand exactly how to execute workflows automatically, maintaining context between steps and providing a smooth automation experience. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: enhance workflow builder UI with professional design and accordion interface ## 🎨 Professional Header Design - Elegant Layout: Gradient background with proper spacing and shadows - Logo Section: Enhanced icon and gradient text styling - Navigation: Clean nav buttons with icons and active states - Responsive: Proper container and mobile-friendly design ## 🗂️ Accordion Component Organization - Main Categories: Agents, Commands, MCPs with collapsible sections - Subcategory Accordions: Each component type organized by functionality - Component Counts: Real-time counters for each section and subcategory - Visual Hierarchy: Clear nested structure with proper indentation ## 📋 Component Details Modal - Info Button: Clean "ℹ️" button on each component item - Comprehensive Details: Type, category, path, and usage information - Dynamic Description: Fetches and displays component descriptions from GitHub - Usage Commands: Copy-to-clipboard functionality for CLI commands - Add to Workflow: Direct addition from modal to workflow canvas ## 🔧 GitHub API Error Handling - Rate Limit Protection: Graceful handling of 403 errors - Fallback Behavior: Continue loading other components if one fails - User-Friendly: No more console errors for API limitations - Robust Loading: Better error handling throughout the app ## 🎯 UI/UX Improvements - Clean Component Cards: Removed category badges, added details button - Smooth Animations: Accordion open/close with arrow rotation - Better Typography: Improved font sizes and spacing - Professional Modals: Enhanced modal design with proper structure - Consistent Styling: Unified color scheme and spacing ## 📱 Responsive Features - Mobile-Friendly: Accordions work well on smaller screens - Touch-Friendly: Proper button sizes and touch targets - Flexible Layout: Adapts to different screen sizes - Accessible: Proper keyboard navigation and ARIA attributes The workflow builder now provides a professional, intuitive interface for creating complex automation workflows with a clean, organized component library. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: restore subcategory filters and card flip functionality - Add updateCategorySubFilters() method to dynamically generate category filter buttons - Restore availableCategories system to track component categories - Implement setCategoryFilter() for category-specific filtering - Update generateComponentCard() to use template-card structure with flip functionality - Add collectAvailableCategories() to populate category sets - Add global setCategoryFilter function for onclick events - Restore card flip event listeners and ESC key handling - Update grid class names for proper CSS styling * feat: restore all missing functionality from original script.js ✅ ERRORES SOLUCIONADOS: 1. Conteo de items en filter-buttons: - Agregada función updateFilterCounts() que muestra (X) items en cada botón - Se actualiza automáticamente cuando cambian los datos 2. Descripción de cards acortada: - getComponentDescription() ahora trunca a 120 caracteres máximo - Mantiene las cards con el tamaño correcto para el layout 3. Cards "Add New" restauradas: - createAddComponentCard() genera cards de "Add New" por tipo - Se muestran al inicio de cada filtro (agents, commands, mcps) - Incluyen iconos y colores específicos por tipo 4. Lógica compleja de Templates restaurada: - displayTemplates() usa la lógica original de script.js - createTemplateCard() y createAddTemplateCard() para templates - fetchTemplatesConfig() y parseTemplatesConfig() para GitHub data - Framework icons mapping completo - Cards con flip animation y estructura compleja 📋 FUNCIONALIDAD COMPLETA RESTAURADA: - ✅ Subcategory filters (category-filter-row) - ✅ Card styling con flip animations - ✅ Available categories system - ✅ Filter button counts - ✅ Short descriptions for proper display - ✅ Add New cards por cada tipo - ✅ Complex Templates logic con GitHub integration * feat: implement complete showComponentContributeModal with code editor ✅ MODAL "ADD NEW" IMPLEMENTADO: 🔧 showComponentContributeModal() completamente funcional: - Modal con estructura component-modal igual al de Details - 3 secciones como solicitaste: 1. Frase corta inicial: Descripción específica del tipo de item 2. Installation command: Comando de instalación con botón Copy 3. Component Details: Editor de código con números de línea 📝 Estructura del modal: - Header con icono, título "Add New [Type]" y badge de tipo - Body con las 3 secciones requeridas - Actions con link a GitHub para ver ejemplos existentes 💻 Editor de código con números: - CSS agregado a workflows-modal.css - Números de línea en columna izquierda - Contenido formateado como código - Soporte para markdown, yaml, json - Monospace font y syntax highlighting ready 🎯 Configuración por tipo: - Agents: Ejemplo de python-testing-specialist con metadata YAML - Commands: Ejemplo de optimize-bundle con descripción markdown - MCPs: Ejemplo de redis-integration con configuración JSON 🔄 Integración completa: - closeComponentModal() agregado globalmente - Event listeners para ESC key - Remove existing modal antes de mostrar nuevo - onClick en las cards "Add New" funciona correctamente * feat: comprehensive templates system enhancement and code organization ## Major Features Added ### 🏗️ Templates System Overhaul - New data source: Templates now load from `components.json` generated from `cli-tool/templates/` - Enhanced structure: Support for both language and framework templates - Recursive file scanning: Includes `.claude/` folder contents (agents, commands, settings) - Smart categorization: Language-based category filters for templates - Proper install commands: `--template=python --yes` for languages, `--template=django --yes` for frameworks ### 📦 Template Management - Updated generate_components_json.py: Scans `cli-tool/templates/` recursively - File inventory: Tracks all template files including Claude Code configuration - Template modal: Shows complete file list for each template - GitHub integration: Direct links to template folders ### 🎨 UI/UX Improvements - Card flip animations: Restored original template card functionality from script.js - MCP optimization: Removed unnecessary descriptions from MCP cards and modals - Category filters: Templates now show language-based filters (python, ruby, etc.) - Filter reset: Switching main filters automatically resets category selection - Enhanced modals: Comprehensive template contribution guide with language vs framework instructions ### 🔧 Code Organization - Structured directories: Moved all CSS files to `css/` and JS files to `js/` - Updated references: All HTML files now reference organized file paths - Better maintainability: Cleaner project structure for future development ### 🚀 Enhanced Contribution Flow - Detailed template modal: Step-by-step guide for contributing languages vs frameworks - Required file structure: Clear documentation of Claude Code configuration files - GitHub workflow: Proper git commands and testing instructions ## Technical Improvements - Fixed card flip functionality conflicts - Enhanced pagination system - Improved modal management - Better error handling and fallbacks - Consistent styling across components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>	2025-08-03 20:01:04 -04:00
Dani	36714d2d8b	feat: comprehensive templates system enhancement and code organization ## Major Features Added ### 🏗️ Templates System Overhaul - New data source: Templates now load from `components.json` generated from `cli-tool/templates/` - Enhanced structure: Support for both language and framework templates - Recursive file scanning: Includes `.claude/` folder contents (agents, commands, settings) - Smart categorization: Language-based category filters for templates - Proper install commands: `--template=python --yes` for languages, `--template=django --yes` for frameworks ### 📦 Template Management - Updated generate_components_json.py: Scans `cli-tool/templates/` recursively - File inventory: Tracks all template files including Claude Code configuration - Template modal: Shows complete file list for each template - GitHub integration: Direct links to template folders ### 🎨 UI/UX Improvements - Card flip animations: Restored original template card functionality from script.js - MCP optimization: Removed unnecessary descriptions from MCP cards and modals - Category filters: Templates now show language-based filters (python, ruby, etc.) - Filter reset: Switching main filters automatically resets category selection - Enhanced modals: Comprehensive template contribution guide with language vs framework instructions ### 🔧 Code Organization - Structured directories: Moved all CSS files to `css/` and JS files to `js/` - Updated references: All HTML files now reference organized file paths - Better maintainability: Cleaner project structure for future development ### 🚀 Enhanced Contribution Flow - Detailed template modal: Step-by-step guide for contributing languages vs frameworks - Required file structure: Clear documentation of Claude Code configuration files - GitHub workflow: Proper git commands and testing instructions ## Technical Improvements - Fixed card flip functionality conflicts - Enhanced pagination system - Improved modal management - Better error handling and fallbacks - Consistent styling across components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-08-03 19:59:20 -04:00

11 Commits