Skip to content
cccskills
FreePublished on GitHub

figma-shot-board

Place a set of local screenshots/images into Figma as a labeled, sectioned board (auto-layout, title + section rows, layer names = filenames) using the Figma MCP (upload_assets + use_figma). Works against a new file or an existing file/page, and encodes the non-obvious upload gotchas (default 400x300 FILL frames, first-page placement, natural-size resize, 2x capture scaling). Use when the user wants screenshots arranged in Figma, UI states delivered as a Figma page, or images moved/relocated between Figma files. Triggers: "figma-shot-board", "/figma-shot-board", "figma shot board", "スクショをFigmaに並べて", "FigmaにUIステートを起こして", "スクショをFigmaに起こして", "screenshots to figma", "figma board of screenshots", "put these images in figma", "Figmaに画像を配置".

The English summary is being prepared. Showing the original description.

hideki5123/agent-skill-set
Works withFigma

Run score Not tested

See how to install

Files included (3)

  • SKILL.md5.8 KB
  • references/scenarios.feature1.6 KB
  • scripts/post_uploads.sh635 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

figma-shot-board — screenshots → labeled Figma board

Turn N local images into one tidy Figma page: header (title + subtitle) and labeled sections, each a horizontal row of image frames at their natural size.

Inputs to establish first

  • Image files, their order, and a section grouping (section label → files).
  • Scale divisor: captures taken at deviceScaleFactor: 2 should be placed at natural size ÷ 2 (logical 1x). Default divisor 2 for playwright 2x captures, 1 for plain images.
  • Target: an existing Figma file URL (extract fileKey), or a new file (needs plan/team choice — whoami lists plans; ask if multiple).
  • Page: new page name (recommended; never disturb existing pages) or an existing page node-id.

Workflow

  1. Preflight: call whoami (auth check + plan keys; also the tool to cite when rate-limited). MANDATORY prerequisite skills: load figma-create-new-file before any create_new_file call, and figma-use before any use_figma call.
  2. Target file/page: for a new file use create_new_file (lands in drafts — tell the user it can be dragged into a project). For a page inside a design file use use_figma with figma.createPage() (design files only).
  3. Get upload URLs: upload_assets(fileKey, count=N) → N single-use submit URLs (expire in 10 min — upload promptly).
  4. POST the files with scripts/post_uploads.sh (multipart file field — the filename becomes the Figma layer name, so name files descriptively before uploading). Keep URL↔file order aligned.
  5. Fix placement (the big gotchas) via one use_figma call:
    • Uploaded frames land on the first/current page as 400×300 frames with the image as a FILL (cropped!) — NOT at natural size.
    • For each frame: read fills → figma.getImageByHash(fill.imageHash) → await img.getSizeAsync() → frame.resize(w/divisor, h/divisor).
    • Move to the target page with targetPage.appendChild(frame) (works across pages; collect frames from whatever page they landed on).
  6. Build the board (respect ~10 ops per use_figma call — split into 2-3 calls): root figma.createAutoLayout('VERTICAL', {itemSpacing: 56, padding…}) with a light fill, positioned away from (0,0); header (title 28 Semi Bold + subtitle 14 gray); per section a VERTICAL auto-layout (label 18 Semi Bold + HORIZONTAL row, counterAxisAlignItems: 'MIN', itemSpacing 24) and row.appendChild(frame) for its images. Font loads first (Inter styles are Semi Bold, not SemiBold).
  7. Verify: await root.screenshot() in the last call and eyeball it. Return the page URL: https://www.figma.com/design/<fileKey>/<name>?node-id=<pageId with ':'→'-'>.
  8. Relocation ("move this board to file X"): rebuild in the target file (repeat 3-7 — image hashes are per-file, re-upload is required), then mark the old page/file clearly (rename to "MOVED → …"); the MCP cannot delete files — tell the user to delete the old draft.

Gotcha table

