myaidev-method 0.2.23 → 0.2.24-2

package/src/templates/claude/agents/visual-content-generator.md

@@ -683,6 +683,130 @@ console.log(`\nReview the image and confirm it meets your requirements.`);
 - Execute using standard Node.js commands
 - All features available
 
+## HTML Conversion Mode (Precise Visuals)
+
+For data-driven visuals requiring pixel-perfect accuracy, use HTML conversion instead of AI image generation.
+
+### When to Use HTML Conversion
+
+| Use Case | Recommended Tool |
+|----------|-----------------|
+| Infographics with exact numbers/data | **HTML Conversion** |
+| Creative/artistic images | AI Image Generation |
+| Diagrams with specific text labels | **HTML/D2 Conversion** |
+| Photorealistic scenes | AI Image Generation |
+| Presentation slides (PPTX) | **HTML → PPTX** |
+| Charts and graphs | **HTML Conversion** |
+| Architecture diagrams | **D2 Conversion** |
+
+### HTML Conversion Benefits
+
+- **Perfect text accuracy** - No AI hallucinations on text/numbers
+- **Reproducible** - Same input = identical output every time
+- **Free** - No API costs (local Puppeteer rendering)
+- **Fast** - Renders in < 1 second
+- **Editable** - Modify source HTML to update
+
+### Available Templates
+
+**HTML Templates:**
+- `data-chart` - Bar/pie charts from data
+- `comparison-table` - Side-by-side comparisons
+- `process-flow` - Step-by-step processes (vertical/horizontal/timeline)
+
+**D2 Diagram Templates:**
+- `architecture` - System architecture diagrams
+- `flowchart` - Decision flowcharts
+- `sequence` - Sequence diagrams
+
+### Using HTML Conversion
+
+```javascript
+const {
+  templateToVisual,
+  d2TemplateToVisual,
+  htmlToPng,
+  htmlToPdf,
+  htmlToPptx
+} = require('./src/lib/html-conversion-utils.js');
+
+// Generate infographic from template
+const result = await templateToVisual('data-chart', {
+  title: 'Q4 Revenue by Region',
+  chartType: 'bar',
+  items: [
+    { label: 'North America', value: '$2.4M', percentage: 85, color: '#3b82f6' },
+    { label: 'Europe', value: '$1.8M', percentage: 64, color: '#10b981' }
+  ]
+}, 'png');
+
+console.log(`Generated: ${result.path}`);
+console.log(`Cost: $0.00 (local rendering)`);
+
+// Generate D2 architecture diagram
+const diagram = await d2TemplateToVisual('architecture', {
+  title: 'System Architecture',
+  components: [
+    { id: 'user', label: 'User', shape: 'person' },
+    { id: 'api', label: 'API Gateway' },
+    { id: 'db', label: 'Database', shape: 'cylinder' }
+  ],
+  connections: [
+    { from: 'user', to: 'api', label: 'HTTPS' },
+    { from: 'api', to: 'db', label: 'SQL' }
+  ]
+}, 'png');
+```
+
+### CLI Usage
+
+```bash
+# List available templates
+node src/scripts/html-conversion-cli.js list
+
+# Generate from HTML template
+node src/scripts/html-conversion-cli.js template data-chart \
+  --data '{"title":"Sales Report","items":[...]}' \
+  --format png
+
+# Generate D2 diagram
+node src/scripts/html-conversion-cli.js d2 "user -> api -> db" --format png
+
+# Generate PPTX presentation
+node src/scripts/html-conversion-cli.js pptx ./slides/ --output presentation.pptx
+```
+
+### Decision Guide: AI vs HTML
+
+**Choose AI Image Generation when:**
+- Creative/artistic output needed
+- Photorealistic imagery
+- Abstract concepts without specific data
+- Unique visual styles
+
+**Choose HTML Conversion when:**
+- Specific numbers, statistics, or data
+- Text must be accurate (company names, metrics)
+- Architecture/technical diagrams
+- Process flows with exact steps
+- Comparison tables with specific features
+- Presentation decks from data
+
+### Example: Hybrid Approach
+
+For articles, combine both methods:
+
+```javascript
+// Hero image → AI (creative)
+const hero = await generateImage(prompt, { type: 'hero' });
+
+// Data chart → HTML (accurate)
+const chart = await templateToVisual('data-chart', chartData, 'png');
+
+// Architecture diagram → D2 (precise)
+const arch = await d2TemplateToVisual('architecture', archData, 'png');
+```
+
 ## Summary
 
 You are responsible for:
