메뉴
Generate Vela slide deck JSON. Self-contained, optimized for speed + quality.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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.
SOC 직업 분류 기준
| name | vela-slides |
| version | 3.2.0 |
| updated | "2026-03-21T00:00:00.000Z" |
| description | Generate Vela slide deck JSON. Self-contained, optimized for speed + quality. |
Write the deck as compact JSON. The validator auto-expands compact to full format.
{"n":"Deck Title","C":{color palette},"T":{themes},"S":[slides]}
C"C":{"$A":"#3B82F6","$B":"#E6F1FF","$C":"#8892B0","$D":"#0A0F1C","$E":"#1e293b","$F":"#3B82F620","$G":"#10B981"}
Map hex colors to $A-$Z aliases. Use aliases everywhere in the deck.
T"T":{"d":{"b":"$D","c":"$B","a":"$A","p":"36px 48px"},"a":{"b":"$E","c":"$B","a":"$A","p":"36px 48px"}}
d=dark, a=alt dark. Keys: b=bg, c=text color, a=accent, p=padding (CSS string).
S{"t":"d","n":"Slide Title","d":60,"B":[...blocks...]}
t=theme ref, n=title, d=duration in seconds (integer), B=blocks array.
Cover/CTA slides add: "bgGradient":"linear-gradient(135deg, $D 0%, $E 100%)","align":"center","verticalAlign":"center"
Spacers: bare integer (e.g. 8 not {"_":"spacer","h":8}).
Keys: _=type, x=text, s=size(xs|sm|md|lg|xl|2xl|3xl|4xl), c=color, i=icon, b=bg, w=weight(int), ic=iconColor, ib=iconBg, I=items, g=gap(int), lb=label, v=variant, H=headers, R=rows
heading: {"_":"heading","x":"Text","s":"3xl","w":700}
text: {"_":"text","x":"Body","s":"lg","c":"$C"}
badge: {"_":"badge","x":"LABEL","c":"$A","b":"$F","i":"Star"}
icon-row: {"_":"icon-row","I":[{"icon":"Zap","title":"Feature","x":"Description","ic":"$A","ib":"$F"},...]}
Each item MUST have a different ic color.
table: {"_":"table","H":["Col1","Col2","Col3"],"R":[["a","b","c"],["d","e","f"]],"striped":true,"headerBg":"$E","headerColor":"$B"}
grid: {"_":"grid","cols":3,"g":16,"I":[{"blocks":[...block objects...],"style":{"padding":"16px","background":"rgba(255,255,255,0.05)","borderRadius":"8px"}},...]}
Grid items MUST have "blocks":[...] array (not bare blocks). Style uses full CSS key names.
metric: {"_":"metric","value":"42%","lb":"Label","s":"3xl","c":"$A"}
flow: {"_":"flow","I":[{"i":"FileText","lb":"Step 1","sublabel":"Details"},...],"arrowColor":"$A","direction":"horizontal"}
Optional: "loop":true,"loopLabel":"Repeat", item-level "gate":true
steps: {"_":"steps","I":[{"title":"Step 1","x":"Description"},...],"lineColor":"$A","numberColor":"$A"}
timeline: {"_":"timeline","I":[{"date":"Q1 2026","title":"Milestone","x":"Details"},...],"lineColor":"$A"}
callout: {"_":"callout","x":"Key insight text","title":"Note","b":"rgba(59,130,246,0.1)","border":"$A","i":"Lightbulb"}
tag-group: {"_":"tag-group","I":[{"x":"Tag 1","c":"$A","i":"Mail"},...],"v":"outline"}
icon: {"_":"icon","name":"Rocket","s":"xl","c":"$A","b":"$F","circle":true}
code: {"_":"code","x":"const x = 1;","lb":"JavaScript","b":"$E"}
quote: {"_":"quote","x":"Quote text","author":"Person","s":"xl","c":"$B"}
progress: {"_":"progress","I":[{"lb":"Skill","value":85,"c":"$A"},...],"showValue":true}
"t":"d" and "t":"a" across slides. Cover + CTA use bgGradient.badge block.icon-row items: each must have a distinct ic color.grid + metric blocks with warning colors.flow + callout.tag-group with actionable links.S array is fine.python3 /path/to/vela.py deck validate <file>
The validator auto-expands compact format. You do NOT need to write lanes/items/slides structure.