@opendirectory.dev/skills 0.1.58 → 0.1.60

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/graphic-gif/README.md

@@ -0,0 +1,99 @@
+# graphic-gif
+
+Generate animated looping GIFs from CSS animations. 800×800px default, 6 animation types, 4 style presets.
+
+## Install
+
+```bash
+npx "@opendirectory.dev/skills" install graphic-gif --target claude
+```
+
+### Manual Install (2 steps)
+
+1. Copy the URL of this skill folder from your browser, paste it at [download-directory.github.io](https://download-directory.github.io/), download the zip.
+2. Open Claude desktop app → sidebar → **Customize** → **Skills** → **+** → **Upload a skill** → drop the extracted folder (the one containing `SKILL.md`).
+
+---
+
+## What it does
+
+- Asks for a prompt (content + motion description) and optional settings
+- Generates a self-contained HTML file with CSS `@keyframes` animations
+- Captures frames using Playwright + Web Animations API for frame-accurate seeking
+- Assembles frames into a GIF with [gifenc](https://github.com/mattdesl/gifenc)
+- Optimizes the GIF with gifsicle for 35–50% size reduction
+- Outputs a looping `animation.gif` ready for social, email, or Slack
+
+---
+
+## Example
+
+> "Create an animated GIF, css-animated, typewriter effect. Text: '73% of B2B buyers read 3+ pieces of content before contacting sales.' Each character types out one at a time. Style: terminal. 3 seconds, 12fps, loop=true."
+
+Output: `animation.gif` — dark background, JetBrains Mono font, green cursor, character-by-character reveal.
+
+---
+
+## Supported Animation Types
+
+| Animation | Description | Best Use |
+|---|---|---|
+| fade-in | Content fades in from transparent with upward drift | Quotes, announcements, brand messages |
+| slide-in | Elements slide in from edge with spring overshoot | Headlines, stats, before/after |
+| typewriter | Text types out character by character | Insights, hooks, developer content |
+| counter | Numbers count up to a target value | Stats, metrics, growth numbers |
+| pulse | Pulsing / breathing scale or glow effect | CTAs, icons, live indicators |
+| loop-scroll | Infinite scrolling ticker or marquee | Feature lists, social proof, tickers |
+
+---
+
+## Supported Styles
+
+| Style | Best for |
+|---|---|
+| clean-slate | Professional B2B, LinkedIn, any audience expecting polish |
+| terminal | Developer audience, typewriter effects, tech metrics |
+| electric-burst | Bold stats, CTAs, high-energy social content |
+| brutalist | Loop-scroll tickers, design-forward brands, raw aesthetic |
+
+---
+
+## Parameters
+
+| Parameter | Required | Default | Description |
+|---|---|---|---|
+| prompt | Yes | — | Content description AND motion brief |
+| animation_type | No | css-animated | css-animated / ai-generated |
+| duration | No | 3.0 | Animation duration in seconds |
+| fps | No | 12 | Frames per second (higher = smoother, larger file) |
+| loop | No | true | Whether GIF loops continuously |
+| style | No | clean-slate | Visual style preset |
+| dimensions | No | 800x800 | Output dimensions in pixels |
+| optimization | No | balanced | quality / balanced / filesize |
+
+---
+
+## Output
+
+| File | What it is |
+|---|---|
+| `[slug]/animation.html` | Self-contained animated HTML (preview in browser) |
+| `[slug]/animation.gif` | Final looping GIF, ready to use |
+
+Typical file size: 150KB–1.5MB depending on animation type, duration, and optimization.
+
+---
+
+## Dependencies
+
+**Node.js** — required. Install from [nodejs.org](https://nodejs.org) or `brew install node`.
+
+Everything else is bundled inside this skill or installed automatically on first run:
+- `scripts/export-gif.sh` — orchestrator script
+- `scripts/capture-and-encode.mjs` — Playwright frame capture + gifenc assembly
+- `gifenc` + `sharp` (or `jimp`) + `playwright` — auto-installed via npm on first run
+- **gifsicle** — optional but recommended for 35–50% smaller files: `brew install gifsicle`
+
+**For AI-generated GIFs (optional):**
+- Kling API key in environment: `KLING_API_KEY`
+- `ffmpeg` for video→GIF conversion: `brew install ffmpeg`