本文へ移動
cccskills
無料GitHub で公開

tailwind-product-ui-conventions

プロダクト品質の Tailwind 運用。cn()、デザイントークン、任意値の抑制、タイポ階層、コンテナクエリの判断(全PJ共通)。

ax-inc-dev/claude-cursor-orchestrationスター 3(GitHub 3 + cccskills 0)

実行スコア 未検証

インストール方法を見る

含まれるファイル(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 からコピー)がある → トークン・タイポの出典として Read design-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 のトーンに沿い、新規ユーティリティを増やすなら トークン側に寄せるかを一言判断してからコードにする。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

b2b-site-strategy-and-ia

無料概要あり

B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用(全PJ共通)。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

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日 更新

biz-presentation-engine

無料概要あり

法人向け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日 更新

ax-inc-dev のスキルをすべて見る

このスキルの問題を報告する