SymptomCause / fix
All frames 400×300, images croppedDefault placement is FILL on a fixed frame — resize to getSizeAsync() ÷ divisor
Frames on the wrong pageUploads land on the current/first page — targetPage.appendChild() them
Blurry at 100%2x captures placed at pixel size — divide by 2
Layer named "image"POSTed raw bytes — use multipart file field so the filename is used
Upload URL 4xxSingle-use / expired (10 min) — request fresh URLs with upload_assets
figma.createPage throwsFigJam/Slides file — pages are design-file only
Font error "SemiBold"Inter style strings contain a space: Semi Bold

References

  • references/scenarios.feature — BDD spec. Read only when auditing or amending this skill; not needed for normal execution.
  • scripts/post_uploads.sh — multipart POST loop for submit URLs (usage: post_uploads.sh mapping.tsv where each line is submitUrl<TAB>filepath).

Retrospective

After the board is delivered, reflect on the run:

  1. Consider: mid-session corrections (wrong file/team, re-uploads, layout redo)?
  2. Ask the user (in Japanese): 「今回のFigmaボード作成のフィードバック (1-5の評価、気になった点、または何もなければEnter)」 If the rating is < 5, ALWAYS follow up: 「なぜその評価ですか？ (改善のために具体的に教えてください)」 and record the answer verbatim as Rating reason.
  3. If feedback was given OR corrections occurred: create feedback/ next to this SKILL.md if missing (resolve via git rev-parse --show-toplevel), create feedback/log.md with the standard header if missing, and prepend an entry (Skill Version / Task / Outcome / Rating / Rating reason / Corrections / Issues / User Note). Confirm in one short Japanese sentence.
  4. If skipped and no corrections occurred, end without recording.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

adversarial-panel

Free

Run a multi-model adversarial mutual review with facilitator synthesis: 2+ panelists (different model families where possible — use codex-server / codex-cli for the external-family seat) independently answer, adversarially critique each other across rounds, and the main session acts as facilitator, synthesizing agreements, live disagreements, and calibrated confidence into one answer. Use ONLY on high-stakes, hard-to-reverse claims, designs or decisions, and only when the user EXPLICITLY asks to debate or adversarially review with multiple models — "discuss with Opus and Codex", "red-team this", "devil's advocate", 敵対的レビュー, 相互レビュー, 多モデル討論, 議論させて. A full run costs ~6 subagent/CLI dispatches: state the panel size and round count and get a go-ahead before launching. Where the Workflow tool is available, run the panel as a Workflow (judge-panel / adversarial-verify) instead of ad-hoc fan-out. Do NOT self-trigger on a bare "are you sure?" — that is a cue to OFFER the panel, not to run it.

The English summary is being prepared. Showing the original description.

hideki5123/agent-skill-set2Updated Oct 21, 2026

agent-swarm

Free

Orchestrate multiple coding-agent sessions (Claude Code, Codex, Gemini) over the mcp_agent_mail MCP server, observe their progress on a recurring auto-loop, and prevent inconsistencies (file/edit conflicts and contradictory decisions) between concurrent tasks. Auto-manages the agent-mail server, derives the shared room key from the git repo, and runs either as the orchestrator/observer or as a participating worker. Handles the operational details (server startup, room key, reservation conventions) so the user does not have to remember them. Use when coordinating several agent sessions on different tasks at once, watching a swarm of sessions for conflicts, or wiring already-running sessions into a shared coordination room. Trigger phrases: "agent-swarm", "/agent-swarm", "orchestrate agents", "orchestrate multiple claude sessions", "coordinate sessions", "watch for conflicts between agents", "observe the swarm", "prevent inconsistency between sessions", "multi-agent observe", "複数セッションを協調", "エージェント協調", "セッション間の不整合監視", "スウォーム監視", "複数のClaudeを束ねて".

The English summary is being prepared. Showing the original description.

hideki5123/agent-skill-set2Updated Oct 21, 2026

agents-init

Free

Generate AGENTS.md (cross-tool agent context — Codex CLI, Aider, Cursor, etc.) and wire CLAUDE.md as a symlink so Claude Code reads the same file. Delegates content generation to Claude's built-in /init when needed, then renames + symlinks. Idempotent. Triggers — /agents-init, "generate agents.md", "create agents.md", "share claude and codex context", "set up agents file", "init agents", "agents-init", "cross-tool agent context", "wire claude and agents".

