B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用（全PJ共通）。
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3Updated Apr 25, 2026
FreePublished on GitHub
tailwind-product-ui-conventions
プロダクト品質の Tailwind 運用。cn()、デザイントークン、任意値の抑制、タイポ階層、コンテナクエリの判断（全PJ共通）。
The English summary is being prepared. Showing the original description.
ax-inc-dev/claude-cursor-orchestration3 stars(GitHub 3 + cccskills 0)
Run score Not tested
See how to installFiles included (1)
- SKILL.md2.5 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
Tailwind Product UI Conventions
When to Use
- site-build-orchestrator Phase 2 以降の実装
- クラス列挙がページごとにバラバラになってきたときのリセット
- リポに Google Stitch 形式の
DESIGN.md（例: awesome-design-md からコピー）がある → トークン・タイポの出典としてReaddesign-md-reference し、DESIGN.mdと本 SKILL を両方満たすようマッピングする
規約
レイアウト・スペーシング
- 余白は 限られたスケールに寄せる（例：
4 / 6 / 8 / 12 / 16 / 24のようにプロジェクトで一覧化）。都度のピクセル任意値は例外として理由をコメント or PR 説明に残す - セクション縦リズムは 繰り返しパターンでそろえる（
py-*がセクションごとに無秩序に変わらないように）
色・タイポ
- 色とコントラストは CSS 変数（デザイントークン） 経由を優先。hex のベタ貼り乱用を避ける
- 見出しレベル（h1〜h3）と視覚スタイルを一致させ、SEO/a11y と見た目を対応させる
cn() / 条件クラス
clsx+tailwind-mergeのcn()パターンに寄せ、競合クラスを merge で解決する
任意値・レスポンシブ
w-[372px]のような 任意値は必要最小限。まず標準スケール・max-w-*・grid で足りないか検討- コンテナクエリ（
@container）：カード内でブレークポイントが変わるときに検討。ページ全体のsm/md/lgだけでは足りない コンポーネント単位の折り返しに使う
アンチパターン
- 同じ UI を 微妙に違うクラス列で複製しない（コンポーネント化または variant 化）
- 「とりあえず shadow や ring を足す」だけで階層をごまかさない
出力
実装フェーズでは 作業リポの docs/site/ui-brief.md のトーンに沿い、新規ユーティリティを増やすなら トークン側に寄せるかを一言判断してからコードにする。
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