myaidev-method 0.2.23 → 0.2.24-1

package/src/scripts/utils/write-content.js

@@ -0,0 +1,293 @@
+#!/usr/bin/env node
+
+/**
+ * Write Content CLI
+ * Command-line wrapper for content generation
+ * Usage: node write-content.js "Topic" [options]
+ */
+
+import { ContentGenerator } from '../../lib/content-generator.js';
+import { SEOOptimizer } from '../../lib/seo-optimizer.js';
+import { logger, formatTable } from './logger.js';
+import fs from 'fs-extra';
+import path from 'path';
+
+/**
+ * Parse command line arguments
+ * @param {string[]} args - Command line arguments
+ * @returns {Object} Parsed options
+ */
+function parseArgs(args) {
+  const options = {
+    topic: '',
+    contentType: 'blog-post',
+    wordCount: 1500,
+    tone: 'professional',
+    keywords: [],
+    outputDir: './content',
+    outputFile: '',
+    analyze: false,
+    help: false
+  };
+
+  let i = 0;
+  while (i < args.length) {
+    const arg = args[i];
+
+    if (arg === '--help' || arg === '-h') {
+      options.help = true;
+    } else if (arg === '--type' || arg === '-t') {
+      options.contentType = args[++i];
+    } else if (arg === '--word-count' || arg === '-w') {
+      options.wordCount = parseInt(args[++i], 10);
+    } else if (arg === '--tone') {
+      options.tone = args[++i];
+    } else if (arg === '--keywords' || arg === '-k') {
+      options.keywords = args[++i].split(',').map(k => k.trim());
+    } else if (arg === '--output' || arg === '-o') {
+      options.outputFile = args[++i];
+    } else if (arg === '--output-dir') {
+      options.outputDir = args[++i];
+    } else if (arg === '--analyze' || arg === '-a') {
+      options.analyze = true;
+    } else if (!arg.startsWith('-')) {
+      options.topic = arg;
+    }
+
+    i++;
+  }
+
+  return options;
+}
+
+/**
+ * Show help message
+ */
+function showHelp() {
+  console.log(`
+Write Content - Content Generation CLI
+
+Usage: node write-content.js "Topic" [options]
+
+Options:
+  -h, --help              Show this help message
+  -t, --type <type>       Content type (blog-post, tutorial, how-to, listicle, product-review, comparison)
+  -w, --word-count <num>  Target word count (default: 1500)
+  --tone <tone>           Writing tone (professional, conversational, technical, casual, authoritative)
+  -k, --keywords <list>   Comma-separated keywords for SEO
+  -o, --output <file>     Output filename (auto-generated if not specified)
+  --output-dir <dir>      Output directory (default: ./content)
+  -a, --analyze           Analyze content for SEO after generation
+
+Examples:
+  node write-content.js "How to Train a Puppy" --type tutorial --tone conversational
+  node write-content.js "Best Laptops 2024" --type listicle --keywords "laptops,tech,reviews"
+  node write-content.js "React vs Vue" --type comparison --word-count 2500 --analyze
+`);
+}
+
+/**
+ * Generate content specification for the content-writer agent
+ * @param {Object} options - Generation options
+ */
+async function generateContentSpec(options) {
+  const generator = new ContentGenerator({
+    outputDir: options.outputDir,
+    tone: options.tone,
+    wordCount: options.wordCount
+  });
+
+  await generator.initialize();
+
+  // Validate options
+  const validation = generator.validateOptions(options);
+  if (!validation.valid) {
+    for (const error of validation.errors) {
+      logger.error(error);
+    }
+    process.exit(1);
+  }
+
+  // Generate content specification
+  const spec = generator.generateContentSpec(options.topic, {
+    contentType: options.contentType,
+    wordCount: options.wordCount,
+    tone: options.tone,
+    keywords: options.keywords
+  });
+
+  logger.header('Content Specification');
+  logger.log(`Topic: ${spec.topic}`);
+  logger.log(`Type: ${spec.contentType}`);
+  logger.log(`Word Count Target: ${spec.wordCount}`);
+  logger.log(`Tone: ${spec.tone}`);
+  logger.log(`Keywords: ${spec.keywords.length > 0 ? spec.keywords.join(', ') : 'None specified'}`);
+  logger.blank();
+
+  logger.section('Required Sections');
+  for (const section of spec.sections) {
+    logger.log(`  • ${section}`);
+  }
+
+  logger.section('Frontmatter Fields');
+  for (const field of spec.requiredFrontmatter) {
+    logger.log(`  • ${field}`);
+  }
+
+  // Generate filename
+  const filename = options.outputFile || generator.generateFilename(options.topic);
+  const outputPath = path.join(options.outputDir, filename);
+
+  logger.section('Output');
+  logger.log(`Filename: ${filename}`);
+  logger.log(`Path: ${outputPath}`);
+  logger.blank();
+
+  // Generate frontmatter template
+  const frontmatterData = {
+    title: options.topic,
+    description: '',
+    date: new Date().toISOString().split('T')[0],
+    author: '',
+    categories: [],
+    tags: options.keywords,
+    status: 'draft'
+  };
+
+  const frontmatter = generator.generateFrontmatter(frontmatterData);
+
+  // Create template file
+  const templateContent = `${frontmatter}
+# ${options.topic}
+
+<!-- Introduction -->
+
+## Overview
+
+[Write introduction here]
+
+${spec.sections.slice(1).map(section => `
+## ${section.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')}
+
+[Write ${section} content here]
+`).join('\n')}
+
+<!-- Call to Action -->
+
+## Conclusion
+
+[Write conclusion here]
+`;
+
+  await fs.ensureDir(options.outputDir);
+  await fs.writeFile(outputPath, templateContent, 'utf-8');
+
+  logger.success(`Template created: ${outputPath}`);
+  logger.blank();
+  logger.info('Use the content-writer agent to generate full content:');
+  logger.log(`  /myai-content-writer "${options.topic}" --type ${options.contentType}`);
+
+  return { spec, outputPath, templateContent };
+}
+
+/**
+ * Analyze existing content file
+ * @param {string} filePath - Path to content file
+ * @param {string[]} keywords - Keywords to check
+ */
+async function analyzeContent(filePath, keywords) {
+  const optimizer = new SEOOptimizer();
+
+  const content = await fs.readFile(filePath, 'utf-8');
+
+  // Extract title from frontmatter or first heading
+  const titleMatch = content.match(/^title:\s*(.+)$/m) || content.match(/^#\s+(.+)$/m);
+  const title = titleMatch ? titleMatch[1].trim() : '';
+
+  logger.header('SEO Analysis');
+  logger.log(`File: ${filePath}`);
+  logger.log(`Title: ${title || 'Not found'}`);
+  logger.blank();
+
+  const analysis = optimizer.analyzeSEO(content, keywords, title);
+
+  // Score display
+  const scoreColor = analysis.score >= 80 ? 'green' : analysis.score >= 60 ? 'yellow' : 'red';
+  logger.log(`SEO Score: ${analysis.score}/100 (Grade: ${analysis.grade})`);
+  logger.log(`Word Count: ${analysis.wordCount}`);
+  if (analysis.keywordDensity !== null) {
+    logger.log(`Keyword Density: ${analysis.keywordDensity}%`);
+  }
+  logger.blank();
+
+  // Issues
+  if (analysis.issues.length > 0) {
+    logger.section('Issues');
+    for (const issue of analysis.issues) {
+      logger.error(issue);
+    }
+  }
+
+  // Recommendations
+  if (analysis.recommendations.length > 0) {
+    logger.section('Recommendations');
+    for (const rec of analysis.recommendations) {
+      logger.warn(rec);
+    }
+  }
+
+  // Meta description
+  logger.section('Generated Meta Description');
+  const metaDesc = optimizer.generateMetaDescription(content);
+  logger.log(metaDesc);
+  logger.log(`Length: ${metaDesc.length} characters`);
+
+  // Slug
+  if (title) {
+    logger.section('Generated Slug');
+    logger.log(optimizer.generateSlug(title));
+  }
+
+  return analysis;
+}
+
+/**
+ * Main function
+ */
+async function main() {
+  const args = process.argv.slice(2);
+  const options = parseArgs(args);
+
+  if (options.help) {
+    showHelp();
+    process.exit(0);
+  }
+
+  if (!options.topic && !options.analyze) {
+    logger.error('Topic is required. Use --help for usage information.');
+    process.exit(1);
+  }
+
+  try {
+    if (options.analyze && options.topic) {
+      // If topic looks like a file path, analyze it
+      if (options.topic.endsWith('.md') || options.topic.includes('/')) {
+        await analyzeContent(options.topic, options.keywords);
+      } else {
+        // Generate spec and analyze
+        const { outputPath } = await generateContentSpec(options);
+        await analyzeContent(outputPath, options.keywords);
+      }
+    } else if (options.analyze && !options.topic) {
+      logger.error('Please provide a file path to analyze.');
+      process.exit(1);
+    } else {
+      await generateContentSpec(options);
+    }
+  } catch (error) {
+    logger.error(`Error: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+main();

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-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"
+   }
+   ```

package/src/templates/diagrams/architecture.d2

@@ -0,0 +1,52 @@
+# Architecture Diagram Template
+# Variables: {{title}}, {{direction}}, {{components}}, {{connections}}
+# Theme: 200 (Terminal theme) by default
+
+# Layout direction
+direction: {{direction || 'right'}}
+
+# Title (optional)
+{{#title}}
+title: {{title}} {
+  near: top-center
+  shape: text
+  style: {
+    font-size: 24
+    bold: true
+  }
+}
+{{/title}}
+
+# Component definitions
+{{#components}}
+{{id}}: {{label}} {
+  {{#shape}}shape: {{shape}}{{/shape}}
+  {{#icon}}icon: {{icon}}{{/icon}}
+  {{#style}}
+  style: {
+    {{#fill}}fill: "{{fill}}"{{/fill}}
+    {{#stroke}}stroke: "{{stroke}}"{{/stroke}}
+    {{#fontSize}}font-size: {{fontSize}}{{/fontSize}}
+  }
+  {{/style}}
+  {{#children}}
+  {{#children}}
+  {{id}}: {{label}} {
+    {{#shape}}shape: {{shape}}{{/shape}}
+  }
+  {{/children}}
+  {{/children}}
+}
+{{/components}}
+
+# Connections
+{{#connections}}
+{{from}} -> {{to}}{{#label}}: {{label}}{{/label}} {
+  {{#style}}
+  style: {
+    {{#stroke}}stroke: "{{stroke}}"{{/stroke}}
+    {{#strokeDash}}stroke-dash: {{strokeDash}}{{/strokeDash}}
+  }
+  {{/style}}
+}
+{{/connections}}