The English summary is being prepared. Showing the original description.

hideki5123/agent-skill-set2Updated Oct 21, 2026

chrome-use

Free

Drive an already-running, LOGGED-IN Chromium browser on macOS via AppleScript — navigate, click, fill forms, scroll, and extract page content from the user's REAL session, with the browser left open and NO profile copy and NO restart. Use when the task needs the existing logged-in session (cookies, auth, current tabs) reused as-is. Trigger phrases: "chrome-use", "ブラウザから取得", "ログイン済みの Chromeで", "ブラウザを操作して", "このページ読んで", "Xのスレッド読んで", "ログインしたまま取得", "自分のセッションでスクレイプ", "read this page in my browser", "scrape with my session", "drive my chrome", "execute JS in my (logged-in) browser", "automate my logged-in browser". Chromium family (Chrome default; Brave/Edge/Arc/Vivaldi via --app). NOT for isolated/throwaway automation where login reuse is unneeded — use playwright-cli for that. macOS only.

The English summary is being prepared. Showing the original description.

hideki5123/agent-skill-set2Updated Oct 21, 2026

codex-cli

Free

Run OpenAI Codex CLI from the terminal for batch / one-shot `codex exec` invocations with output captured to an `-o` file. Use for fire-and-forget runs, scripted CI, code review batches (`codex review`), and resuming a specific session by id (`codex exec resume`). Always use this skill instead of `mcp__codex__codex` and `mcp__codex__codex-reply` MCP tools — CLI is faster and more capable. For streaming UX, multi-turn dialogues that need live state, structured (JSON schema) output, attaching images, or programmatic event handling → **use codex-server instead**. codex-server uses the user's ChatGPT subscription via Codex App Server and decoupled async invocation that bypasses the Bash 2-minute timeout entirely. Trigger patterns (batch-only — chat/streaming triggers belong to codex-server): codex-cli / codex CLI / codex exec / codex review / codex resume / codex fork / batch + {codex, gpt} / one-shot + {codex, gpt} / non-interactive + codex / codex {to a file, -o, output file, captured output} / CI + {codex, gpt} / scripted + {codex, gpt} / fork codex session / resume codex session by id

The English summary is being prepared. Showing the original description.

hideki5123/agent-skill-set2Updated Oct 21, 2026

codex-server

Free

Run OpenAI Codex via the Codex App Server (JSON-RPC-over-stdio) for streaming multi-turn chat sessions with persistent threads, structured output, image input, and rich event streams. Default entry point for ChatGPT/GPT/Codex-like conversations from the terminal. Uses the user's ChatGPT subscription (Plus / Pro / Team) exclusively via `codex login` — never consumes OPENAI_API_KEY billing, by design. Implementation: TypeScript on deno with npm:@openai/codex-sdk; spawns the existing system codex binary. Decoupled async invocation: every turn returns turn-id in <1 s; the actual SDK work runs in a detached worker that streams to per-turn files under ~/.codex-server/turns/<turn-id>/ — Bash's 2-min timeout never applies. Prefer this over codex-cli for streaming UX, multi-turn dialogues that need live state, structured (JSON schema) output, attaching images, or programmatic event handling. Use codex-cli only for one-shot batch invocations that pre-capture to an -o file. For OpenAI Platform API calls specifically (embeddings, image generation, audio, moderation, batches, files) — not open-ended chat — use openai-cli instead; that path bills OPENAI_API_KEY, this one uses the ChatGPT subscription. Trigger patterns (match any variation): codex / codex-server / codex app server / codex app-server / openai / open ai / OpenAI / chatgpt / chat gpt / ChatGPT / GPT / ask gpt / chat with gpt / gpt session / codex session / streaming chat / multi-turn chat / multi turn chat / second opinion / cross-check / cross check / ai pair programming / another AI / external AI / ask another model / get GPT's take / what does openai think / show me what gpt thinks / structured output from gpt / json schema gpt / resume codex thread / continue codex conversation / continue codex session / /codex-server

The English summary is being prepared. Showing the original description.

hideki5123/agent-skill-set2Updated Oct 21, 2026

See all skills by hideki5123

Report a problem with this skill