@@ -690,9 +814,10 @@ You are responsible for:
 2. ✅ Gathering user requirements (prompt, type, service preferences)
 3. ✅ Estimating costs and checking budgets
 4. ✅ Generating images/videos using appropriate APIs
-5. ✅ Saving to organized directory structure
-6. ✅ Tracking usage and costs
-7. ✅ Returning markdown references
-8. ✅ Providing helpful error messages and alternatives
+5. ✅ **Using HTML conversion for data-driven/precise visuals**
+6. ✅ Saving to organized directory structure
+7. ✅ Tracking usage and costs
+8. ✅ Returning markdown references
+9. ✅ Providing helpful error messages and alternatives
 
 Always prioritize user experience, cost transparency, and quality results.

package/src/templates/claude/commands/myai-content-enrichment.md

@@ -0,0 +1,227 @@
+---
+name: myai-content-enrichment
+description: Enrich existing articles with real-time data and AI-generated visuals
+tools: Read, Write, Edit, Bash, SlashCommand
+---
+
+Enhance existing articles with real-time data from enrichment apps and optionally add context-aware visuals.
+
+## Task
+
+Enrich the article at: $ARGUMENTS
+
+## What This Does
+
+**Does NOT write new content.** Takes existing markdown and:
+- Runs data enrichment apps (network latency, brand extraction)
+- Updates content with real, current data
+- Optionally generates visuals using enrichment context (via `/myai-generate-visual`)
+
+## Usage
+
+```bash
+# Add network data to article
+/myai-content-enrichment "article.md" --app network ashburn-va
+
+# Extract branding + generate branded visuals
+/myai-content-enrichment "article.md" --app branding https://example.com --with-images
+
+# Full enrichment (auto-detect apps + visuals)
+/myai-content-enrichment "article.md" --app all --with-images --auto
+```
+
+## Flags
+
+**Data Apps:**
+- `--app branding <url>` - Extract brand colors/styling
+- `--app network <location>` - Run latency tests (ashburn-va, los-angeles, chicago, europe, asia)
+- `--app all` - Auto-detect and run relevant apps
+- `--auto` - Skip confirmation prompts
+
+**Visuals:**
+- `--with-images` - Generate visuals with enrichment data
+- `--regenerate-images` - Replace existing images
+- `--no-images` - Skip visuals (default if not specified)
+
+**Options:**
+- `--preserve-original` - Backup before modifying
+
+## Workflow
+
+### 1. Parse & Validate
+- Read target article
+- Parse flags
+- Confirm apps to run (unless `--auto`)
+
+### 2. Run Data Apps
+**Network App** (`--app network <location>`):
+- Execute: `node src/scripts/ping.js 'location'`
+- Save: `./data/latency-test-YYYYMMDD.md`
+- Extract metrics for content
+
+**Branding App** (`--app branding <url>`):
+- Check cache: `brand_design_guidelines.md`
+- If not cached: Navigate → Screenshot → Analyze → Cache
+- Store brand colors/style for visuals
+
+### 3. Update Content
+- Find relevant sections (e.g., performance data)
+- Inject real metrics
+- Add data citations
+- Preserve original voice/style
+
+### 4. Generate Visuals (Optional)
+**If `--with-images` or `--regenerate-images`:**
+- Analyze article sections needing visuals
+- Build enriched prompts:
+  - Base: Article context
+  - Add brand: `primary #2245C4, accent #19FFF4, modern professional style`
+  - Add data: `Ashburn 24.5ms, Chicago 31.4ms, LA 45.2ms`
+- Delegate to `/myai-generate-visual` with enriched prompt
+- Embed generated images with captions
+
+See `/myai-generate-visual --help` for visual generation details.
+
+### 5. Finalize
+- Save enriched article (backup if `--preserve-original`)
+- Report what was enriched
+
+## Data Apps Reference
+
+### Network Latency
+
+**Script:** `src/scripts/ping.js`  
+**Locations:** ashburn-va, los-angeles, chicago, europe, asia  
+**Output:** `./data/latency-test-YYYYMMDD.md`
+
+```bash
+node src/scripts/ping.js 'ashburn-va' 'europe'
+```
+
+### Brand Extraction
+
+**Cache:** `brand_design_guidelines.md`  
+**Process:** Playwright screenshot → Color/style analysis → Cache  
+**Reuse:** Once cached, reused for all future enrichments
+
+## Example
+
+**Before:**
+```markdown
+# Cloud Hosting Performance
+Performance varies by location.
+```
+
+**Command:**
+```bash
+/myai-content-enrichment "article.md" --app network ashburn-va --app branding https://mycompany.com --with-images --auto
+```
+
+**After:**
+```markdown
+# Cloud Hosting Performance
+
+Performance varies by location. Our real-time tests show:
+
+- **Ashburn, VA**: 24.5ms average latency
+- **Chicago, IL**: 31.4ms average latency
+
+![Network Performance](./content-assets/images/2026-01-16/infographic-network-latency-123456.png)
+*Real-time tests conducted 2026-01-16. Source: ./data/latency-test-20260116.md*
+```
+
+**Visual:** Infographic with your brand colors showing exact latency on US map.
+
+## Output Report
+
+```
+✅ Enrichment Complete: cloud-hosting-guide.md
+
+Apps Run:
+  • Network: ashburn-va, chicago
+  • Branding: https://mycompany.com (cached)
+
+Data Updated:
+  • Performance section: +2 real metrics
+  • Added data citation
+
+Visuals Generated:
+  • Network infographic (via /myai-generate-visual)
+    File: ./content-assets/images/2026-01-16/infographic-network-latency.png
+    Cost: $0.02
+
+File: ./cloud-hosting-guide.md
+Backup: ./cloud-hosting-guide.original.md
+```
+
+## Use Cases
+
+**Refresh old data:**
+```bash
+/myai-content-enrichment "old-article.md" --app network ashburn-va --update-data
+```
+
+**Add brand to generic content:**
+```bash
+/myai-content-enrichment "guide.md" --app branding https://mycompany.com --with-images
+```
+
+**Rebrand existing content:**
+```bash
+/myai-content-enrichment "article.md" --app branding https://newsite.com --regenerate-images
+```
+
+**Full pipeline:**
+```bash
+/myai-content-enrichment "article.md" --app all --with-images --auto
+```
+
+## Integration
+
+**Content Pipeline:**
+```bash
+# 1. Write
+/myai-content-writer "Cloud Hosting" word_count:2000
+
+# 2. Enrich
+/myai-content-enrichment "cloud-hosting.md" --app network ashburn-va --with-images
+
+# 3. Publish
+/myai-wordpress-publish "cloud-hosting.md"
+```
+
+**Visual Delegation:**
+```bash
+# Enrichment calls this internally:
+/myai-generate-visual "Network infographic showing Ashburn 24.5ms, use brand #2245C4" --type illustration
+```
+
+## Technical Notes
+
+**Visual Generation (Stage 4):**
+1. Build enriched prompt from context + app data
+2. Invoke: `SlashCommand('/myai-generate-visual "prompt" --type illustration')`
+3. Parse output for image path
+4. Embed: `![alt](path)\n*caption*`
+
+**Prompt Enhancement Pattern:**
+```javascript
+const prompt = `${baseDescription}, use brand colors: ${brand.primary} ${brand.accent}, show latency: ${network.metrics}`;
+```
+
+## Related Commands
+
+- `/myai-content-writer` - Write articles
+- `/myai-generate-visual` - Generate visuals standalone
+- `/myai-wordpress-publish` - Publish to WordPress
+
+## Error Handling
+
+**Article not found:** Check file path  
+**App fails:** Check network/URL accessibility  
+**Visual fails:** Ensure `/myai-configure visual` is set up  
+**Budget exceeded:** Visual generation has cost limits
+
+---
+
+**Philosophy:** Enrichment enhances, it doesn't replace. Preserve the original article's voice and intent.

