Menu
スタイリング規約。Tailwind CSS v4 と inline styles の使い分け。 UI コンポーネントやプレビュー領域のスタイリング時に適用する。 Tailwind はアプリ UI に、inline styles はプレビュー領域に使い、混在させない。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Git コミットメッセージの規約。Conventional Commits 形式、日本語。 Apply when creating git commits, reviewing commit messages, or when the user asks to commit changes.
React / Next.js の TypeScript 規約。 コンポーネント（.tsx）、hooks、Server Components、Client Components、 Server Actions の実装時に適用する。
コミット前のセルフレビュー。プロジェクトの規約に沿っているかチェックする。 Apply when the user asks to review code, check conventions, or requests a self-review before committing.
TDD（テスト駆動開発）のワークフロー。 新機能やバグ修正の実装時に適用する。 Red → Green → Refactor のサイクルを必ず守る。
Vitest を使った TypeScript テスト規約。 テスト（.test.ts, .test.tsx）の作成・レビュー時に適用する。 純関数テスト、Result 型テスト、React コンポーネントテスト、モックを規定。
関数型プログラミングベースのTypeScriptコーディング規約。 TypeScriptコード（.ts/.tsx）の実装時に適用する。 型、アロー関数、Result型エラーハンドリング、不変性、命名、import、async、pipe/合成を規定。
| name | styling |
| description | スタイリング規約。Tailwind CSS v4 と inline styles の使い分け。 UI コンポーネントやプレビュー領域のスタイリング時に適用する。 Tailwind はアプリ UI に、inline styles はプレビュー領域に使い、混在させない。 |
| 領域 | 手法 | 用途 |
|---|---|---|
| アプリ UI | Tailwind CSS v4 ユーティリティ | ヘッダー、コントロールパネル、ボタン、レイアウト |
| プレビュー領域 | inline styles (React.CSSProperties) | ユーザーが操作するタイポグラフィのプレビュー表示 |
絶対に混在させない。 プレビュー領域に Tailwind を使わない。アプリ UI に inline styles を使わない。
// Good: Tailwind でアプリ UI
const ControlPanel = ({ children }: Readonly<{ children: React.ReactNode }>) => (
<aside className="w-2/5 overflow-y-auto border-r border-gray-200 p-4">
{children}
</aside>
)
const Button = ({ label, onClick }: Readonly<{ label: string; onClick: () => void }>) => (
<button
type="button"
className="rounded bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
onClick={onClick}
>
{label}
</button>
)
@apply は避ける）md:, lg:）dark: プレフィックス[] 記法: text-[14px]// Good: inline styles でプレビュー
type PreviewTextProps = Readonly<{
text: string
appliedStyles: React.CSSProperties
}>
const PreviewText = ({ text, appliedStyles }: PreviewTextProps) => (
<div className="flex-1 p-6"> {/* レイアウトだけ Tailwind OK */}
<p style={appliedStyles}> {/* タイポグラフィは inline styles */}
{text}
</p>
</div>
)
プレビュー領域のコンテナ（レイアウト、パディング、背景色の切り替え等）には Tailwind を使ってよい。ユーザーが操作する CSS プロパティのみ style 属性で適用する。
// Bad: プレビューテキストに Tailwind を使っている
<p className="text-lg font-bold leading-relaxed">{text}</p>
// Bad: アプリ UI に inline styles を使っている
<button style={{ backgroundColor: '#3b82f6', padding: '6px 12px' }}>Save</button>
// Bad: @apply で Tailwind を CSS に変換している
// .btn { @apply rounded bg-blue-600 px-3 py-1.5; }
迷ったら：