跳到正文
cccskills
免费在 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に画像を配置".

中文简介正在准备中。当前显示原文说明。

集成工具Figma

实测评分 未实测

查看安装方法

包含的文件(3)

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

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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.

中文简介正在准备中。当前显示原文说明。

hideki5123/agent-skill-set22026年10月21日 更新

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を束ねて".

中文简介正在准备中。当前显示原文说明。

hideki5123/agent-skill-set22026年10月21日 更新

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".

中文简介正在准备中。当前显示原文说明。

hideki5123/agent-skill-set22026年10月21日 更新

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.

中文简介正在准备中。当前显示原文说明。

hideki5123/agent-skill-set22026年10月21日 更新

codex-cli

免费

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

中文简介正在准备中。当前显示原文说明。

hideki5123/agent-skill-set22026年10月21日 更新

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

中文简介正在准备中。当前显示原文说明。

hideki5123/agent-skill-set22026年10月21日 更新

查看 hideki5123 的全部技能

报告此技能的问题