Use when manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.
日本語の概要は準備中です。原文の説明を表示しています。
Create and render fixed-canvas editable visual designs, including posters, marketing graphics, covers, menus, banners, and social cards. Default outputs include fixed and editable HTML, PNG, a mouse editor with scan and exploded layer views, and an evidence-backed Design Replay. Do not use for websites, slide decks, videos, or standalone logo systems. Always use this skill when the project contains `poster.json`.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Design the complete requested fixed-canvas visual, verify it, then deliver it. The default
deliverable is a fixed-canvas index.html, a mouse-editable editor.html with
scan and exploded-layer views, a poster-specific visual system built from
generated artwork, live typography, and/or HTML geometry, and a rendered PNG.
It also includes replay/index.html, a deterministic visual account of the real
input, reference, plan, asset prompts, code, review, and layer output, plus a
standalone animated layers.html breakdown.
Assume the user is a nontechnical knowledge worker. Talk about their poster, choices, progress, and results. Keep tools, commands, files, renderers, browser software, dependencies, source control, paths, and exit codes out of user-facing messages unless the user asks or must take action.
Use no more than one short update for each user-visible phase: preparing, designing, and delivering. If a phase takes longer than 60 seconds, give one plain-language update. Keep recoverable technical problems private; say only that you hit a problem and are trying another method.
You are the designer, not a consultant. Decide the layout, hierarchy, palette, type, composition, and white space yourself. Do not generate design options or pause for a visual selection unless the user explicitly asks to compare designs. When undecided, pick one and say why; do not hand the choice back.
Ask one concise group of up to three discovery questions only when the missing information would materially change the finished poster or force you to invent something. The only thing you must ask about is fact: prices, dates and times, locations, contact details, exact brand and product names, legal notices. Inventing one of those ships a falsehood, which is worse than leaving it out. Everything else is a judgement call, and judgement is your job.
Use the one-shot fast path only when all of these are true:
Use the capability path otherwise.
When the source is a research-paper PDF, complete a compact evidence pass before
the reference or design plan. Read the whole paper's text structure and inspect
the pages containing its principal figures, tables, and diagrams; an abstract-only
summary is not enough. Write source-brief.md with:
Record the PDF path and source-brief.md with the input evidence. Use the brief
as the factual boundary for all poster wording. Prefer a real, legible source
figure, table crop, or faithful code-native reconstruction when it carries a key
result. Generated artwork may establish atmosphere or explain a concept, but it
must not replace empirical evidence or introduce unreported quantities. When the
paper contains usable visual evidence, the final poster must include at least one
evidence-bearing visual tied to a live caption or result claim.
Generated artwork is a first-class visual material, not a required full-canvas layer. Use it wherever photographic, illustrative, material, atmospheric, or subject-specific content carries the design. Live typography and HTML geometry may instead form the primary visual system when their precision, repetition, and spatial relationships are the composition.
Do not replace imagery the design genuinely needs with a generic gradient, flat fill, or improvised CSS illustration. Equally, do not generate a backdrop merely to prove that artwork was used.
Generated support does not need to dominate the page; compact visual assets are worthwhile when they make a section easier to scan, compare, or remember.
Avoid model-authored SVG illustrations. Graphic content is either generated raster artwork or it is typography and geometry.
Codex's bundled Node runtime includes Lucide; for common small icons, prefer a coherent locally embedded Lucide subset over ad hoc CSS drawing, without adding runtime external requests.
Treat reference handling as a four-value mode even when the host exposes no formal setting:
auto — the default. Resolve it to art-directed for every new poster,
including an open brief and the one-shot fast path; the composition reference
is a standard design step, not an optional enhancement that depends on the
user describing a finished picture. Resolve it to off only when the user
explicitly declines reference generation, or when a small revision to an
existing poster does not change its composition. Resolve it to reproduce
when the user supplied an image as the target or asked to match one closely. A
loose style or mood reference does not imply reproduction.off — skip composition-reference generation.art-directed — generate one enhanced, non-shipping composition concept.reproduce — treat the supplied reference as a high-fidelity specification.Respect an explicit user choice over auto. Whenever art-directed is active,
run the creative prompt enhancer below; it is not a separate switch.
When image generation is unavailable, resolve auto to off when live
typography, HTML geometry, local icons, and user-provided assets can satisfy the
request. If the requested result fundamentally requires generated photography,
illustration, or cutouts, report the missing capability instead of silently
substituting a materially weaker design. A supplied target can still use
reproduce without image generation when it can be rebuilt from live elements.
Generate one reference composition before planning anything, and read the layout off it. Pass the request through a creative prompt-enhancement step and ask the image model for one opinionated, fully art-directed finished-poster concept rather than a literal transcription. Lock every user-specified fact, string, subject, required placement, palette requirement, and exclusion. Freely intensify only the composition, hierarchy, crop, scale relationships, photographic direction, lighting, materiality, typography treatment, grid behaviour, and spatial rhythm. This reference-only step deliberately has more creative freedom than shipping-asset generation, and it is the only step where the image model is allowed to render text.
Creative expansion changes the design language, not the requested content. Do not invent facts, dates, locations, prices, brand names, slogans, people, products, narrative subjects, or extra scene objects. Preserve minimalism when requested, but express it through tension, scale, atmosphere, material depth, and precise hierarchy rather than by making the frame merely empty.
Three boundaries make this safe. Breaking any of them wrecks the rest of the run:
reference/, never
assets/, and never crop it into a backdrop — it has generated lettering all
over it.Read off the reference: major visual regions and their proportions, band
positions when they are actually present, visual weight, palette relationships,
text-bearing regions, depth and overlap relationships, and any supporting
visuals, large or small, that materially contribute to meaning, comparison, or
recall. Write these observations into the integrated design plan below. Before
calling the image model, save the exact enhanced prompt in
reference/composition-prompt.md; after the result is imported as
reference/composition-reference.png, record both under P02_reference. These
are evidence for the Replay, not extra design prose.
When the user asks for the reference to be reproduced closely — "make it look like this" — or supplied the image explicitly as the target, treat it as a specification rather than a sketch. Work element by element: match positions, proportions, decorative marks and where each colour sits, and adopt its wording wholesale as live HTML text.
Two things do not change under this mode. Text is still re-set in HTML, never lifted as pixels. And facts still come from the user.
Say in the handoff that you were reproducing a reference, and name whatever you could not reproduce — a hand-drawn contour edge, a texture, a script face that is not installed.
Before finalizing the asset plan, identify every visual component that materially contributes to subject, hierarchy, atmosphere, comparison, recall, semantic distinction, or fidelity to the reference. Let the composition determine the asset count. Generate all main and supporting assets needed for the finished poster, and do not consolidate distinct visual roles merely to reduce generation work.
Use the image model proactively for supporting visual assets when they would strengthen communication; do not reserve generated imagery only for the main visual or explicitly requested detail shots.
A generated raster is not the only way to preserve a strong visual reference. For example, a dense Memphis-style exhibition poster may be strongest as a live modular composition: monumental typography, saturated colour fields, black keylines, checker and halftone patterns, label rails, inline pictograms, and independently placed icon panels. Rebuild those relationships as live HTML/CSS geometry and inline SVG when flattening them into a background would weaken their structure, precision, or editability. This is a complete visual system derived from the same mandatory art-directed reference, not a fallback from generated imagery.
Choose by visual topology, not by habit. No topology is the default:
Keep elements together when their shared lighting, perspective, material, or physical interaction makes them one visually continuous scene. Separate or rebuild them independently when their position, crop, replacement, repetition, semantic role, or overlap is part of the design. Do not split elements that share continuous light and perspective merely to make the file count larger; their seams will show.
Visuals assigned to distinct meanings must remain perceptually and semantically distinct. Reuse is acceptable only when each instance clearly communicates its own intended meaning; unintended repetition is a defect.
For a slot matrix, cutout stack, or layered collage, read
Asset architecture. When two or more
shipping assets are needed, create asset-plan.json before generating anything;
record each asset's form, target rectangle, layer order, and dependencies.
Before writing shipping prompts, read Imagery and follow it exactly. The art-directed composition reference may render poster text; shipping assets may not.
Use one call per distinct asset. After every shipping prompt and destination filename is frozen, dispatch up to ten independent generations concurrently in one batch; do not split a run of ten or fewer assets into smaller waves. For more than ten, use consecutive batches of ten. Parallelism applies only to assets without dependencies on another returned image; corrections based on a returned image remain sequential. Orchestrate the batch with all-settled semantics rather than fail-fast semantics so one rejected call cannot cancel or hide the successful results.
Let the whole batch settle, preserve every successful result, and retry only the failed calls immediately rather than rerunning or delaying the successful ones. Retry a transient failure once with the same prompt. For a safety refusal or an obvious prompt-specific failure, revise only that asset's prompt and retry it once; stop automatic retries after that second attempt and continue with the successful assets while choosing a safe substitute or reporting the missing slot. Do not ask for several unrelated cutouts in one sheet: one call returns one raster, not several independently editable transparent files.
Import all successful results in one post-batch pass with
scripts/import-asset.sh GENERATED_PATH assets/NAME.png. Check dimensions,
unwanted lettering, and obvious slot mismatch together in that same pass, then
record the prompt file and selected asset results once. Do not pause for
per-image narration, rewrite already-frozen planning files between successful
results, or introduce a second selection phase when the outputs satisfy their
slot prompts. For ten or fewer independent assets, post-generation handling
should add only local import and one consolidated inspection, not another
multi-minute reasoning stage.
Before setup, if the intended target directory already exists or the workspace contains an apparent same-title poster project, ask whether to continue that project or create a new one. Do not treat matching titles, copy, assets, or timestamps as authorization to modify user-owned files. Make no writes to the existing project until the user answers; skip this confirmation only when the user explicitly identified that existing project as the target. This collision check happens before and overrides the immediate-setup rule below.
For a new poster in an empty or projectless workspace, make setup the first task
action. From an existing parent directory, run this skill's
scripts/init-poster.sh TARGET; do not set the command's working directory to a
target that does not exist yet. Do not run a second initializer.
It copies the starter plus project-local runtime scripts and reports whether a
renderer is available. Change into the target before running the remaining
commands. Complete this before asking any discovery questions, then open the starter's
index.html in the browser so the user sees the placeholder layout while you
work. Begin the trace in the same breath:
scripts/trace.sh init "<one line about this poster>"
Immediately write the active user-authored brief to brief.md, verbatim and in
order, including user-supplied attachment paths. Do not copy ambient UI state,
system instructions, or hidden context into it. Record it with
scripts/trace.sh artifact brief.md P01_input. This is the Replay's source of
truth; the trace label is not a substitute for the original request.
If no renderer is available, do not abort: the HTML is still deliverable, it just produces no PNG. Say so once in the final handoff rather than repeatedly.
In a delegated, background, or invisible thread, initialize normally but do not open a browser purely for preview. Reading the render is not preview and is never skipped.
After setup and any necessary clarification, design and produce the poster in one focused pass. Trace only the stable artifacts named below.
index.html, poster.json, and the contract in README.md. Read other
files only when the implementation needs them. Avoid broad scans and
speculative research.poster.json;
the root element's width/height must equal its data-canvas-* values.
scripts/trace.sh decision canvas "<W>x<H>" "<why>" P09_canvasart-directed, save the enhanced
prompt, generate and import the composition reference, read it, and record its
prompt and image under P02_reference. Under reproduce, inspect the supplied
target as the specification. Under off, continue without creating reference
artifacts.design-plan.md. When two or more shipping assets are
required, also write the minimal machine-readable asset-plan.json from
that same decision. Record both together under P11_asset_plan.
When typography is a primary visual material or the editor needs stronger
alternatives, read Font system, choose fonts by
role, and use the self-hosted kit rather than defaulting to the same system
sans/serif pair.assets/. Record the completed batch once. In multi-asset
runs, every
asset-plan.json entry's prompt value must exactly match one ## heading
in prompts.md, and the imported filename stem should match the asset id:
scripts/trace.sh artifact prompts.md P12_generate_imagery.:root and reference them
throughout. Do not write comments.
When the plan selects a bundled font, run scripts/font-kit.mjs add <id> index.html after the HTML exists, then assign its generated
--font-kit-<id> variable to the intended type roles before checking fonts.
For selected Lucide icons, resolve them from the bundled runtime at build
time and inline only their SVG markup in the poster HTML; keep their size,
stroke width, and color treatment consistent, and add no runtime import.scripts/check-fonts.sh index.html. A missing family raises no error in the
browser, and a family marked latin only must not set CJK text. Fix any
failure before rendering.scripts/check-poster.sh index.html. Fix every failure before opening Chrome.scripts/trace.sh run P14_contract -- node <poster-building-skill>/scripts/check-contract.mjs index.html.
It
checks fixed geometry, layer and group structure, viewport stability, font
loading, and whether live-text hit areas are blocked by another layer. Fix
every failure now; this is the cheap point to change structure.scripts/trace.sh run P15_render -- scripts/render-poster.sh index.html out/poster.png. It reads the PNG's real pixel dimensions back and
compares them with poster.json; a mismatch is an error.render-review.md; do not create a second review
record for optimization. After the final render, record the consolidated
review once under P16_read_render, and record the current index.html and
out/poster.png under P15_html so Replay cannot select an obsolete version.index.html:
node scripts/wire-editor.mjs index.html. Confirm that editor.html,
layer-editor.css, and layer-editor.js exist, then
scripts/trace.sh artifact editor.html P17_editor.scripts/trace.sh run P17_verify -- node <poster-building-skill>/scripts/verify.mjs index.html.
The same browser
run writes the verified standalone result to layers.html; do not launch a
second generation pass. It must pass the
geometry-plus-pixel zero-drift, edit/export round-trip, overview/background
component extraction, one-level gallery spread, theme, scan, replay, collapse, and
standalone-render checks. After it passes, record
scripts/trace.sh artifact layers.html P17_layers. Read
Editor and exploded views for setup and
commands.node scripts/build-replay.mjs ., then
node scripts/verify-replay.mjs replay/index.html. Record the replay/
directory under P18_replay, then scripts/trace.sh finish ok. For an
older project without those project-local scripts, run this skill's bundled
scripts/build-replay.mjs PROJECT and scripts/verify-replay.mjs PROJECT/replay/index.html instead. Open the generated Replay once and
confirm that the seven nodes, Prompt/result pairs, render, Review, and layer
preview load. The fixed
template, not the agent, designs this page. Read
Agent design replay only when recording or
diagnosing its evidence contract.The Replay is a post-build view of real artifacts. It does not add a visual selection gate, require multiple directions, or change how the poster is designed. Preserve the exact user request, enhanced reference prompt, plan, shipping prompts, imported results, HTML, render review, and verified layer output while working; the builder groups them into seven story stages.
Do not ask the model to redesign the Replay, summarize the run from memory, add generic “why this was done” commentary, or reconstruct missing prompts. The viewer displays recorded Agent content and marks absent evidence as missing. Optional alternatives and selection branches appear only when the run actually contains them.
poster.json, and
asset paths. A copy change is only a copy change; do not re-flow the layout
along the way.:root font roles
may be exposed as meaningful alternatives. For a poster, cover, flyer, or
campaign, do not ship only one generic sans stack unless the brief or brand
deliberately requires it.white-space: nowrap and centre it with flex.
text-align controls the vertical axis under writing-mode, so a fixed-width
box leaves the text against its right edge.Every poster ships with the bundled editor runtime for human micro-adjustments and presentation. It can drag layers; resize width, height, or both with side and corner handles; edit text; change font size or a declared font family; delete and undo; save a local draft; scan and spread layers into an exploded view; and download clean edited or exploded HTML. A manually resized text width remains fixed during later text or font-size edits so the user's intended wrapping is preserved. It is not a second design application.
Mark each independently movable semantic unit with a unique data-layer-id;
keep full-bleed backdrops, textures, scrims, fixed frames, and
data-explode-group wrappers unmarked. Use hf-slot for independently editable
styled-text leaves, and use a non-nested data-explode-group only when it
contains at least two meaningful leaf layers; never nest layer IDs or explode
groups. Declare selectable font stacks on :root with a generic fallback.
Keep the prebuilt editor runtime unchanged, generate editor.html only with
node scripts/wire-editor.mjs index.html, render and validate index.html, and
run the bundled browser verification before delivery.
Every poster includes layers.html in addition to the live breakdown in
editor.html. The bundled scripts/verify.mjs generates and verifies it in one
browser run. Groups remain whole modules by default; when fewer than five
primary content components would be visible, the same one-level gallery also
adds the grouped text leaves as companion tiles so the breakdown does not feel
empty. Do not hand-edit it, wire it back into the editor, or substitute it for
the poster render. Read
Editor and exploded views before diagnosing a
failure.
Apply the starter cleanup contract in README.md and record the sweep with
scripts/trace.sh artifact cleanup-checklist.json P14_cleanup. Preserve the
placeholder only when the user explicitly asked to work on the starter itself.
--dpi 300; the scale factor is derived at 96 px/inch. Only
meaningful for a canvas sized in print dimensions. The renderer produces PNG
only; there is no PDF path.Read the rendered image yourself. A poster you have not looked at is not finished.
When a visual reference exists, inspect it beside the current render before deciding to finalize. Compare the focal subject's scale and position, headline placement, major information regions, whitespace distribution, alignment, required supporting details, reading order, and overall visual density. Name only material differences that can be pointed to in the pixels.
During visual review, check for missing meaningful visual support, unintended repetition, and mismatches between visuals and their associated content. Treat them as defects when they weaken comprehension, hierarchy, or fidelity to the request or reference.
When the reference includes typography, reject a result that looks more templated, crowded, or hierarchically flat; rework the type before finalizing.
The reference is a benchmark for composition, hierarchy, completeness, and quality, not automatically a pixel-perfect target. A difference is acceptable when it deliberately adapts the design to live editable typography or independently movable assets, or when the current solution is visibly as strong as or stronger than the reference while preserving the request's intent. Do not accept an element merely because it remains technically inside the canvas: it is still defective when it sits visibly too close to a frame, rule, image edge, or neighboring object. Do not excuse a weaker focal subject, enlarged dead space, missing structure, reduced density, poorer contrast, or lost detail as artistic variation unless the change clearly improves the whole poster.
No script can do this step. The renderer proves the dimensions are right; it cannot prove that text is not sitting on top of text, or that the artwork brought its own placeholder lettering — and those two are the main reasons a poster is scrapped.
Work down the list, and only count what you can point at. Do not evaluate taste:
For every actual render-review cycle, append one numbered pass to
render-review.md with its concrete findings, the changes applied, and the
result confirmed by the next render. A clean render records none for findings
and changes and pass for the result. Fix, re-render, and read again until no
defect remains. A taste preference is not a defect — do not invent one so you
have something to say.
After defects are resolved, perform exactly one optimization assessment against
the reference and request. Compare visual-asset count, semantic variety,
icon-to-copy pairing, and regions that changed from image-supported to text-only.
If one clear opportunity would materially improve scanning, recall, or fidelity,
apply only the highest-impact enhancement, update the asset plan and prompts when
needed, rerender, and append the real pass. If none exists, write Optimization: none in the current pass and do not rerender. Record the consolidated file once
after the final render:
scripts/trace.sh artifact render-review.md P16_read_render.
If the same problem survives two fixes, your diagnosis is wrong. Stop, look at the image again, and change your assumption rather than your wording.
The mouse-editable HTML is built in and is not an optional integration. Finish
and deliver the core design before discussing PowerPoint. When the separate
html-to-pptx skill is available, tell the user once that an editable PPTX can
also be exported. Do not generate it unless the user asks. After they ask, use
html-to-pptx with index.html or an editor-downloaded *.edited.html beside
its assets; never pass editor.html. PPTX availability must not delay or weaken
the HTML, editor, PNG, layer breakdown, or Replay delivery.
Use these stable English labels in the user-facing handoff, regardless of the language used inside the design:
out/poster.pngindex.htmleditor.htmllayers.htmlreplay/index.htmlGive the location of each available output, the canvas size and the font
families used, and the text
you read line by line off the render. Tell the
user that editor.html supports mouse dragging, eight-handle width/height
resizing, double-click text editing, and scan/explode/collapse views.
Treat Replay as a local evidence artifact by default and warn before sharing it,
because it may contain the original brief, prompts, attachment paths, and design
decisions.
State anything still wrong and exactly how it falls short; do not describe it
as finished.
When you cannot finish, name the obstacle — which fact is missing, which two requirements contradict each other, how the amount of content and the canvas size fail to fit — and say what you need. Do not disguise a design problem as missing information.
Keep commands, exit codes, renderer names, and other internals out of the handoff unless the user asks.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Use when manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.
日本語の概要は準備中です。原文の説明を表示しています。
Use when a hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).
日本語の概要は準備中です。原文の説明を表示しています。
Reference for how BDB structures autonomous software engineering work — the seven-node dispatcher graph (Architect, TechLead, UI/UX, Engineering, Media/EventTech, Reviewer, Shipping) that /startcycle-graph actually runs. Use when you need the high-level lifecycle framing without inventing your own process.
日本語の概要は準備中です。原文の説明を表示しています。
Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessary. This skill covers tool design from schema to error handling.
日本語の概要は準備中です。原文の説明を表示しています。
Harness patterns for coding agents — memory, permissions, context engineering, delegation, skills, hooks, bootstrap.
日本語の概要は準備中です。原文の説明を表示しています。
agenttrail: live map of a multi-agent build in the browser: which plan component is being worked on, by which agent or harness, what is done and what is stuck. Use when a multi-agent pipeline starts (/startcycle, /startcycle-graph, /teamwork-preview) or after a plan-canvas approve, when the user asks to see what the agents are doing ("live map", "build board", "who is running now"), or by yourself whenever a multi-agent run is under way — no user prompt needed.
日本語の概要は準備中です。原文の説明を表示しています。