package/src/templates/claude/commands/myai-content-writer.md

@@ -1,35 +1,14 @@
 ---
 name: myai-content-writer
-description: Professional content writer for SEO-optimized articles with optional AI-generated visuals
-tools: Read, Write, Edit, WebSearch, WebFetch, Task, Bash
+description: Professional content writer for SEO-optimized articles and blog posts
+tools: Read, Write, Edit, WebSearch, WebFetch, Task
 ---
 
-You are a professional content writer specializing in creating high-quality, engaging, and SEO-optimized content with optional AI-generated visual content.
+You are a professional content writer specializing in creating high-quality, engaging, and SEO-optimized content.
 
 ## Task
-Create comprehensive, well-researched content based on the provided topic: $ARGUMENTS
-
-## Visual Content Generation (New!)
-
-The MyAIDev Method now supports AI-powered visual content generation. Use the `--with-images` flag to automatically generate:
-- Hero images for article headers
-- Illustrations for concepts
-- Diagrams for technical workflows
-- Supporting visual content
-
-**Example Usage:**
-```bash
-/myai-content-writer "Microservices Architecture" --with-images
-/myai-content-writer "AI Best Practices" --with-images --service=dalle
-/myai-content-writer "Developer Guide" --with-images --word-count=1500
-```
 
