Menü
Generate Vela slide deck JSON. Self-contained, speed + quality optimized.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Create presentation decks using the Vela engine. Compact DSL format — never verbose JSON. Also loads, extracts, and edits existing decks.
Run a full "implement + test + verify a batch of change requests to zero bugs" sprint in one session as a thin orchestrator that delegates implementation to sub-agents (routed by task difficulty, isolated in worktrees for parallel work) and gates completion on an independent BLIND validation by the best model. Use when handed a list of changes/issues (a PDF, ticket list, or spec) to implement, test, and prove working end-to-end — stop rule "a blind best-model hunt finds no bugs + a proof artifact (a Markdown sprint report by default; recorded demo optional)". Repo-agnostic; reads a root `.hyper-sprint/config.md` for repo facts; front-loads app/browser readiness so verification never stalls.
Offline in-container render harness for the FULL Vela app (no CDN) plus the committed `vela-drive.js` scripts — headless UI-test battery, scripted screenshot, recorded demo video, and an opt-in AI mode. Use for REPEATABLE, COMMITTED automation where the harness itself is the deliverable — running the UI battery in CI, recording a demo video, a scripted screenshot in a benchmark, or verifying real Vera/AI features against the local `claude` CLI via `vela-drive.js ai`. For AD-HOC / INTERACTIVE work — explore/test the app, poke a state, reproduce a bug, a one-off screenshot, verify a UX change, drive presenter/gallery — use the `playwright-cli-setup` skill instead (a persistent CLI browser driven step by step). This skill still documents the blocked-CDN offline render recipe that both skills share.
Verify Vela rendering/security behavior in a REAL browser (and against the REAL deck sanitizers) inside the remote-execution container. Use when you need to confirm whether a deck/SVG/CSS payload actually executes or fires a network request when rendered — e.g. exfil/XSS hunts, "does this beacon fire", confirming a sanitizer fix, or any claim that needs more than reading source. Also records how to launch the prebuilt Chromium here despite blocked CDNs.
THE DEFAULT tool for ad-hoc / interactive Vela browser work — explore or test the app, screenshot a state, reproduce a bug, poke a selector, drive presenter/gallery flows, verify a UX change, run bench/vela-interaction-bench.sh. Drives a live offline Vela render via Playwright CLI (@playwright/cli), a persistent warm browser you steer one command at a time (open, snapshot, click, press, eval), inspecting state + output between steps. Prefer this over the committed `vela-drive.js` scripts (skill: vela-live-render) — those are for repeatable, committed automation only (CI, benchmark, recorded demo), NOT one-off exploration. Also prefer over writing throwaway Playwright .js files. Covers container setup (blocked CDNs, file:// block, pinned Chromium) and per-agent session isolation for parallel browser tests.
Time-boxed adversarial bug-hunting of a LIVE app driven by MULTI-STEP PLAYWRIGHT BURSTS against a persistent warm browser — not one LLM turn per CLI step. The app is opened ONCE; the agent submits full scripts that run to completion unattended (one structured result per burst); reset to a known initial state between scenarios; inherit the implementer's driver verbs instead of re-predicting selectors. Generic / repo-agnostic: all app specifics come from the repo's own config. Use when hunting bugs in a browser-drivable app under a hard wall-clock budget.
| name | vela-slides |
| version | 3.3.0 |
| updated | "2026-03-21T00:00:00.000Z" |
| description | Generate Vela slide deck JSON. Self-contained, speed + quality optimized. |
Write the deck as compact JSON. The validator auto-expands compact to full format.
{"n":"Deck Title","C":{color palette},"T":{themes},"S":[slides]}
CDefine ALL colors used 2+ times. Include warning/semantic colors alongside brand:
"C":{"$A":"#3B82F6","$B":"#E6F1FF","$C":"#8892B0","$D":"#0A0F1C","$E":"#1e293b","$F":"#3B82F620","$G":"#10B981","$H":"#F59E0B","$I":"#EF4444","$J":"#8B5CF6"}
$A=accent, $G=green, $H=amber, $I=red, $J=purple — use these for per-item color differentiation.
T"T":{"d":{"b":"$D","c":"$B","a":"$A","p":"60px 72px"},"a":{"b":"$E","c":"$B","a":"$A","p":"36px 48px"}}
S{"t":"d","n":"Slide Title","d":60,"B":[...blocks...]}
Cover/CTA: add "bgGradient":"linear-gradient(135deg, $D 0%, $E 100%)","align":"center","verticalAlign":"center"
Spacers: bare integer. Vary spacer heights: 8 between tight elements, 12 standard, 16 before main block, 24 for major section gaps.
heading — vary s by slide role:
{"_":"heading","x":"Assertion Title Here","s":"4xl","w":700}{"_":"heading","x":"Specific Claim With Data","s":"2xl"}{"_":"heading","x":"Action-Oriented Closing","s":"3xl","w":700}text: {"_":"text","x":"Supporting detail.","s":"lg","c":"$C"}
badge — vary c by section context:
{"_":"badge","x":"THE PROBLEM","c":"$I","b":"#EF444420","i":"AlertTriangle"} (problem=red){"_":"badge","x":"SOLUTION","c":"$G","b":"#10B98120","i":"CheckCircle"} (solution=green){"_":"badge","x":"FEATURES","c":"$A","b":"$F","i":"Layers"} (neutral=blue)icon-row — each item MUST have a different ic (use $A,$G,$H,$J etc):
{"_":"icon-row","I":[{"icon":"...","title":"...","x":"...","ic":"$H","ib":"#F59E0B20"}, ...]}
grid + metric — each metric card gets a distinct color + tinted bg. For problems use warning colors ($I=red, $H=amber):
{"_":"grid","cols":3,"g":16,"I":[{"blocks":[{"_":"metric","value":"N%","lb":"Label","s":"3xl","c":"$I"}],"style":{"padding":"20px","background":"rgba(239,68,68,0.08)","borderRadius":"12px"}}, ...]}
flow — 3-5 items with icon + label + sublabel:
{"_":"flow","I":[{"i":"Icon","lb":"Step","sublabel":"Detail"}, ...],"arrowColor":"$A","direction":"horizontal"}
callout — use green border for positive insights, amber for warnings:
{"_":"callout","x":"Key stat or insight here.","i":"TrendingUp","b":"rgba(16,185,129,0.1)","border":"$G"}
table — include concrete data, not just labels. Use striped + styled header:
{"_":"table","H":["Capability","Col2","Col3"],"R":[["row","data","here"]],"striped":true,"headerBg":"$E","headerColor":"$B","cellColor":"$C"}
tag-group — use distinct c per tag, include icons:
{"_":"tag-group","I":[{"x":"Action 1","c":"$G","i":"Play"},{"x":"Action 2","c":"$A","i":"Calendar"}],"v":"outline"}
icon: {"_":"icon","name":"Rocket","s":"xl","c":"$A","b":"$F","circle":true}
steps: {"_":"steps","I":[{"title":"Step 1","x":"Description"}],"lineColor":"$A","numberColor":"$A"}
timeline: {"_":"timeline","I":[{"date":"Q1","title":"Milestone","x":"Detail"}],"lineColor":"$A"}
code: {"_":"code","x":"code here","lb":"Language","b":"$E"}
quote: {"_":"quote","x":"Quote text.","author":"Name, Title","s":"xl","c":"$B"}
progress: {"_":"progress","I":[{"lb":"Metric","value":85,"c":"$A"}],"showValue":true}
4xl cover, 2xl body slides, 3xl CTA. Never uniform."t":"d" and "t":"a". Cover + CTA use bgGradient.badge (vary badge color by context).python3 /path/to/vela.py deck validate <file>