跳到正文
cccskills
免费在 GitHub 公开

ui-spec-sim

チケットや要件から「HTML UIスペック (決定ログ D番号・未決Qカード・文言一覧)」と 「触って遷移を確認できるHTMLシミュレーター (カバレッジ自動チェック付き)」のペアを artifactとして作り、ユーザーレビューを何巡も回して確定させる設計レビューループ。

各巡で敵対的な整合検証 (スペック⇔シミュレーター⇔文言表) を行い、確定した内容だけを 実装Ticket/Confluenceに最低限のテキストで同期する。Figma納品はfigma-shot-boardに委譲。

Use when the user wants an interactive UI spec, a transition simulator, a decision-log driven design review, or to iterate a UI design with confirmable state transitions. Triggers: "ui-spec-sim", "/ui-spec-sim", "UIスペックとシミュレーター", "スペックシミュレーター", "設計レビューループ", "遷移を触って確認できるものを作って", "トランジションシミュレーター", "デザイン決定ログでレビュー", "interactive spec", "transition simulator", "spec with simulator".

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

集成工具ConfluenceFigma

实测评分 未实测

查看安装方法

包含的文件(4)

  • SKILL.md8.7 KB
  • references/deliverable-templates.md3.7 KB
  • references/scenarios.feature2.1 KB
  • references/verify-round.md3.2 KB

SKILL.md(原文)

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

ui-spec-sim — UIスペック+シミュレーターの設計レビューループ

チケット1枚から、レビュー可能な2つのHTML成果物を作り、ユーザーの指摘を 決定ログ (D番号) として積み上げながら確定させる。実装者は文言一覧と シミュレーターの遷移をそのまま実装すればよい状態がゴール。

成果物の型 (2 artifacts・別URL)

成果物役割
スペックHTML要件ごとのセクション+実UI忠実なモック+決定ログ (D1..)+未決Qカード (案A/B+推奨)+文言一覧 (全UIストリング)
シミュレーターHTML決定を実装した状態機械。遷移カバレッジ自動チェック (触った遷移にチェック=確認漏れが残る)・遷移ログ・障害注入トグル・in-flight遅延

言語規則: 注釈=ユーザーの言語 / 製品UI文言=製品の言語 (両成果物とも)。 UI文言はスペックの文言一覧が唯一の正で、モック・シミュレーターは一字一句同じ文字列を使う。

Phase 0: グラウンディング

  1. チケット→親チケット→親スペック (Confluence等) の順に読む。
  2. 実UIコードを読んで見た目を掴む — 対象アプリの実コンポーネント (ボタン様式・ フィールド様式・テーマ色) をリポジトリから確認し、モックはそれに寄せる。 汎用デザインの再発明をしない。
  3. enum・status値など仕様の土台になる値は実コードで裏取りする (存在しない値を スペックに書かない)。

Phase 1: スペックHTML

構造とスケルトンは references/deliverable-templates.md を参照 (WHEN TO READ: このPhaseとPhase 2 の執筆時のみ)。要点:

  • 決定ログ: D番号は増えるのみ。改訂は「D5改」と書き、旧番号は再利用しない (チャット・チケットからの参照を壊さない)。各決定に不採用案と理由を併記。
  • 未決Qカード: 案A/案B+推奨を明示。解決したら「決定」欄を追記して残す (履歴が消えない)。
  • 文言一覧: モックに見えるUIストリング全部に key を振る。「全ストリング」を 名乗る以上、モックとの完全一致を検証で担保する (下記Phase 3)。
  • artifactとして公開し、以後同じURLで再公開し続ける。

Phase 2: シミュレーターHTML

  • スペックの決定を全部実装した状態機械。1ファイル・vanilla JS。
  • カバレッジ一覧が肝: 設計済み遷移を列挙し、操作すると自動チェック。 「未チェック=未確認」がユーザーへの価値。ガード (disabled化・拒否) も 観測ベースでチェックする。
  • 障害注入 (Slack失敗等)・異常系再現ボタン・RPC遅延+spinner (二重クリック防止) を 入れて、正常系以外も触れるようにする。
  • シミュレーター都合の要素 (再現ボタン等) は「(シミュレーション)」と明示し、 製品UIと区別する。

Phase 3: レビューラウンド (何巡でも)

