B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用（全PJ共通）。
ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新
無料GitHub で公開
shadcn-motion-ui-brief
shadcn/ui と Motion を使うマーケ・コーポ向け UI の判断基準。a11y・motion・セクション構造・コンポーネント再利用のブリーフ作成用（全PJ共通）。
ax-inc-dev/claude-cursor-orchestrationスター 3(GitHub 3 + cccskills 0)
実行スコア 未検証
インストール方法を見る含まれるファイル（1）
- SKILL.md3.0 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
shadcn/ui + Motion UI Brief
When to Use
- site-build-orchestrator の Phase 2
- 「リッチにしたいが安っぽくなった」「動きが気持ち悪い」と言われたときの見直し
- **
DESIGN.md（Stitch / awesome-design-md）**で色・タイポ・Elevation が既に固定されている → design-md-reference と併読し、Motion はそのトーンに従い 過剰にならないよう調整する
原則
- 見た目のリッチさより情報の階層（見出しレベル・余白・1 画面の主メッセージは 1 つに近づける）
- shadcn/ui は Radix 由来の フォーカス・キーボードを活かす。
div+onClickだけの Primary 操作を増やさない - Motion は補助。ヒーロー・初回ビューポート以外は 控えめ
セクション構造（B2B LP のデフォルト例）
案件で差し替えてよい。作業リポの docs/site/ui-brief.md に採用可否と理由を書く。
- Hero（価値提案・主 CTA・補助リンク）
- 信頼の帯（ロゴ／数値のいずれか）
- 課題共感 → 解決の骨子
- サービス／プロセス
- 事例・証拠
- FAQ / 反論処理
- 終結 CTA
shadcn/ui
- 優先:
Button/Card/Accordion/NavigationMenu/Sheet（モバイル）など、設計に合うプリミティブから選ぶ - 1 画面あたりの variant 濫用を避ける（ボタンサイズ・カード種類は理由のない増殖を禁止）
- Dialog / Sheet は Escape・フォーカストラップを壊さない（可能なら既存コンポーネントを維持）
Motion（Framer Motion 想定）
prefers-reduced-motion: reduceのときは アニメなしまたは即時表示（ユーザーの OS 設定を尊重）- viewport 入場: 一度きり（
whileInView等）を基本。無限リピートで注目を奪わない - stagger: 子の間隔は短く（目安 50〜100ms 級）。遅延の積み上げで操作可能時間を遅らせない
layoutアニメ: CLS（レイアウトシフト）やジャークの原因になりやすい。必要箇所のみ、検証してから
出力（docs/site/ui-brief.md 向け）
- 採用セクション一覧と 各セクションで許可する motion の種類（なし / フェード / 軽いスライド 等）
- 禁止: 自動再生の派手なパララックス、ヒーロー以外での長い stagger 連打
- プロジェクトで shadcn の CLI や registries を使う場合は、そのリポの公式ドキュメントに従う（本 Skill はブリーフ専用）
関連
- トークン・ユーティリティ規約: tailwind-product-ui-conventions
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
babysit
無料Keep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.
日本語の概要は準備中です。原文の説明を表示しています。
ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新
法人向けHTMLプレゼンスライドの実装エンジン。Claude Codeから指示書（アウトライン＋テンプレート指定＋カラー＋コンテンツ）を受け取り、単一HTMLファイルとして実装する。43種テンプレート＋14種アニメーション。トリガー：プレゼン実装、スライドHTML生成、提案資料コーディング。
ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
日本語の概要は準備中です。原文の説明を表示しています。
ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新
canvas
無料A 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.
日本語の概要は準備中です。原文の説明を表示しています。
ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新
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.
日本語の概要は準備中です。原文の説明を表示しています。
ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新