-**Prerequisites**: User must configure visual generation APIs first:
-```bash
-/myai-configure visual
-```
-
-**Available Services**: Gemini 2.5 Flash ($0.02), Imagen 3 ($0.03), DALL-E 3 ($0.04-0.12), Veo 2 ($0.10 for video)
+Create comprehensive, well-researched content based on the provided topic: $ARGUMENTS
 
 ## Core Competencies
 
@@ -62,6 +41,20 @@ The MyAIDev Method now supports AI-powered visual content generation. Use the `-
 5. **Optimization**: Review for clarity, accuracy, and SEO
 6. **Formatting**: Ensure proper Markdown formatting
 
+## Parameters Supported
+
+- Topic (required): Main subject matter
+- `--word-count`: Target length (default: 800)
+- `--tone`: professional, casual, technical, conversational, academic
+- `--audience`: Target reader demographic
+- `--keywords`: Primary and secondary keywords
+- `--publish-wordpress`: Auto-publish as draft (true/false)
+
+**Example:**
+```bash
+/myai-content-writer "Machine Learning Best Practices" word_count:1500 tone:technical
+```
+
 ## Output Requirements
 
 Save the content as a markdown file with the following structure:
@@ -80,24 +73,42 @@ category: [Primary category]
 [Content with proper heading hierarchy]
 ```
 
-## Parameters Supported
+## Content Enrichment (Post-Writing)
 
-- Topic (required): Main subject matter
-- `--word-count`: Target length (default: 800)
-- `--tone`: professional, casual, technical, conversational, academic
-- `--audience`: Target reader demographic
-- `--keywords`: Primary and secondary keywords
-- `--publish-wordpress`: Auto-publish as draft (true/false)
-- `--with-images`: Generate AI-powered visual content (new!)
-- `--service`: Preferred image generation service (gemini, imagen, dalle)
-- `--image-count`: Number of images to generate (default: auto-determined)
+After creating your article, you can enhance it with real-time data and AI-generated visuals using the enrichment command:
+
+```bash
+/myai-content-enrichment "your-article.md" --app network ashburn-va --with-images
+```
+
+**Enrichment Features:**
+- Add real network latency data to infrastructure/hosting articles
+- Extract brand colors/styling for consistent illustrations
+- Generate context-aware visuals with enrichment data
+- Update existing articles with fresh data
+
+See `/myai-content-enrichment --help` for full documentation.
 
 ## WordPress Integration
 
-If publish_to_wordpress is requested:
+If `--publish-wordpress` is requested:
 1. Save the content locally first
 2. Check for WordPress configuration in environment variables
 3. Use the WordPress MCP to create a draft post
 4. Report the draft URL to the user
 
-Always prioritize user value over keyword density. Write for humans first, search engines second.
+## Workflow
+
+**Typical usage:**
+```bash
+# Step 1: Write the article
+/myai-content-writer "Cloud Hosting Guide" word_count:2000 tone:professional
+
+# Step 2: (Optional) Enrich with data and visuals
+/myai-content-enrichment "cloud-hosting-guide.md" --app network ashburn-va --with-images --auto
+
+# Step 3: (Optional) Publish to WordPress
+/myai-wordpress-publish "cloud-hosting-guide.md" --status draft
+```
+
+Always prioritize user value over keyword density. Write for humans first, search engines second.

package/src/templates/claude/commands/myai-convert-html.md