1ユーザー指摘 = 1ラウンド。毎回:

  1. 指摘を新D番号 (または D改) に落とし、スペック・シミュレーター・文言一覧の 3点を同時に更新する。片方だけ直すと必ず矛盾が残る。
  2. シミュレーターは headlessブラウザで実挙動を検証 (構文チェック+主要フロー)。 references/verify-round.md のスニペットを使う (WHEN TO READ: 各ラウンド)。
  3. 敵対的整合検証: 検証agentにスペック⇔シミュレーター⇔文言表⇔決定ログの 矛盾・古い記述の残骸を探させる (プロンプト雛形は references/verify-round.md)。 must/should/nit で受け取り、main loopで取捨して反映。
  4. 同じURLで再公開し、報告は「今回のD/Q差分」を先頭に。

「効かない」系の報告は、まずheadlessで再現を試みる — 再現しなければ操作上の罠 (状態リセット・分かりにくい既存挙動) を疑い、罠自体を設計で潰す。

Phase 4: 外部同期 (求められたときだけ)

  • 実装Ticket: 蒸留したテキスト (state flowサマリー+要件+文言一覧への参照) と スクショ (シミュレーター専用の絵は除外)。添付はjira-cliスキルのREST フォールバック参照。
  • 親スペック (Confluence): 変更された決定だけを外科的に反映。confluenceスキルの 「Surgical edits — safety rules」に従う (literal-textアンカー・update直前再fetch)。
  • Figma: figma-shot-board スキルに委譲 (スクショ→ラベル付きボード)。

鉄則 (過去の失敗から)

  • チーム向けドキュメントにシミュレーションの内容を書かない。チームに見せるのは Ticket上の最低限テキスト+製品状態のスクショだけ。シミュレーター・録画・探索物は チャット/artifactに留める。
  • artifactリンクは共有設定するまで本人しか開けない — チーム共有前提の場所に貼るとき は一言添える。
  • 破壊的操作なしのUI (押せるのに失敗するボタン) を作らない — ガードはUIで先取りし、 server側はバックストップ。

References

  • references/deliverable-templates.md — スペック/シミュレーターの構造スケルトンと 実装パターン。WHEN TO READ: Phase 1-2 の執筆時のみ。
  • references/verify-round.md — 整合検証agentのプロンプト雛形+headless検証スニペット。 WHEN TO READ: Phase 3 の各ラウンド。
  • references/scenarios.feature — BDD spec。スキル自体の監査・改修時のみ読む。 通常実行では不要。

Feedback Check

実行開始前に、この SKILL.md の隣の feedback/log.md が存在し5件以上あれば直近10件を 読む。同一キーワードの問題が3件以上、または直近10件の平均評価が3未満なら、ユーザーに 日本語で伝える: 「過去のフィードバックで類似パターンを検出: [簡潔に]。 /skill-improve --skill ui-spec-sim で改善案を分析できます。」いずれでも実行は続行。 log.md がなければ黙ってスキップ。

Retrospective

ワークフロー完了後に振り返る:

  1. 途中の是正 (却下された設計・方針転換・検証で見つかったバグ) があったか確認。
  2. ユーザーに日本語で聞く: 「今回のスペック/シミュレーター作成のフィードバック (1-5の評価、気になった点、または何もなければEnter)」 評価が5未満なら必ず追問: 「なぜその評価ですか? (改善のために具体的に教えてください)」 回答を Rating reason として逐語記録。auto-modeでもこの追問は省略しない。
  3. フィードバックがある、または是正が実際にあった場合: a. feedback/ ディレクトリがなければ作成 (この SKILL.md の隣。skillのソースdirは git rev-parse --show-toplevel から解決)。 b. feedback/log.md を読み (なければ # Feedback Log ヘッダー+空行+ <!-- Append new entries at the top. Do not edit previous entries. --> で作成)、 ヘッダー直後に新エントリを追加 (Skill Version / Task / Outcome / Rating / Rating reason / Corrections / Issues / User Note)。 c. 一文の日本語で記録完了を伝える。
  4. スキップかつ是正なしなら記録せず終了。

评价

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

评论

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

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

提交后会立即公开。请勿填写邮箱、电话等个人信息。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 的全部技能

报告此技能的问题