@opendirectory.dev/skills 0.1.59 → 0.1.61

package/skills/graphic-chart/scripts/export-chart.sh

@@ -0,0 +1,182 @@
+#!/usr/bin/env bash
+# export-chart.sh — Screenshot a Chart.js HTML file as a high-quality retina PNG
+#
+# Usage:
+#   bash scripts/export-chart.sh <path-to-html> [output.png] [--width N] [--height N]
+#
+# Examples:
+#   bash scripts/export-chart.sh ./my-chart/chart.html
+#   bash scripts/export-chart.sh ./my-chart/chart.html ./chart.png --width 1200 --height 628
+#
+# What this does:
+#   1. Starts a local HTTP server so CDN scripts and fonts load correctly
+#   2. Launches headless Chromium at the specified viewport with deviceScaleFactor: 2
+#   3. Waits for window.__chartReady === true (set by Chart.js animation.onComplete)
+#   4. Takes a PNG screenshot — output is 2× the specified dimensions (retina quality)
+#   5. Cleans up temp files and opens the result
+#
+# Output PNG = 2× viewport size (e.g. 1080×1080 viewport → 2160×2160 PNG)
+set -euo pipefail
+
+# ─── Colors ────────────────────────────────────────────────
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+CYAN='\033[0;36m'
+YELLOW='\033[1;33m'
+BOLD='\033[1m'
+NC='\033[0m'
+
+info()  { echo -e "${CYAN}ℹ${NC} $*"; }
+ok()    { echo -e "${GREEN}✓${NC} $*"; }
+warn()  { echo -e "${YELLOW}⚠${NC} $*"; }
+err()   { echo -e "${RED}✗${NC} $*" >&2; }
+
+# ─── Parse flags ──────────────────────────────────────────
+WIDTH=1080
+HEIGHT=1080
+
+POSITIONAL=()
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        --width)  WIDTH="$2";  shift 2 ;;
+        --height) HEIGHT="$2"; shift 2 ;;
+        *)        POSITIONAL+=("$1"); shift ;;
+    esac
+done
+set -- "${POSITIONAL[@]}"
+
+# ─── Input validation ─────────────────────────────────────
+
+if [[ $# -lt 1 ]]; then
+    err "Usage: bash scripts/export-chart.sh <path-to-html> [output.png] [--width N] [--height N]"
+    err ""
+    err "Examples:"
+    err "  bash scripts/export-chart.sh ./my-chart/chart.html"
+    err "  bash scripts/export-chart.sh ./my-chart/chart.html ./chart.png --width 1200 --height 628"
+    exit 1
+fi
+
+INPUT_HTML="$1"
+if [[ ! -f "$INPUT_HTML" ]]; then
+    err "File not found: $INPUT_HTML"
+    exit 1
+fi
+
+INPUT_HTML=$(cd "$(dirname "$INPUT_HTML")" && pwd)/$(basename "$INPUT_HTML")
+
+if [[ $# -ge 2 ]]; then
+    OUTPUT_PNG="$2"
+else
+    OUTPUT_PNG="$(dirname "$INPUT_HTML")/$(basename "$INPUT_HTML" .html).png"
+fi
+
+OUTPUT_DIR=$(dirname "$OUTPUT_PNG")
+mkdir -p "$OUTPUT_DIR"
+OUTPUT_PNG="$OUTPUT_DIR/$(basename "$OUTPUT_PNG")"
+
+echo ""
+echo -e "${BOLD}╔══════════════════════════════════════╗${NC}"
+echo -e "${BOLD}║       Export Chart to PNG             ║${NC}"
+echo -e "${BOLD}╚══════════════════════════════════════╝${NC}"
+echo ""
+info "Viewport: ${WIDTH}×${HEIGHT}px → PNG output: $((WIDTH*2))×$((HEIGHT*2))px @2× retina"
+echo ""
+
+# ─── Step 1: Check Node.js ────────────────────────────────
+
+info "Checking dependencies..."
+
+if ! command -v node &>/dev/null; then
+    err "Node.js is required but not installed."
+    err ""
+    err "Install Node.js:"
+    err "  macOS:   brew install node"
+    err "  or visit https://nodejs.org and download the installer"
+    exit 1
+fi
+
+ok "Node.js found ($(node --version))"
+
+# ─── Step 2: Create temp dir + copy screenshot script ─────
+
+TEMP_DIR=$(mktemp -d)
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+TEMP_SCRIPT="$TEMP_DIR/screenshot-chart.mjs"
+cp "$SCRIPT_DIR/screenshot-chart.mjs" "$TEMP_SCRIPT"
+
+SERVE_DIR=$(dirname "$INPUT_HTML")
+HTML_FILENAME=$(basename "$INPUT_HTML")
+
+# ─── Step 3: Install Playwright ───────────────────────────
+
+info "Setting up Playwright (headless Chromium)..."
+info "This may take a moment on first run..."
+echo ""
+
+cd "$TEMP_DIR"
+
+cat > "$TEMP_DIR/package.json" << 'PKG'
+{ "name": "chart-export", "private": true, "type": "module" }
+PKG
+
+npm install playwright 2>/dev/null || {
+    err "Failed to install Playwright."
+    err "Try running: npm install playwright"
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+
+npx playwright install chromium 2>/dev/null || {
+    err "Failed to install Chromium browser for Playwright."
+    err "Try running manually: npx playwright install chromium"
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+
+ok "Playwright ready"
+echo ""
+
+# ─── Step 4: Screenshot ───────────────────────────────────
+
+info "Launching headless Chromium and capturing chart..."
+echo ""
+
+node "$TEMP_SCRIPT" \
+    "$SERVE_DIR" \
+    "$HTML_FILENAME" \
+    "$OUTPUT_PNG" \
+    "$WIDTH" \
+    "$HEIGHT" || {
+    err "Chart screenshot failed."
+    err ""
+    err "Common causes:"
+    err "  - window.__chartReady never set (check animation.onComplete in HTML)"
+    err "  - Chart.js CDN script failed to load (check internet connection)"
+    err "  - HTML syntax error (open in browser to verify)"
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+
+# ─── Step 5: Cleanup + success ────────────────────────────
+
+rm -rf "$TEMP_DIR"
+
+echo ""
+echo -e "${BOLD}════════════════════════════════════════${NC}"
+ok "Chart exported successfully!"
+echo ""
+echo -e "  ${BOLD}File:${NC}  $OUTPUT_PNG"
+echo ""
+FILE_SIZE=$(du -h "$OUTPUT_PNG" | cut -f1 | xargs)
+echo "  Size: $FILE_SIZE"
+echo "  Dimensions: $((WIDTH*2))×$((HEIGHT*2))px (@2× retina)"
+echo ""
+echo "  Ready for social, decks, reports, or email."
+echo -e "${BOLD}════════════════════════════════════════${NC}"
+echo ""
+
+if command -v open &>/dev/null; then
+    open "$OUTPUT_PNG"
+elif command -v xdg-open &>/dev/null; then
+    xdg-open "$OUTPUT_PNG"
+fi

package/skills/graphic-chart/scripts/screenshot-chart.mjs

@@ -0,0 +1,143 @@
+// screenshot-chart.mjs — Capture an ECharts v6 HTML file as a retina-quality PNG
+//
+// Args: <serve-dir> <html-filename> <output-png> <width> <height>
+//
+// How it works:
+//   1. Starts a local HTTP server to serve the HTML and allow CDN scripts to load
+//   2. Launches Chromium at the specified viewport with deviceScaleFactor: 2
+//      → output PNG is 2× viewport dimensions (retina quality)
+//   3. Waits for window.__chartReady === true
+//      → set by chart.on('finished', ...) in the HTML (registered BEFORE setOption)
+//      → belt-and-suspenders: also set by chart.on('rendered', ...) + 100ms debounce
+//      → ECharts bug #14101/#17500: 'finished' silently skips if registered after setOption
+//   4. Takes the screenshot and saves as PNG
+//
+// CRITICAL: The HTML must register events BEFORE chart.setOption():
+//   chart.on('finished', () => { window.__chartReady = true; });
+//   chart.on('rendered', () => { clearTimeout(t); t = setTimeout(() => { window.__chartReady = true; }, 100); });
+//   chart.setOption(option);   // setOption LAST
+
+import { chromium } from 'playwright';
+import { createServer } from 'http';
+import { readFileSync, writeFileSync } from 'fs';
+import { join, extname } from 'path';
+
+const SERVE_DIR    = process.argv[2];
+const HTML_FILE    = process.argv[3];
+const OUTPUT_PNG   = process.argv[4];
+const VP_WIDTH     = parseInt(process.argv[5]) || 1080;
+const VP_HEIGHT    = parseInt(process.argv[6]) || 1080;
+
+// ─── Static file server ───────────────────────────────────
+// Required for CDN scripts and Google Fonts to load via HTTP
+// (file:// protocol blocks cross-origin requests)
+
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.css':  'text/css',
+  '.js':   'application/javascript',
+  '.json': 'application/json',
+  '.png':  'image/png',
+  '.jpg':  'image/jpeg',
+  '.svg':  'image/svg+xml',
+  '.woff': 'font/woff',
+  '.woff2':'font/woff2',
+  '.ttf':  'font/ttf',
+};
+
+const server = createServer((req, res) => {
+  const decoded = decodeURIComponent(req.url);
+  const filePath = join(SERVE_DIR, decoded === '/' ? HTML_FILE : decoded);
+  try {
+    const content = readFileSync(filePath);
+    const ext = extname(filePath).toLowerCase();
+    res.writeHead(200, { 'Content-Type': MIME_TYPES[ext] || 'application/octet-stream' });
+    res.end(content);
+  } catch {
+    res.writeHead(404);
+    res.end('Not found');
+  }
+});
+
+const port = await new Promise((resolve) => {
+  server.listen(0, () => resolve(server.address().port));
+});
+
+console.log(`  Local server on port ${port}`);
+
+// ─── Launch browser at 2× deviceScaleFactor ──────────────
+// deviceScaleFactor: 2 → screenshot is 2× VP dimensions (retina)
+// --font-render-hinting=none → sharper text on Linux CI
+
+const browser = await chromium.launch({
+  args: [
+    '--no-sandbox',
+    '--disable-dev-shm-usage',
+    '--font-render-hinting=none',
+  ]
+});
+
+const context = await browser.newContext({
+  viewport: { width: VP_WIDTH, height: VP_HEIGHT },
+  deviceScaleFactor: 2,
+});
+
+const page = await context.newPage();
+
+// Capture browser console errors for diagnostics
+const pageErrors = [];
+page.on('console', msg => {
+  if (msg.type() === 'error') pageErrors.push(msg.text());
+});
+page.on('pageerror', err => pageErrors.push(err.message));
+
+// ─── Navigate and wait for chart ─────────────────────────
+// Use networkidle to ensure CDN scripts (Chart.js, plugins) finish loading
+// before we check window.__chartReady
+
+await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle' });
+
+// Wait for fonts (CDN Google Fonts need a moment)
+await page.evaluate(() => document.fonts.ready);
+
+// Wait for Chart.js to finish rendering
+// window.__chartReady is set by animation.onComplete in the HTML
+// Timeout: 15s — generous to allow CDN scripts on slow networks
+console.log('  Waiting for chart to render...');
+try {
+  await page.waitForFunction(() => window.__chartReady === true, { timeout: 15000 });
+} catch {
+  // Provide a helpful error message
+  const bodyHTML = await page.evaluate(() => document.body.innerHTML.substring(0, 500));
+  console.error('  ERROR: window.__chartReady was never set after 15s.');
+  if (pageErrors.length > 0) {
+    console.error('  Browser console errors:');
+    pageErrors.forEach(e => console.error('   ', e));
+  }
+  console.error('  Check that your HTML chart config includes:');
+  console.error('    animation: { duration: 0, onComplete: () => { window.__chartReady = true; } }');
+  console.error('  If using CDN scripts, verify internet access from the headless browser.');
+  console.error('  Page body preview:', bodyHTML);
+  await browser.close();
+  server.close();
+  process.exit(1);
+}
+
+console.log('  Chart rendered — taking screenshot');
+
+// ─── Screenshot ───────────────────────────────────────────
+// animations: 'disabled' stops CSS transitions — does NOT affect Chart.js canvas
+// The canvas is already fully drawn at this point (waited for __chartReady)
+
+await page.screenshot({
+  path: OUTPUT_PNG,
+  animations: 'disabled',
+  clip: { x: 0, y: 0, width: VP_WIDTH, height: VP_HEIGHT },
+});
+
+await browser.close();
+server.close();
+
+const { statSync } = await import('fs');
+const sizeKB = Math.round(statSync(OUTPUT_PNG).size / 1024);
+console.log(`  ✓ PNG saved: ${OUTPUT_PNG} (${sizeKB}KB, ${VP_WIDTH * 2}×${VP_HEIGHT * 2}px)`);

package/skills/vid-motion-graphics/README.md

@@ -0,0 +1,87 @@
+# vid-motion-graphics
+
+Generates multi-scene motion graphics as MP4 from a content brief. HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg. No React, no AI APIs, no Python.
+
+## Install
+
+```bash
+npx "@opendirectory.dev/skills" install vid-motion-graphics --target claude
+```
+
+### Video Tutorial
+Watch this quick video to see how it's done:
+
+https://github.com/user-attachments/assets/ee98a1b5-ebc4-452f-bbfb-c434f2935067
+
+### Step 1: Download the skill from GitHub
+1. Click the **Code** button on this repo's GitHub page.
+2. Select **Download ZIP** to download the repository.
+3. Extract the ZIP file on your computer.
+
+### Step 2: Install the Skill in Claude
+1. Open your **Claude desktop app**.
+2. Go to the sidebar on the left side and click on the **Customize** section.
+3. Click on the **Skills** tab, then click on the **+** (plus) icon button to create a new skill.
+4. Choose the option to **Upload a skill**, and drag and drop the `.zip` file (or you can extract it and drop the folder, both work).
+
+> **Note:** Make sure you are uploading the folder that contains the `SKILL.md` file!
+
+## What it does
+
+1. Takes a content brief (what each scene should say) and style params
+2. Generates a multi-scene HTML/CSS animation file
+3. Captures frames via Playwright + Web Animations API seeking
+4. Assembles PNG sequence → H.264 MP4 with FFmpeg
+5. Optionally mixes in background audio
+
+## Output
+
+- Format: H.264 MP4, `-pix_fmt yuv420p` (compatible with QuickTime, iOS, Android, Twitter, LinkedIn, Instagram)
+- Default: 1080×1080px @2× retina (2160×2160 actual)
+- Supports: 1:1, 16:9 (1920×1080), 9:16 (1080×1920)
+- FPS: 24, 30, or 60
+
+## Scene types
+
+| Type | Best for |
+|---|---|
+| `title-card` | Opening hook, brand intro |
+| `stat-reveal` | Single oversized metric |
+| `bullet-list` | 2–4 supporting points |
+| `split-screen` | Before/after, two values |
+| `quote-card` | Testimonial, pull quote |
+| `cta-card` | Final scene, call to action |
+
+## Style presets
+
+| Preset | Feel |
+|---|---|
+| `kinetic-dark` | Dark bg, electric yellow, tight grotesque (default) |
+| `editorial-light` | White bg, serif display, refined |
+| `data-pulse` | Deep navy, mono, terminal/dashboard |
+| `bold-type` | White bg, Bebas Neue, red accent, slam-in |
+| `minimal-clean` | Off-white, Cormorant, gentle rise |
+
+## Requirements
+
+- Node.js (for Playwright frame capture)
+- FFmpeg (for MP4 assembly)
+- Internet access for Google Fonts CDN during capture
+
+## Usage
+
+```
+Create a 9-second motion graphic. Brief: 'Q4 revenue hit $4.2M — 85% growth.
+Three drivers: enterprise deals, churn 1.2%, price increase.
+CTA: acme.com/q4'. Style: data-pulse. Aspect: 1:1.
+```
+
+## Quick export
+
+```bash
+bash scripts/export-video.sh chart/[slug]/video.html --duration 9
+```
+
+## Differentiator vs SkillsMP
+
+All top SkillsMP motion-graphic skills require Remotion (React build step) or AI video APIs (Runway, Kling — cost + rate limits). This skill uses the proven HTML/CSS → Playwright → FFmpeg pipeline from the `graphic-gif` family: zero new dependencies, pixel-perfect output, full CSS control.