B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用（全PJ共通）。
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026
FreePublished on GitHub
user-first-product-design
アプリ・Web 製品のユーザーファースト設計の正本。目的・タスク・認知負荷・エラー・Accessibility を先に固定してから UI/Figma/実装に進む（全PJ共通）。
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3 stars(GitHub 3 + cccskills 0)
Works withFigma
Run score Not tested
See how to installFiles included (1)
- SKILL.md3.9 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
User-First Product Design
When to Use
- すべてのアプリケーション／プロダクト UI を触る前（Figma・コード・要件のいずれでも）
- figma-mcp-design-orchestrator の Phase 0
- 機能一覧だけ決まっていて 誰が何のために使うかが薄いときの再出発
フロントエンド実装との順序（全PJ）
顧客／ユーザーファーストで体験と画面の契約を先に決め、内部構造はその後。
コンポーネント設計・リポジトリのフォルダ構成・グローバル状態・API の振り分けを UI 設計より前に始めると、見た目・タスク・a11y が後付けになり品質が落ちやすい。
- アプリ系: 本 SKILL →
product-ui-ux-design（および/product-ui-ux-designer）でdocs/ux-design/等を埋めてから実装。 - マーケサイト系:
site-build-orchestratorと/site-design-plannerでdocs/site/*を埋め、計画承認後に/site-frontend-implementer。 - トークンが DESIGN.md で固定されている場合: design-md-reference を併読。
グローバルルールの単一記述: ~/.cursor/rules/global-agent-workflow.mdc（「フロントエンド実装の順序」）、人間向け要約: ~/.cursor/CURSOR_GLOBAL_RULES.md。
原則（優先順）
- ユーザーの成果（Outcome） が先。機能や画面数は後。
- 主要タスク（理想は 1 セッション 1 主目的）を文章化してからワイヤーやフレームを作る。
- 圧倒的に使いやすいかは「学習コストが低いか・迷わないか・ミスから戻れるか・待たされないか」で測る。主観「かっこいい」だけにしない。
- アプリの目的（事業目的・成功指標）とユーザーの目的の 接点 を明示する。一致していなければ設計を疑う。
- Accessibility：色だけに頼らない情報、
focus/ キーボード、コントラスト、動き（prefers-reduced-motion）を後回しにしない。
設計前チェックリスト（出力前に自分で埋める）
| 問い | 答え |
|---|---|
| 主ユーザーは誰か（1 手で書けるか） | |
| その人が「今日ここで達成したいこと」は | |
| 失敗・離脱が一番コスト高いのはどの操作か | |
| 初見が 3 秒で理解すべきことは | |
| 絶対に誤操作させたくない操作と、その防止 | |
| オフライン・遅延・権限不足のときの振る舞い |
成果物（リポに残すなら）
プロジェクトルートに docs/design/ を推奨（テンプレは ~/.cursor/templates/docs-design/）。
- 誰の・何のための UI かを一文で
- タスクフロー（箇条書きでよい）
- 非対象（やらないこと／後回し）
よくあるアンチパターン
- スクリーン一覧から入る（タスクが見えない）
- 全ロールに同じ画面上詰め込み（意思決定者と実行者を混在）
- エラーを「Something went wrong」で丸める
- デザインシステムの見た目だけ真似して 情報の優先順位が崩れる
接続
- Figma で形にする前に本 Skill を完了させる。
- Figma MCP 作業は figma-mcp-design-orchestrator へ。
参考（外部）
- Nielsen Norman — usability heuristics（ヒューリスティクス演習に利用可）
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.
More skills from this repository
babysit
FreeKeep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026
法人向けHTMLプレゼンスライドの実装エンジン。Claude Codeから指示書（アウトライン＋テンプレート指定＋カラー＋コンテンツ）を受け取り、単一HTMLファイルとして実装する。43種テンプレート＋14種アニメーション。トリガー：プレゼン実装、スライドHTML生成、提案資料コーディング。
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026
brainstorming
FreeYou MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026
canvas
FreeA Cursor Canvas is a live React app that the user can open beside the chat. You MUST use a canvas when the agent produces a standalone analytical artifact — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Especially prefer a canvas when presenting results from MCP tools (Datadog, Databricks, Linear, Sentry, Slack, etc.) where the data is the deliverable — render it in a rich canvas rather than dumping it into a markdown table or code block. If you catch yourself about to write a markdown table, stop and use a canvas instead. You MUST also read this skill whenever you create, edit, or debug any .canvas.tsx file.
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026
Authors Cursor Rules (.cursor/rules/*.mdc) and custom Subagents (.cursor/agents/*.md or ~/.cursor/agents). Use when creating or refactoring rules/subagents, splitting large rules, choosing subagent vs skill, setting model/readonly/background, or replacing repeated delegation prompts.
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026