image-compose
Generates/edits filmmaking canvas images via generate_image.js and generate_image_pro.js. Use before image CLIs for…
Designs and maintains semantic groupings and readable layouts on the filmmaking canvas — scenes, character-reference sets, act beats, and other titled visual frames. Use when nodes on the canvas cluster around a shared meaning and would read more clearly if arranged together and
Claude Code
$ npx -y skills add utopai-research/pai-code --skill groups-compose --agent claude-code
Codex
$ npx skills add utopai-research/pai-code --skill groups-compose -a codex -y
Cursor
$ npx skills add utopai-research/pai-code --skill groups-compose -a cursor -y
Gemini CLI
$ npx skills add utopai-research/pai-code --skill groups-compose -a gemini-cli -y
GitHub Copilot
$ npx skills add utopai-research/pai-code --skill groups-compose -a github-copilot -y
OpenCode
$ npx skills add utopai-research/pai-code --skill groups-compose -a opencode -y
Windsurf
$ npx skills add utopai-research/pai-code --skill groups-compose -a windsurf -y
name: groups-compose description: Designs and maintains semantic groupings and readable layouts on the filmmaking canvas — scenes, character-reference sets, act beats, and other titled visual frames. Use when nodes on the canvas cluster around a shared meaning and would read more clearly if arranged together and wrapped in a frame. Don't force it — groups are a view concern, not an organizing tax.
Skip if fewer than 3 members or the tie is just generation order.
Pick the one that fits. Grouping is current canvas state; read `workflow.json` per the project `PROJECT_AGENT.md` § "Choosing context" to verify ids.
A character card + its reference images.
1. **Read `./workflow.json` + `./canvas_positions.json`.** workflow.json gives you node ids + labels + subtypes; canvas_positions.json gives you each node's `x` / `y` AND the existing `groupFrames` map. Reads are unrestricted; writes go through `canvas_layout.js`. 2. **Pick members.** Identify which nodes belong in the proposed frame by looking at their ids, labels, prompts, and subtypes. Keep only ids that actually exist in `nodes`. 3. **Plan positions.** Preserve existing positions when they already read well. Otherwise move the selected nodes into a compact layout for the chosen pattern. Use these default gaps:
4. **Evict existing frame members** in the same layout JSON:
5. **Compute frame bboxes** from final member positions with 24px padding. Fallback sizes:
If measured heights appear in `canvas_positions.json`, prefer them.
minX = min(node.x for each member) minY = min(node.y for each member) maxX = max(node.x + node.w for each member) maxY = max(node.y + node.h for each member) x = minX - 24 y = minY - 24 width = (maxX - minX) + 48 height = (maxY - minY) + 48
6. **Decide title + hue.** Default hue 200 if you have no signal. 7. **Apply one layout update** with all node moves and frame changes:
node "$PAI_REPO_ROOT/server/cli/canvas_layout.js" \
--layout-json '{"positions":{"note_2":{"x":120,"y":80},"image_3":{"x":440,"y":80},"video_1":{"x":760,"y":80}},"groupFrames":{"upsert":{"frame_1716579123456":{"memberIds":["note_2","image_3","video_1"],"x":96,"y":56,"width":978,"height":468,"hue":200,"title":"Scene 1 — Causeway"}},"delete":[]}}'8. **Extending an existing frame** — same CLI/frameId, full new `memberIds`, recomputed bbox. 9. **Confirm to the user in one sentence.** Example: *"Grouped the three Morris reference shots under their own frame."*
The local AI filmmaking studio, driven from your coding agent. [, story/concept (iterate then…
Orchestrates story, script, screenplay, concept, product promo, and multi-shot idea work into finished video. Use first when the…
Generates and prompts video clips on the filmmaking canvas. Use when the user asks to generate, render, animate, continue,…
Designs and attaches voice samples or final narration/line audio on the filmmaking canvas via the local generate_voice.js CLI.…
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use…
AI-driven presentation workflow for generating editable PPTX decks and slides, reconstructing page visuals, creating reusable…
Use this skill when the user wants a .pptx with smooth cross-slide animation — PowerPoint Morph transitions, Keynote-style…
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to…