菜单
Create project UI concept proposals as generated bitmap mockups under docs/DESIGN. Use when the user asks to make UI案, design concepts, existing UI brush-ups, Eagle-like UI explorations, or multiple visual directions with prompts saved alongside the images.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
repositoryを調査し、`docs/PLAN/YYMMDD_{slug}.md` にPhase、Gate、完了状態、実行ルール、チェック項目を持つ自己完結した永続計画を作成または再構成する。Use when the user asks for simple-plan、チェックリスト式の計画、複数停止点を持つ中規模作業、段階的なapp分割やlocal migration、production前Gate、または既存planの構成変更。単発Sprintでは収まらないが、詳細なworker委任計画までは不要な作業向け。既存planをそのまま実行・再開するだけの場合は使わない。
Cloudflare ベースの新規アプリ設計、または既存アプリを Cloudflare 構成へ大きく移行する前に、短い設計メモを作る。Workers、Agents SDK、Durable Objects、D1、KV、R2、Wrangler、Workers 上の Hono などの構成判断を実装前に整理するときに使う。通常の Cloudflare コード修正だけなら、公式 Cloudflare 実装系 skill を使う。
事前設計が必要な中〜大規模作業について、repositoryを調査し、依存関係・設計境界・worker/model・統合順・完了条件を持つsingle-md実行計画を `docs/PLAN/{YYMMDD}_{slug}.md` に作成してから実行する。局所実装はheadless Cursor CLI、複雑な実装・調査・レビューはmodelを明示したCodex subagent、共有境界・統合・最終判断はmain Codexが担う。短期作業は対象外。Trigger: cursor-agent-delegate、Cursorで計画、worker委任計画、依存関係を設計して実装
Cursor CLI headless worker を使い、ユーザーの実装指示を短いローカル実行計画に分解し、安全に分離できる小タスクだけを `cursor agent --print --yolo --trust --model composer-2.5-fast` に並列委任する。`.codex/tmp/YYMMDD_slug/` 配下で状態を管理し、docs/PLAN を作らず main Codex が統合と検収を行う。Trigger: cursor-agent-sprint-cli、Cursor CLI sprint、headless Cursor Agent 並列実装、CLI worker sprint、 Cursor を使って計画を実装
既存キャラクター画像を、承認制でピクセルアートの正準画像へ変換し、3状態パイロット、クロマ前処理、状態間ジオメトリ検証、9状態生成、遷移QA、仮配置、アプリ内確認、ロールバック可能な正式配置まで行う。キャラクターからCodexペットを作る依頼に加え、ジャンプで小さくなる、状態ごとに身長が変わる、足元が跳ねる、クロマ縁が出る、アニメーションを修復したい依頼で使用する。
Git commit automation for Codex. Use when the user asks for simple-add, a lightweight commit, or committing the current work with an optional push. Trigger: simple-add, simple commit, 軽量コミット, 変更をコミット, コミットして, -p で push
| name | ui-design-concepts |
| description | Create project UI concept proposals as generated bitmap mockups under docs/DESIGN. Use when the user asks to make UI案, design concepts, existing UI brush-ups, Eagle-like UI explorations, or multiple visual directions with prompts saved alongside the images. |
このリポジトリで、実装前の UI 案を画像として作るための手順。
成果物は必ず docs/DESIGN/{YYMMDD}_{slug}/ の 1 フォルダにまとめる。画像数は 3 枚をデフォルトにし、ユーザー指示や検討状況に応じて増減する。prompts.md は常に残す。
要件を短く整理する。
AGENTS.md、docs/PLAN、docs/DESIGN、既存 UI、README などからプロジェクト固有の制約を拾う。既存 UI の扱いを決める。
出力フォルダを作る。
docs/DESIGN/{YYMMDD}_{slug}/。docs/DESIGN/260615_eagle_ui_concepts/。_v2 などの suffix を付ける。必要な場合だけ現在 UI を撮影する。
current_ui.png などの名前で保存する。prompts.md に参照元 URL、viewport、撮影日時を書く。方向性と枚数を決める。
画像を生成する。
imagegen skill/tool を使う。docs/DESIGN/{folder}/ にコピーまたは移動する。concept_01_dense_library.png のように、番号と方向性が分かる名前にする。Concept 01、案名、説明文、矢印、囲み線、注釈ラベルなど、実アプリに存在しないレビュー用表示を入れない。prompts.md を作る。
検証して報告する。
ls -lh docs/DESIGN/{folder} で決めた枚数の画像と prompts.md があることを確認する。view_image で画像が破損していないことを確認する。prompts.md の絶対パスを示す。プロンプトには、確認できた制約だけを入れる。
参考 UI が指定された場合は、ブランドや見た目を丸写しせず、情報設計、密度、ナビゲーション、操作モデルだけを抽出する。
例: Eagle 風の UI 案なら、画像アセット管理ツールとして、左のコレクション/タグ、中央のサムネイルグリッド、右の inspector、上部の検索/フィルタ/表示切替を検討する。ただし、これは Eagle 指定時だけの参照パターンであり、他の UI 案に常に適用しない。