B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用(全PJ共通)。
tailwind-product-ui-conventions
プロダクト品質の Tailwind 運用。cn()、デザイントークン、任意値の抑制、タイポ階層、コンテナクエリの判断(全PJ共通)。
実行スコア 未検証
インストール方法を見る含まれるファイル(1)
- SKILL.md2.5 KB
SKILL.md(原文)
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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 のトーンに沿い、新規ユーティリティを増やすなら トークン側に寄せるかを一言判断してからコードにする。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
babysit
無料Keep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.
日本語の概要は準備中です。原文の説明を表示しています。
法人向けHTMLプレゼンスライドの実装エンジン。Claude Codeから指示書(アウトライン+テンプレート指定+カラー+コンテンツ)を受け取り、単一HTMLファイルとして実装する。43種テンプレート+14種アニメーション。トリガー:プレゼン実装、スライドHTML生成、提案資料コーディング。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。