68 Commits

Author SHA1 Message Date
Daniel Avila f9e02079ee Remove GLM Z.AI partnership banner from main website (#339) 2026-02-07 14:24:26 -05:00
Daniel Avila 2385c92dba feat: reorganize footer into columns and update copyright year (#333)
Restructure footer from flat link list to categorized columns
(Product, Community, Resources). Add Blog and npm Package links.
Update copyright from 2025 to 2026.

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-01 20:46:38 -05:00
Daniel Avila 78fc536164 feat: add ClaudeKit featured card to homepage (#320)
Add ClaudeKit as a featured integration on the aitmpl.com homepage
with a dedicated landing page at /featured/claudekit/.

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-29 22:24:20 -05:00
Daniel Avila 8c425aff97 Neon Open Source Program (#284)
* docs: add comprehensive Neon OSS Program integration plan

Create detailed 30-day implementation plan for Neon Instagres integration:
- 4 new components (agent, command, MCP, hook) for instant Postgres provisioning
- 7 existing component enhancements with Instagres quick-start guides
- Featured integration page design (similar to BrainGrid)
- Blog article outline and homepage featured section
- Partnership deliverables: referral link integration, README logo
- Timeline, success metrics, and technical checklist

Addresses Neon OSS Program requirements and Databricks team feedback on integration strategy.

* docs: simplify Neon integration plan to Skills-focused approach

MAJOR SIMPLIFICATION:
- Reduce from 11 components to 1 powerful Skill
- Focus on auto-activating neon-instagres Skill
- Eliminate need to modify existing components
- Single install: npx claude-code-templates@latest --skill neon-instagres

Key Changes:
- Phase 1: Create neon-instagres Skill (auto-provisioning expert)
- Phase 2: Featured integration page at /featured/neon-instagres/
- Phase 3: Blog article announcing partnership
- Phase 4: Homepage featured banner
- Phase 5: README logo + CLAUDE.md updates
- Phase 6: Testing and deployment

Benefits:
- 1 Skill vs. 11 components (simpler)
- Auto-activates on database needs (zero friction)
- Works with ALL existing agents (no modifications)
- Easy to maintain and update
- Better user experience

Timeline: 30 days across 6 phases
Deliverables: 1 Skill + marketing content
Result: Instant Postgres provisioning for all Claude Code users

Addresses feedback to simplify integration and leverage Skills architecture.

* fix: correct Skill installation path to database/neon-instagres

Update all installation commands to use correct Skill path format:
- Changed from: cli-tool/components/skills/neon-instagres
- Changed to: database/neon-instagres

Skill path format is: category/skill-name
Physical location: cli-tool/components/skills/database/neon-instagres/SKILL.md
Install command: npx claude-code-templates@latest --skill database/neon-instagres

* docs: expand integration plan to showcase complete Neon template

Transform plan from single Skill to complete template ecosystem:

COMPLETE NEON TEMPLATE (9 components):
🆕 NEW:
- neon-instagres Skill (auto-provisioning entry point)

✅ EXISTING (integrated):
- 5 Neon agents (expert, database-architect, auth-specialist, migration-specialist, optimization-analyzer)
- 1 Neon MCP (Neon Management API)
- 2 Statusline settings (dev metrics, resource monitoring)

KEY CHANGES:
- Executive Summary: Highlight 9-component template
- Integration Strategy: Show Skill → agent delegation pattern
- Blog Article: Expand to cover complete template walkthrough
- Featured Page: Add 'Complete Template Components' section
- Homepage Banner: Update stats (9 Components, 5 Agents)
- Implementation Checklist: Add template integration testing
- Email to Neon: Emphasize complete ecosystem advantage

MARKETING BENEFITS:
- Positions Neon as complete development ecosystem (not just database)
- Showcases depth: provisioning → schema design → auth → migrations → optimization
- No other Postgres provider has this integration depth
- Flexible: Quick start (Skill only) OR Full template (9 components)

This approach leverages existing assets while adding instant provisioning as the entry point.

* feat: add neon-instagres Skill for instant Postgres provisioning

Create auto-activating Skill for Neon Instagres instant database provisioning:

FEATURES:
- Provisions Neon Postgres in 5 seconds via npx get-db
- Auto-activates on database-related requests
- Framework-specific integration (Next.js, Vite, Express)
- ORM setup guides (Drizzle, Prisma, TypeORM)
- Delegation to 5 existing Neon expert agents
- Security best practices (claim URL warning, .env handling)
- 72-hour claimable databases

FRONTMATTER:
- name: neon-instagres
- description: Instant Postgres provisioning with auto-activation
- allowed-tools: Read, Write, Bash, Grep, Glob
- model: sonnet
- user-invocable: true

AGENT DELEGATION:
- @neon-database-architect - Complex schema design
- @neon-auth-specialist - Authentication integration
- @neon-migration-specialist - Production migrations
- @neon-optimization-analyzer - Performance tuning
- @neon-expert - General consultation

INSTALLATION:
npx claude-code-templates@latest --skill database/neon-instagres

Reviewed by component-reviewer agent: ✅ APPROVED
Part of: Complete Neon Template (9 components)
Referral tracking: --ref 4eCjZDz

* feat: add Neon Instagres featured integration page

Create comprehensive featured page for Complete Neon Template:

STRUCTURE:
- docs/featured/neon-instagres/index.html (main page)
- docs/featured/neon-instagres/style.css (Neon-themed styling)
- docs/featured/neon-instagres/assets/ (directory for logos/images)

KEY SECTIONS:
- Hero: 4 stat cards (5s, 9 components, 5 agents, 180x faster)
- Before/After comparison (Traditional 17-30 min vs Instagres 5s)
- Quick Start: 3-step installation guide
- Features Grid: 6 key features (instant, serverless, branching, etc)
- Use Cases: 4 scenarios (prototyping, testing, learning, enterprise)
- Complete Template Components: Showcase all 9 components
- Workflow Examples: 3 real-world workflows with step-by-step flows
- Resources: Links to docs, console, Drizzle, marketplace
- CTA Footer: Call to action with Get Started buttons

DESIGN:
- Neon brand colors (#00E599 green, #0F0F0F dark)
- ASCII art header with Neon Instagres logo
- Responsive grid layouts
- Hover effects with neon glow
- Terminal-style code blocks
- Chat message examples

SEO:
- Complete Open Graph meta tags
- Twitter Card integration
- Canonical URL
- Keywords optimization

INSTALLATION OPTIONS:
- Quick Start (Skill only)
- Full Template (all 9 components in one command)

Part of: Phase 2 - Featured Page (Days 6-12)
Next: Add logo assets and Open Graph images

* feat: add complete Neon template blog article

- Create comprehensive blog article (3000+ words, 12 min read)
- Cover all 9 template components (Skill + Agents + MCP + Settings)
- Include 3 detailed workflow examples with diagrams
- Add performance benchmarks and installation guides
- Update blog-articles.json with featured article (order: 1)
- Category: Partnership, SEO-optimized for Neon integration

* feat: add Neon featured integration section to homepage

- Create neon-featured.css with Neon branding (#00E599 green)
- Add featured partnership section with 3 stats (5s, 9 Components, 5 Agents)
- Include dual CTAs (Learn More → featured page, Try Neon Free → referral)
- Fully responsive design (desktop → mobile)
- Position between partnership banner and stats section
- Gradient background with Neon brand colors
- Hover effects with neon glow

* feat: regenerate component catalog with Neon Instagres Skill

- Updated docs/components.json with new database/neon-instagres Skill
- Total skills: 357 (added 1)
- Catalog ready for deployment

* refactor: move Neon to Featured Projects carousel

- Remove standalone neon-featured-integration section
- Add Neon card to Featured Projects carousel (same format as BrainGrid)
- Delete unused neon-featured.css file
- Neon card structure: Logo + Title + Description + Arrow
- Links to: featured/neon-instagres/index.html

* refactor: redesign Neon featured page as blog-style article

- Remove all custom green Neon styling (style.css deleted)
- Follow exact BrainGrid structure and format
- Use only blog.css and styles.css with theme variables
- Simplified ASCII art header (like BrainGrid)
- Blog-style hero section with article meta
- Feature list with 8 components (Skill + 5 Agents + MCP + Statuslines)
- Code blocks for installation commands
- Workflow example with step-by-step flow
- CTA section with referral link
- All colors use CSS variables (--accent-color, --bg-primary, etc.)
- Consistent with website design system

* refactor: convert Neon featured page to technical blog format

- Remove 'in 5 Seconds' from title (now: Complete Neon Postgres Template)
- Remove publication date (only show category: Featured Partnership)
- Use proper blog structure with .article-header (max-width: 800px)
- Remove 'NEW' label from skill description
- Rewrite with technical tone instead of marketing:
  * Technical architecture overview (4 layers: Provisioning, Agent, Integration, Monitoring)
  * Detailed component specifications (Postgres 16, PgBouncer, autoscaling specs)
  * Agent delegation logic with keyword mapping
  * Usage patterns with technical flows
  * Framework-specific integration details
  * MCP API operations documentation
- Replace marketing language with technical descriptions
- Focus on implementation details and architecture

* fix: restore original header and apply proper blog article structure

- Restore Neon ASCII art header (was incorrectly changed to logo nav)
- Keep header-actions with Home and Try Neon Free buttons
- Fix article structure to use proper blog format:
  * <main class="terminal"> wrapper
  * <section class="blog-article-hero"> for title (max-width: 800px)
  * <article class="blog-article"> for content
  * <div class="article-body"> + <div class="article-content-full"> (max-width: 800px)
- Now properly constrained to 800px width like other blog articles
- Header unchanged from original design

* feat: add Neon OSS Program badge, featured card, and blog article

- Add Neon Open Source Program badge to stats-badges section
- Add Neon featured card in compact carousel (matching BrainGrid format)
- Remove duplicate featured section from PR branch
- Create blog article announcing Neon OSS Program partnership
- Create SVG cover image with Neon branding and terminal aesthetic
- Update blog-articles.json with new article (order: 0, featured)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: Migrate using-neon skill from neondatabase/agent-skills

Added comprehensive Neon Serverless Postgres skill from https://github.com/neondatabase/agent-skills

Skill: using-neon (1 skill)
- Comprehensive guide for working with Neon Serverless Postgres
- Covers getting started, connection methods, features, authentication
- Includes reference documentation for:
  - Core guides (what is Neon, features, getting started, connection methods, devtools)
  - Database drivers (serverless driver, Drizzle ORM)
  - Auth & Data API SDKs (@neondatabase/auth, @neondatabase/neon-js)
  - Platform API & CLI (TypeScript SDK, Python SDK, Neon CLI, REST API)

Total files: 29 (SKILL.md + 28 reference files)
Location: cli-tool/components/skills/database/using-neon/

All components validated - no hardcoded secrets, no absolute paths, proper frontmatter.
Regenerated catalog with updated skill count.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: add using-neon skill to featured Neon page

- Add using-neon skill description in Provisioning Layer section
- Include 28 reference docs covering core guides, drivers, auth, API/CLI
- Update installation commands to include --skill database/using-neon
- Update template component count from 9 to 10

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: add code copy buttons to Neon featured page

Add CodeCopy script to wrap pre/code blocks with copy button UI,
matching the pattern used across other blog articles.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* chore: regenerate component catalog with using-neon skill

Total skills: 630 (added database/using-neon from neondatabase/agent-skills)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-01-27 17:48:40 -05:00
Daniel Avila a98ecaa762 fix(seo): Fix social preview images and meta tags across all pages (#313)
- Fix root cause of X/Twitter preview not showing: image path was
  /social-preview.png but file is at /images/social-preview.png
- Fix component.html referencing non-existent og-image.png
- Change twitter meta tags from property= to name= (correct spec) in
  14 files (all blog articles, blog index, featured, jobs)
- Standardize image URLs from www.aitmpl.com to aitmpl.com
- Update jobs.html URLs from davila7.github.io to aitmpl.com
- Update structured data URL in index.html to aitmpl.com
- Add complete OG + Twitter Card meta tags to 5 pages that were
  missing them: trending, download-stats, plugin, sandbox-interface,
  workflows

https://claude.ai/code/session_01CXzS5mzoK3rZB6PW3QSPPd

Co-authored-by: Claude <noreply@anthropic.com>
2026-01-27 12:35:49 -05:00
Dani 76e0971528 feat(website): Move featured section above search, make skills default filter
- Move featured projects section above search bar with compact horizontal design
- Make Skills the default filter (first position, active by default)
- Add redirect from / to /skills in vercel.json
- Fix search keywords bug when keywords is an array instead of string
- Update all JS files to default to 'skills' filter

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-24 17:24:54 -05:00
Daniel Avila fdcb6ae8c1 Remove plugins section from search interface (#298)
Removed the plugins filter chip button from the component type filters
in the main search interface. The button is no longer visible under
the search bar as requested.

https://claude.ai/code/session_et25T

Co-authored-by: Claude <noreply@anthropic.com>
2026-01-21 21:44:41 -05:00
Daniel Avila 4322a2278b feat: Add Featured Projects carousel with BrainGrid (#267)
* feat: Add Featured Projects carousel with BrainGrid

- Added Featured section carousel below category filters in index.html
- Created docs/featured/braingrid/ with blog-style page design
- Implemented BrainGrid featured project page with product information
- Added CSS styles for featured carousel with responsive design
- Extended carousel.js with FeaturedCarousel class and scroll functionality
- Created SVG cover image for BrainGrid project
- Featured section includes card with image, description, and tags

* refactor: Make Featured carousel more compact with square cards

- Simplified Featured section title without command-block styling
- Changed featured cards to compact square design (280x280px)
- Replaced preview images with BrainGrid logo
- Added BrainGrid logo to article page
- Reduced card content to logo, name, minimal description, and arrow
- Updated carousel scroll amount for new card size
- Improved responsive breakpoints for mobile devices

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-01-12 22:57:59 -05:00
Dani 6eb98d96ec feat: Add Z.AI MCPs and update GLM model version
- Add 4 new Z.AI MCP integrations (vision, web-reader, web-search, zread)
- Update GLM model from 4.6 to 4.7 in coding plan
- Migrate website URLs from GitHub Pages to aitmpl.com
- Update component catalog with latest download stats

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-08 09:12:33 -05:00
Dani 613343bbaf feat: Add Z.AI partnership integration
Integrated Z.AI (GLM Coding Plan) as official sponsor with comprehensive website presence and tracking.

Partnership Features:
- Partnership banner with Z.AI branding on homepage
- GLM Coding Plan setting for Claude Code integration
- Sponsored by Z.AI badge in stats section
- Partnership section in README with discount link
- Vercel OSS Program badge added

Components Added:
- Setting: partnerships/glm-coding-plan (GLM-4.6 API configuration)
- Banner: Full-width responsive partnership banner
- Badge: "Sponsored by Z.AI" in badge collection

Tracking Implementation:
- UTM parameters for all Z.AI links (source, medium, campaign)
- Google Analytics event tracking for banner clicks
- Separate tracking for banner vs README vs badge clicks

Technical Details:
- Responsive banner design (200px desktop → 100px mobile)
- Background matches site theme (#0d1117)
- Lateral padding shows site background
- All links open in new tab with proper rel attributes

Files Modified:
- README.md: Added partnership section
- docs/index.html: Banner + badge integration
- docs/components.json: New GLM setting included
- cli-tool/components/settings/partnerships/glm-coding-plan.json

Files Added:
- docs/css/partnership-banner.css
- docs/js/partnership-banner.js
- docs/static/img/image.png

Partnership Terms:
- Monthly fee: $1,500 USD
- Discount code: 10% OFF (ic=8JVLJQFSKB)
- Sponsor: Z.AI (https://z.ai)
- Service: GLM CODING PLAN ($3/month starting)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 18:15:23 -05:00
Dani 8b788dfc9a fix skill modal and add analytics 2025-10-24 17:05:21 -04:00
Dani d6b27f48d6 feat: Add skills integration with categorization and web interface support
## Skills System
- Add 19 Anthropic skills to components/skills/ with proper categorization
- Create 4 skill categories: creative-design, development, document-processing, enterprise-communication
- Add ANTHROPIC_ATTRIBUTION.md with license information (Apache 2.0 and Source-Available)

## Data Generation
- Update generate_components_json.py to handle skills with category/skill-name structure
- Skills now use SKILL.md inside category directories
- Extract descriptions from skill frontmatter
- Support proper path generation: category/skill-name

## CLI Installation
- Update installIndividualSkill() to support category/skill-name format
- Handle both "skill-name" and "category/skill-name" installation paths
- Improve error messages with category suggestions
- Download additional files (scripts/, reference/, templates/) via GitHub API

## Web Interface
- Add skills filter chip with "NEW" label and 🎨 icon to docs/index.html
- Update JavaScript to support skills filtering and categorization
- Add skills support to shopping cart system
- Generate correct installation commands: --skill=category/skill-name
- Update data-loader.js, index-events.js, and cart-manager.js for skills

## Skills Included
### Creative & Design (4)
- algorithmic-art, canvas-design, slack-gif-creator, theme-factory

### Development (5)
- artifacts-builder, git-commit-helper, mcp-builder, skill-creator, webapp-testing

### Document Processing (6)
- docx, pdf-anthropic, pdf-processing, pdf-processing-pro, pptx, xlsx

### Enterprise Communication (4)
- brand-guidelines, email-composer, excel-analysis, internal-comms

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-17 17:27:34 -04:00
Dani ad8753272d favicon: Add favicon to all pages for consistent branding and improved UX 2025-10-15 14:58:22 -04:00
Dani 9168edbff6 add discord links to header and footer in index.html 2025-10-14 15:15:53 -04:00
Dani a91cdb7379 feat: Add plugin dashboard with real-time monitoring
- Add plugin dashboard server with WebSocket support
- Create modern web interface for plugin management
- Implement real-time plugin state detection
- Add install/enable/disable/uninstall commands
- Support status-based sorting (enabled first)
- Add auto-refresh every 30 seconds
- Update docs to showcase plugin dashboard feature
- Add smooth scroll to plugins section on banner click

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-10 13:00:06 -04:00
Dani c4ad408b77 publish plugins 2025-10-09 13:07:09 -04:00
Dani dafa27adeb chore: hide plugins filter button from main navigation 2025-10-07 17:25:08 -04:00
Dani 8ee17bda8e feat: implement plugin system with marketplace and category filters
- Add plugin marketplace system with 10 curated plugins
- Create plugin detail pages with installation instructions
- Add component installation modal with copy functionality
- Update Python script to extract plugin data with category/folder paths
- Add category filters that load correctly based on URL
- Update footer across all pages for consistency
- Fix install commands to use folder/name format

Features:
- Plugin cards with View Details button
- Individual component installation with proper paths
- Related plugins based on shared keywords
- Dynamic category loading for all filter types
- URL-based filter detection and category display

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-07 17:15:06 -04:00
Dani 787f9875b7 fix sitemap and robots.txt for SEO and add dev server 2025-09-18 10:39:11 -04:00
Dani 6925700bb3 add hotjar + jobs 2025-09-13 10:13:51 -04:00
Dani fc2396d3fc update hook 2025-09-12 15:37:54 -04:00
Dani aa329c6682 fix car and vercel routes 2025-09-10 19:41:25 -04:00
Dani 6f56132b0e Separate --studio and --sandbox commands: make --sandbox CLI-only with interactive agent selection
- Keep --studio as separate web interface command for Claude Code Studio
- Make --sandbox e2b pure CLI experience without opening web interface
- Add interactive agent selection when --agent not provided
- Agent list fetched from GitHub with option to continue without agent
- Maintain existing prompt collection and Y/n confirmation flow
- Real-time log display and folder download already working

This ensures --sandbox e2b follows the CLI workflow:
1. Check/download agents if missing
2. Prompt for input if --prompt not provided
3. Confirm E2B execution with Y/n
4. Execute and show logs
5. Download folder when complete

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-07 15:39:15 -04:00
Dani 7ed71b4a65 Fix agent format to use folder/agent-name structure in E2B sandbox commands
Corrections:
- Modal: Changed --agent=${componentPath} to correctly show folder/agent-name
- Index.html: Updated from --agent=frontend-developer to --agent=development-team/frontend-developer
- Steps section: Added missing agent specification in Cloud Sandbox step
- Tools section: Corrected E2B sandbox command format

This aligns with the CLI requirement where agents must be specified as:
--agent=folder/agent-name (e.g., development-team/frontend-developer)

The componentPath already contains the correct folder/name structure,
so this ensures the modal commands work correctly when copied.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-06 13:40:24 -04:00
Dani 1ec2031ae7 Improve E2B sandbox API key setup in modals and main page
Modal Improvements:
- Added detailed API key setup section with two methods
- Method 1: Environment variables (.env file) - recommended
- Method 2: Command line parameters - for testing
- Enhanced visual structure with separate sections for each method
- Added responsive design for mobile devices

Main Page Layout:
- E2B sandbox tool card now spans full width (3 columns)
- Improved internal layout with side-by-side .env setup
- Better spacing and organization for the expanded card
- Responsive breakpoints for mobile and tablet

Users now have clear, easy-to-follow instructions for both modal
components and main page examples with API key management.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-04 21:36:19 -04:00
Dani 7ad9eca197 add blog 2025-08-27 23:29:36 -04:00
Dani 593cb4b955 add browsermcp y trending data 2025-08-27 18:13:48 -04:00
Dani 4828eccc22 new search layout 2025-08-26 20:21:31 -04:00
Dani 72057758f8 add trending 2025-08-25 20:07:11 -04:00
Dani 1aed3e1900 add MIT license 2025-08-24 14:43:10 -04:00
Dani 6201418bc0 feat: Update .gitignore to include .vscode and adjust CSS styles for terminal interface
- Added .vscode to .gitignore to prevent IDE settings from being tracked.
- Changed CodeGPT API key from "Ollama" to "OpenAI" in settings.json.
- Modified CSS styles for various components to enhance the terminal interface, including adjustments to padding, margins, and grid layouts.
- Introduced new terminal-style search functionality in index.html with improved search input handling and results display.
- Enhanced JavaScript event handling for category filters and search functionality, including debouncing and dynamic category display.
- Updated search results formatting to reflect terminal-style aesthetics.
2025-08-19 07:31:35 -04:00
Dani f1f900b9d5 ✨ Update Vercel status line command: simplify command output and enhance deployment status display; hide search button by default in documentation 2025-08-16 13:03:26 -04:00
daniel e29e018d07 🔍 Move search button to first position and hide category filters when active
- Move search button to first position in filter-buttons row
- Remove display:none from search button to make it visible
- Add category-filter-btn class to all category filter buttons
- Update toggleSearch() function to hide/show category filters:
  - When search is active: hide all category-filter-btn and category-filter-label elements
  - When search is inactive: restore normal display of category filters
- Improved UX: clean interface switching between search mode and filter mode

User experience:
1. Click 🔍 Search button (first in row)
2. Category filters disappear, search bar appears
3. Click 🔍 Search button again to return to normal filter view

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-15 15:04:34 -04:00
daniel 11c9db4500 🎉 Complete Search Functionality & Cart Manager Overhaul
## Search System ✨
- ✅ Real-time search across all components (agents, commands, settings, hooks, MCPs)
- ✅ Intelligent scoring algorithm with multi-field matching
- ✅ Search result cards with full flip functionality and compact design
- ✅ Proper integration with global event handlers
- ✅ Hover effects and copy button functionality matching normal cards
- ✅ Keyboard shortcuts (Escape, Enter) and responsive design

## Cart Manager Fixes 🛒
- ✅ Added support for settings and hooks categories (5 total categories)
- ✅ Updated cart initialization, UI, and command generation
- ✅ Fixed JavaScript errors when adding settings/hooks to cart
- ✅ Added proper cart sections and icons for all component types

## Technical Improvements 🔧
- ✅ Fixed showComponentDetails function calls with correct parameters
- ✅ Matching HTML structure with normal cards (command-display, command-code-container)
- ✅ Proper CSS styling with debug helpers for troubleshooting
- ✅ Compact card design optimized for available space
- ✅ Search button temporarily hidden per user request

## Additional Features 📋
- ✅ Added comprehensive ASCII roadmap for future development phases
- ✅ Enhanced component path handling and category conversions
- ✅ Improved error handling and component loading

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-14 14:11:23 -04:00
daniel c26bcd5417 🔍 Add Intelligent Search Functionality to Components Filter
- Added search button to filter buttons section with toggle functionality
- Implemented real-time search across all component categories (except templates)
- Search triggers after 3+ characters with 300ms debouncing for performance
- Searches through component names, descriptions, categories, tags, and keywords
- Added comprehensive search UI with input field, clear button, and results info
- Display search results grouped by category with match scoring
- Shows "No results" with helpful search suggestions when no matches found
- Integrated with existing cart functionality and component installation commands
- Added keyboard shortcuts (Escape to close, Enter to focus first result)
- Responsive design with mobile-optimized search interface
- Search data loaded from main components.json with fallback mechanisms

Features:
✅ Search across agents, commands, settings, hooks, and MCPs
✅ Real-time results with intelligent scoring algorithm
✅ Category-based result grouping and filtering
✅ Keyboard navigation support
✅ Mobile-responsive search interface
✅ Integration with existing cart and installation workflows
✅ Performance optimized with debouncing and caching

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-14 12:05:08 -04:00
daniel a5c904b3e5 🎨 Update index.html for improved clarity and user engagement in Claude Code documentation 2025-08-14 11:41:16 -04:00
daniel 21e0e9ce75 🔍 Enhance SEO for Claude Code Templates with Anthropic Integration
- Updated title and meta descriptions to emphasize Anthropic Claude Code connection
- Added structured data (JSON-LD) for better search engine understanding
- Enhanced keywords to include "Claude Opus 4.1", "terminal velocity", "deep coding"
- Added "Official Claude Code" button linking to anthropic.com/claude-code
- Repositioned messaging to align with Anthropic's official Claude Code value propositions
- Improved OG and Twitter card descriptions for better social sharing
- Added product/platform meta tags for better categorization

SEO targeting: "Claude Code", "Anthropic Claude", "AI development", "Claude Opus 4.1"

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-14 11:17:17 -04:00
daniel 85f7615305 feat: Add Settings and Hooks components system with conflict detection
- Add 9 Settings components (telemetry, permissions, model, cleanup)
- Add 6 Hooks components (formatting, git integration, backups, testing)
- Implement CLI installation with --setting and --hook flags
- Add conflict detection that prompts user before overwriting
- Merge settings into .claude/settings.json with intelligent deep merge
- Update data-loader.js to handle new component types
- Add filter buttons for Settings and Hooks in web interface
- Generate components.json with new Settings and Hooks sections

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-13 22:08:14 -04:00
Dani cd6b220ba7 feat: new layout chat 2025-08-08 12:57:40 -04:00
Dani ddbeb768ab 🎨 Major UI Improvements - Step 2, Tools, Footer & Mobile UX
## Step 2 Enhancement:
✅ Updated "Choose & Run Template" to "Build Your Stack"
✅ Reflects new shopping cart functionality for complete stacks
✅ Cleaner messaging focused on multi-component solutions

## New Tool Added:
✅ **Live Chat Monitor**: npx claude-code-templates@latest --chats
✅ Real-time Claude message monitoring and tool execution analysis
✅ Third tool card for comprehensive development workflow

## Footer Redesign:
✅ **AITMPL ASCII branding** on the left with tagline
✅ **Removed Download Analytics** - cleaner link structure
✅ **Added docs.aitmpl.com** as Documentation link
✅ **Centered links** to avoid cart button overlap
✅ Better mobile responsive layout with proper spacing

## Stats Section:
✅ More compact spacing closer to header
✅ Reduced margins and padding for cleaner layout
✅ Better mobile optimization with smaller badges

## Mobile UX:
✅ Footer links avoid floating cart button interference
✅ Proper spacing and responsive breakpoints
✅ Clean ASCII art scaling on mobile devices

Professional, modern interface with improved visual hierarchy.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-07 12:02:59 -04:00
Dani e047871836 🔧 Remove Cart Sidebar Background Blur - Cards Now Visible
- Disabled cart-sidebar::before overlay that was blurring background
- Removed backdrop-filter blur effect completely
- Cards remain fully visible and readable when cart is open
- Maintains JavaScript overlay for click-to-close functionality
- Background content no longer blocked or dimmed
2025-08-07 11:40:40 -04:00
Dani e66651c0c3 🚀 Major Performance Optimizations - Mobile Loading Issues Fixed
## Critical Issues Resolved:
- **Lazy loading**: Components.json now loads in 50-item batches instead of 1.6MB at once
- **Timeouts**: Added 8-second timeouts to prevent hanging fetches
- **Loading states**: Visual progress indicators for better UX
- **MutationObserver**: Optimized with debouncing and selective monitoring
- **Background loading**: Non-blocking progressive loading
- **Error handling**: Comprehensive fallbacks and user-friendly error messages

## Technical Improvements:
- RequestAnimationFrame instead of setTimeout for smoother animations
- Debounced DOM updates to prevent excessive reflows
- Intelligent caching with cache-friendly timestamps
- Progressive enhancement with fallback data
- Memory-efficient pagination system
- Performance-optimized CSS animations

## Mobile-Specific Fixes:
- Reduced initial payload from 1.6MB to ~200KB
- Prevented UI thread blocking during data parsing
- Added mobile-optimized loading states
- Improved error handling for slow connections

This should resolve the mobile freezing issues completely.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-06 13:57:26 -04:00
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 4059c65153 social-preview in root 2025-08-04 18:49:19 -04:00
Dani d0d3ea0c7f social media links in header 2025-08-04 18:36:13 -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
Dani e80f72cd8f 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>
2025-08-03 09:50:07 -04:00
Dani 9940d043f2 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>
2025-08-03 09:22:39 -04:00
Dani 1e8b0be89d feat: implement elegant download tracking system with analytics dashboard
- ✨ Add comprehensive download tracking infrastructure
- 📊 Create detailed analytics dashboard at /download-stats.html
- 🔧 Implement GitHub Actions workflow for stats processing
- 🎨 Add elegant footer link instead of main page widget
- 📈 Support interactive charts with Chart.js integration
- 🔒 Maintain privacy-first approach with anonymous tracking
- 📱 Responsive design for mobile and desktop
- 🚀 Ready for production deployment

Components added:
- GitHub Actions workflow for manual tracking triggers
- Analytics JSON data structure and processing
- Interactive dashboard with doughnut and line charts
- Progress bars and detailed component metrics
- Terminal-style design consistent with site theme

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-01 08:49:40 -04:00
Dani ce931a6ab0 fix(docs): Comment out download stats section in index.html 2025-07-31 21:02:15 -04:00