@@ -0,0 +1,186 @@
+---
+name: myai-convert-html
+description: Convert HTML templates to PNG, PDF, or PPTX formats for precise visual content
+---
+
+# HTML Conversion Tool
+
+Convert HTML templates and D2 diagrams to images, PDFs, and presentations with pixel-perfect accuracy.
+
+## When to Use This Tool
+
+Use HTML conversion when you need:
+- **Data-driven infographics** with precise numbers and text
+- **Comparison tables** with exact formatting
+- **Process diagrams** with specific labels
+- **Architecture diagrams** using D2 language
+- **Presentation slides** (PPTX) from HTML content
+
+## Available Commands
+
+### List Templates
+```bash
+node src/scripts/html-conversion-cli.js list
+```
+
+### Convert HTML Template
+```bash
+# Basic usage
+node src/scripts/html-conversion-cli.js template data-chart --data '{"title":"Sales Report","items":[...]}' --format png
+
+# With output file
+node src/scripts/html-conversion-cli.js template comparison-table --data data.json --output comparison.png
+```
+
+### Convert D2 Diagram
+```bash
+# From inline script
+node src/scripts/html-conversion-cli.js d2 "user -> api -> database" --format png
+
+# From file
+node src/scripts/html-conversion-cli.js d2 diagram.d2 --format svg --theme 200
+```
+
+### Convert D2 Template
+```bash
+node src/scripts/html-conversion-cli.js d2-template architecture --data '{"title":"System Design",...}' --format svg
+```
+
+### Convert Raw HTML
+```bash
+node src/scripts/html-conversion-cli.js html custom.html --format pdf
+```
+
+### Generate PPTX
+```bash
+# From directory of HTML slides
+node src/scripts/html-conversion-cli.js pptx ./slides/ --output presentation.pptx
+
+# From JSON configuration
+node src/scripts/html-conversion-cli.js pptx slides.json --title "Q4 Report" --author "Team"
+```
+
+## Built-in Templates
+
+### HTML Templates
+
+1. **data-chart** - Bar/pie charts with data visualization
+   ```json
+   {
+     "title": "Revenue by Region",
+     "chartType": "bar",
+     "items": [
+       {"label": "North America", "value": 45, "percentage": 90, "color": "#3b82f6"},
+       {"label": "Europe", "value": 32, "percentage": 64, "color": "#10b981"}
+     ]
+   }
+   ```
+
+2. **comparison-table** - Side-by-side feature comparisons
+   ```json
+   {
+     "title": "Plan Comparison",
+     "layout": "table",
+     "columns": [{"name": "Basic"}, {"name": "Pro", "highlight": true}],
+     "rows": [{"feature": "Users", "values": [{"text": "5"}, {"text": "Unlimited"}]}]
+   }
+   ```
+
+3. **process-flow** - Step-by-step process diagrams
+   ```json
+   {
+     "title": "Development Workflow",
+     "layout": "vertical",
+     "steps": [
+       {"number": 1, "title": "Planning", "description": "Define requirements"}
+     ]
+   }
+   ```
+
+### D2 Templates
+
+1. **architecture** - System architecture diagrams
+2. **flowchart** - Decision flowcharts
+3. **sequence** - Sequence diagrams
+
+## HTML vs AI Image Generation
+
+| Use Case | Recommended Tool |
+|----------|-----------------|
+| Infographics with exact data | HTML Conversion |
+| Creative/artistic images | AI Image Generation |
+| Diagrams with specific text | HTML/D2 Conversion |
+| Photorealistic scenes | AI Image Generation |
+| Presentations/slides | HTML → PPTX |
+| Charts and graphs | HTML Conversion |
+
+## Example Workflow
+
+1. **Create data file** (data.json):
+```json
+{
+  "title": "Q4 Performance Report",
+  "subtitle": "Year over Year Growth",
+  "chartType": "bar",
+  "items": [
+    {"label": "Revenue", "value": "$2.4M", "percentage": 85, "color": "#3b82f6"},
+    {"label": "Users", "value": "150K", "percentage": 72, "color": "#10b981"},
+    {"label": "Retention", "value": "94%", "percentage": 94, "color": "#f59e0b"}
+  ],
+  "source": "Internal Analytics"
+}
+```
+
+2. **Generate PNG**:
+```bash
+node src/scripts/html-conversion-cli.js template data-chart --data data.json --format png --output q4-report.png
+```
+
+3. **Generate PDF**:
+```bash
+node src/scripts/html-conversion-cli.js template data-chart --data data.json --format pdf --output q4-report.pdf
+```
+
+## D2 Diagram Quick Reference
+
+D2 is a declarative diagram language. Quick syntax:
+
+```d2
+# Nodes
+user: User {shape: person}
+api: API Server
+db: Database {shape: cylinder}
+
+# Connections
+user -> api: HTTP
+api -> db: SQL
+
+# Grouping
+backend: Backend {
+  api
+  db
+}
+```
+
+Install D2: `curl -fsSL https://d2lang.com/install.sh | sh`
+
+## Tips
+
+1. **Preview templates** before generating final output:
+   ```bash
+   node src/scripts/html-conversion-cli.js preview data-chart
+   ```
+
+2. **Use high DPI** for print quality:
+   ```bash
+   node src/scripts/html-conversion-cli.js template data-chart --data data.json --scale 3
+   ```
+
+3. **Custom styling** via template data:
+   ```json
+   {
+     "accentColor": "#6366f1",
+     "accentGradient": "#4f46e5",
+     "backgroundColor": "#fafafa"
+   }
+   ```