메뉴
スタイリング規約。Tailwind CSS v4 と inline styles の使い分け。 UI コンポーネントやプレビュー領域のスタイリング時に適用する。 Tailwind はアプリ UI に、inline styles はプレビュー領域に使い、混在させない。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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; }
迷ったら：