メニュー
Generate branded LinkedIn data visualizations (1200x627) using HTML/CSS and Playwright screenshots. Supports bar charts, stat grids, vertical columns, newspaper layouts, and quote+stat formats.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Keep a live interactive chat session coming back to itself, visibly, after a usage/session cap interrupts it, never a silent background process. Invoke with /qq-cap-resume, or say “keep this session alive,” “resume yourself after the cap,” “don’t go dark on me,” any time a long interactive burn needs to survive a 5-hour session cap or ride out to a weekly reset without leaving you staring at a dead thread.
The unbounded end of the AFK spectrum: spend whatever it takes for quality, budget isn’t the constraint. Stand up a self-healing, fully-autonomous “kitchen-sink max-effort” campaign for a big multi-day initiative: resilience first, creative meta strategy, workflows spawning workflows, audit-gated quality, a phone-glanceable status surface with a proud wins list, and a long living tasklist. Invoke when you say “go HAM”, “go-ham”, “go afk ham”, “qq-go-afk-ham”, “kitchen sink”, “blow me away”, “use all the quota”, or hand it a large ambitious build to run autonomously for hours or days. For the frugal end, use `qq-go-afk-lean`; for the adaptive middle, use `qq-go-afk-smart`.
The adaptive middle of the AFK spectrum: picks the right model task by task, moment by moment, instead of committing to either extreme. Stand up a calm, self-healing, fully-autonomous overnight worker for a well-scoped punch list: the top-tier model writes strict specs and does quality control, cheap and free models do the grunt work, one bounded task per cycle, each one deployed and live-verified, a phone-glanceable status surface, and a durable done log. Invoke when you say “go afk smart”, “go-afk-smart”, “qq-go-afk-smart”, “go smart”, “bounded overnight”, “delegate and verify overnight”, or hand it a finite, well-specified backlog (a punch list, a rollout, a sweep) to grind down autonomously while you sleep, without the kitchen-sink fan-out of go HAM. For the unbounded end, use `qq-go-afk-ham`; for the frugal end, use `qq-go-afk-lean`.
The moment a real, avoidable mistake happens, name it plainly, root-cause the general class of it rather than just this one instance, and fix it at a level that prevents a repeat, not a note that gets written and forgotten. Then, before starting work that looks like it could repeat that shape, check the log first. A second occurrence of the same mistake means the note wasn’t enough, and it needs to become a real check instead of a reminder. Invoke with /ww-mistake-ledger, or say “log this mistake,” “close the loop on this,” “add this to the mistake log,” “check the mistake log first,” right after a preventable error, or right before starting work that resembles one already logged.
Ask what would make this fail before you build it, not after. A one-question design-time gate, imagine it’s already broken three months from now, work backward to the most likely cause, and let the answer change the plan instead of just getting noted and ignored. Works on code, an automation, a process, or a decision. Invoke with /ww-premortem, or say “what breaks this in three months,” “pre-mortem this,” “why would this fail,” “before I build this,” at the moment you’re about to commit to an approach, not after you’ve already started.
Before filling a gap in what you know with a guess, check whether the guess is load-bearing. If getting it wrong would mean redoing real work, or building on a false premise, ask a real question with concrete options instead of assuming silently. If it’s genuinely low-stakes, state the assumption out loud and keep moving rather than stalling on it. Works on any ambiguous request, with or without an AI agent involved. Invoke with /ww-questioning, or say “wait, let me ask first,” “is this load-bearing,” “check before I guess,” “clarify before building,” whenever a request has more than one reasonable reading and you’re about to just pick one.
| name | qq-infoviz |
| description | Generate branded LinkedIn data visualizations (1200x627) using HTML/CSS and Playwright screenshots. Supports bar charts, stat grids, vertical columns, newspaper layouts, and quote+stat formats. |
| triggers | ["make me a chart","make a chart","create a visualization","infoviz","LinkedIn chart","LinkedIn image","data viz","generate a chart"] |
| metadata | {"filePattern":[],"bashPattern":[]} |
Part of Claude Code operator skills: a collection of skills for running a real Claude Code setup.
Generate editorial-quality LinkedIn post images (1200x627) using HTML/CSS rendered via Playwright.
Design philosophy: data IS the point. Every pixel communicates information. Exaggerated sizes, big beautiful serif numbers, tinted labels. Think editorial magazine, not data science notebook.
/tmp/infoviz-chart.htmlpython3 ~/.claude/skills/qq-infoviz/screenshot.py /tmp/infoviz-chart.html /tmp/chart-linkedin.png 1200 627 (pass width/height explicitly: the script defaults to a 1800x1800 square, which doesn’t match the 1200x627 canvas this skill designs for)/tmp/chart-linkedin.png in your OS’s image viewer (open on macOS, xdg-open on Linux) so a human actually looks at it. Don’t just read the file as terminal text.#0f172a (dark navy / slate-900)<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
| Element | Font | Size | Weight | Notes |
|---|---|---|---|---|
| Title | Source Serif 4 | 46px | 300 (light), 600 (bold keywords) | Centered, fills ~10/12 cols width |
| Numbers (grid/cols) | Source Serif 4 | 56-58px | 700 | Colored per stat |
| Numbers (bars) | Source Serif 4 | 40px | 700 | In separate column |
| Numbers (hero) | Source Serif 4 | 100px | 700 | Dominant element |
| Labels | Inter | 18-19px | 700 | Tinted with parent hue color |
| Bar labels | Inter | 16px | 600 | Sentence-flow (reads as continuation of number) |
Stat Number Accent Label (tinted)
Red #f87171 #ef4444 #fecaca
Orange #fb923c #f97316 #fed7aa
Amber #fbbf24 #eab308 #fef08a
Blue #60a5fa #3b82f6 #bfdbfe
Purple #a78bfa #8b5cf6 #ddd6fe
Indigo #818cf8 #6366f1 #c7d2fe
Teal #2dd4bf #14b8a6 (derive)
Green #4ade80 #22c55e (derive)
All fills go bottom-up. Pattern applies only to the filled area, not the entire cell.
/* 1. diag, standard diagonal stripes */
background: repeating-linear-gradient(-45deg,
rgba(R,G,B,0.12) 0px, rgba(R,G,B,0.12) 3px,
rgba(R,G,B,0.28) 3px, rgba(R,G,B,0.28) 8px);
/* 2. diag-med, medium diagonal (denser) */
background: repeating-linear-gradient(-45deg,
rgba(R,G,B,0.11) 0px, rgba(R,G,B,0.11) 2px,
rgba(R,G,B,0.27) 2px, rgba(R,G,B,0.27) 5.5px);
/* 3. diag-wide, bold diagonal bands */
background: repeating-linear-gradient(-45deg,
rgba(R,G,B,0.08) 0px, rgba(R,G,B,0.08) 5px,
rgba(R,G,B,0.26) 5px, rgba(R,G,B,0.26) 14px);
/* 4. dots, dense stipple */
background: radial-gradient(circle,
rgba(R,G,B,0.4) 1.5px, rgba(R,G,B,0.1) 1.5px);
background-size: 6px 6px;
/* flat, solid fill (no pattern) */
background: rgba(R,G,B,0.28);
Apply via clip-path on the fill element:
clip-path: polygon(
0% 10%, 12% 5%, 25% 12%, 38% 3%, 50% 9%,
62% 2%, 75% 11%, 88% 4%, 100% 8%,
100% 100%, 0% 100%
);
When using wavy, add ~5% extra height to the fill to compensate for the wave.
overflow: hiddenAlways base64-encode (cloud-synced file paths, e.g. iCloud or Google Drive, break in Playwright since it can’t authenticate to fetch them):
import base64
from pathlib import Path
logo_path = Path('/path/to/your/logo-or-headshot.png')
logo_b64 = base64.b64encode(logo_path.read_bytes()).decode()
Best for: ranked metrics, 4-6 stats, “what’s missing” stories.
rgba(255,255,255,0.03), 6px border-radiusborder-radius: 0 6px 6px 0)Best for: 6 equal-weight stats as a scorecard.
rgba(255,255,255,0.03), fill element inside (bottom-up, pattern or flat)Best for: showing relative scale, descending data.
rgba(255,255,255,0.04) unfilled bgBest for: one dominant stat + supporting context.
Best for: provocative copy backed by data.
Best for: 3 hero stats, no bar chart needed, maximum visual impact.
If you keep a local database with the stats you want to chart (SQLite, a CSV, an analytics export, whatever), query it directly rather than guessing at numbers. Adapt table and column names to your own schema. Example pattern using SQLite:
import sqlite3
conn = sqlite3.connect('/path/to/your/data.db')
cursor = conn.execute("SELECT column_a, column_b FROM your_table WHERE ...")
Flag for whoever adopts this skill: the original version of this pipeline step queried one specific private database with a hardcoded absolute path and a fixed table schema. That’s a real functional dependency, not just prose, so it can’t be copied as-is; wire it to wherever your own numbers actually live.
Data provided directly in conversation: percentages, counts, labels.