Commit Graph

14 Commits

Author SHA1 Message Date
daniel aecc44c4e1 chore: Remove 90 debug console.log statements from docs/js/
Remove debug console.log statements across 9 files while preserving
all console.error in catch blocks and console.warn for missing data.
Add agent-teams-guide blog cover image.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-07 21:22:22 -05:00
Daniel Avila 5d05a756c8 feat: add blog article for Hackathon AI Strategist agent (#334)
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-01 20:41:47 -05:00
Daniel Avila 8e28fd1d7b feat: add blog article for Vercel Deployment Monitor statusline (#331)
https://claude.ai/code/session_014a9y1MmuZ3NmZSkwSSH3sQ

Co-authored-by: Claude <noreply@anthropic.com>
2026-02-01 13:02:02 -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 109f09870f Add SVG cover image for security hooks blog article (#312)
* feat(blog): Add SVG cover and fix header/footer for security-hooks-secrets article

- Create SVG cover image with black background, terminal on left, security shield on right
- Rewrite blog HTML to use external CSS (styles.css, blog.css) instead of inline styles
- Fix header to match other blogs (container, header-content, header-actions with SVG icons)
- Fix footer to match other blogs (footer-left, footer-right, proper links with icons)
- Add Google Analytics, Hotjar, favicon, structured data, and SEO metadata
- Add CodeCopy and MarkdownCopier JavaScript functionality
- Update blog-articles.json to reference new SVG cover

https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5

* fix(blog): Add table styles for article content in blog CSS

Tables inside .article-content-full had no styling since the blog
uses external CSS. Added proper th/td padding, borders, and hover states.

https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5

* fix(blog): Update info box text to clarify blog explains the hook

The blog explains how the hook works, not manual setup instructions.
Updated text to encourage direct CLI installation while reading on.

https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5

* fix(blog): Sort articles newest first in blog listing and featured carousel

Reverse default sort order from ascending to descending by order field,
so the most recently published article appears first in both the main
list and the featured posts carousel.

https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5

* feat(agents): Add blog-writer agent for creating blog articles from components

Agent follows a 6-step workflow:
1. Read the component file
2. Ask user to confirm title, tags, difficulty, category, cover style
3. Create SVG cover (black bg, terminal left, icon right, white title)
4. Create HTML article with proper header/footer structure
5. Update blog-articles.json with highest order number
6. Final verification checklist

Encodes all blog creation knowledge: external CSS only, installation
first, info-box wording, CodeCopy/MarkdownCopier scripts, table
styling, OG metadata, structured data, and article ordering.

https://claude.ai/code/session_012BdwtCSYzJbaEWNApX7bB5

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-01-27 10:53:43 -05:00
Daniel Avila d2c3401c59 feat: Add HeyGen Best Practices Skill blog article (#307) 2026-01-24 23:10:46 -05:00
Daniel Avila ccec4021ab Add React Best Practices Skill blog article and cover image (#300)
* feat: Add React Best Practices Skill blog article

Created comprehensive blog article for the React Best Practices skill:
- Added react-best-practices-skill/index.html with full content
- Created SVG cover image for the blog article
- Updated blog-articles.json with new entry
- Article covers 40+ performance optimization rules
- Includes installation guide, usage examples, and optimization categories
- Added Spanish call-to-action linking to aitmpl.com

https://claude.ai/code/session_01FDf1pgux14yR8TeEsmbHcr

* fix: Remove Spanish content and statistics from React blog article

- Changed Spanish banner to English
- Removed "Real-World Impact" section with percentage statistics
- Removed specific numbers from code comments (200KB+, 2KB)
- Removed token count references (~500 tokens)
- Changed "#1 performance killer" to "major performance killer"
- Removed "specific impact metrics" references
- Changed "40+ rules" and "8 optimization categories" to general text

https://claude.ai/code/session_01FDf1pgux14yR8TeEsmbHcr

* feat: Add code syntax highlighting and remove Additional Resources

- Removed "Additional Resources" section with external links
- Added CodeCopy class for automatic code block formatting
- Added MarkdownCopier class for improved markdown export
- Bash/terminal code blocks now have copy buttons
- Code blocks auto-detect language (bash, typescript, javascript, etc.)
- Terminal prompts are cleaned when copying code
- Added hover effects for components banner
- Code blocks now styled as terminal-block for bash commands

https://claude.ai/code/session_01FDf1pgux14yR8TeEsmbHcr

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-01-22 23:43:46 -05:00
Dani 7de42f1dd8 chore: Update CLAUDE.md, blog articles, and add simple-notifications-hook post
- Simplify CLAUDE.md documentation (remove verbose sections)
- Improve create-blog-article command with better template instructions
- Add new blog article: Simple Notifications Hook
- Update blog articles metadata and cleanup HTML
- Enhance blog loader with improved filtering

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-01-03 17:27:14 -05:00
Dani e85bfd3b4f feat(blog): update blog articles and generate new images
This commit includes several updates to the blog:
- Adds a new blog post creation command.
- Updates existing blog articles with new content and fixes.
- Regenerates blog images with a new script.
- Fixes a rendering issue in the skills-creator article by adding the necessary JavaScript for code block styling.
2026-01-01 14:43:10 -05:00
Dani c1cf14d2c2 feat: Add blog cover images generated with Nano Banana
- Generated 4 blog cover images using Google AI Nano Banana (gemini-2.5-flash-image)
- Created generate_blog_images.py script for automated image generation
- Images: frontend-developer-agent, code-reviewer-agent, context7-mcp, skills-creator
- Professional tech/terminal aesthetic with orange accent colors
- 16:9 aspect ratio optimized for blog headers
2025-12-31 22:11:50 -05:00
Dani bdb92f1af2 add png 2025-09-11 14:03:37 -04:00
Dani 75eed8e8de fixing vercel blog y add statusline components 2025-09-01 14:47:13 -04:00
Dani eb19e71952 new blog new vercel components 2025-08-31 18:35:52 -04:00
Dani 7ad9eca197 add blog 2025-08-27 23:29:36 -04:00