ワンクリックで
react
React / Next.js の TypeScript 規約。 コンポーネント(.tsx)、hooks、Server Components、Client Components、 Server Actions の実装時に適用する。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
メニュー
React / Next.js の TypeScript 規約。 コンポーネント(.tsx)、hooks、Server Components、Client Components、 Server Actions の実装時に適用する。
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.
コミット前のセルフレビュー。プロジェクトの規約に沿っているかチェックする。 Apply when the user asks to review code, check conventions, or requests a self-review before committing.
スタイリング規約。Tailwind CSS v4 と inline styles の使い分け。 UI コンポーネントやプレビュー領域のスタイリング時に適用する。 Tailwind はアプリ UI に、inline styles はプレビュー領域に使い、混在させない。
TDD(テスト駆動開発)のワークフロー。 新機能やバグ修正の実装時に適用する。 Red → Green → Refactor のサイクルを必ず守る。
Vitest を使った TypeScript テスト規約。 テスト(.test.ts, .test.tsx)の作成・レビュー時に適用する。 純関数テスト、Result 型テスト、React コンポーネントテスト、モックを規定。
関数型プログラミングベースのTypeScriptコーディング規約。 TypeScriptコード(.ts/.tsx)の実装時に適用する。 型、アロー関数、Result型エラーハンドリング、不変性、命名、import、async、pipe/合成を規定。
| name | react |
| description | React / Next.js の TypeScript 規約。 コンポーネント(.tsx)、hooks、Server Components、Client Components、 Server Actions の実装時に適用する。 |
アロー関数のみ。class コンポーネントと React.FC は禁止。
type Props = Readonly<{
title: string
items: readonly string[]
onSelect: (item: string) => void
}>
const UserList = ({ title, items, onSelect }: Props) => (
<section>
<h2>{title}</h2>
<ul>
{items.map((item) => (
<li key={item}>
<button type="button" onClick={() => onSelect(item)}>{item}</button>
</li>
))}
</ul>
</section>
)
Readonly<{...}> の type alias(interface は使わない)readonly string[]const useFilter = <T,>(items: readonly T[], predicate: (item: T) => boolean) =>
useMemo(() => items.filter(predicate), [items, predicate])
setItems((prev) => [...prev, newItem])
setItems((prev) => prev.map((item) => item.id === id ? { ...item, done: true } : item))
実装は handle 接頭辞、props は on 接頭辞。
const SearchForm = ({ onSearch }: Readonly<{ onSearch: (q: string) => void }>) => {
const [query, setQuery] = useState("")
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
onSearch(query)
}
return (
<form onSubmit={handleSubmit}>
<input value={query} onChange={(e) => setQuery(e.target.value)} />
</form>
)
}
純粋 — 副作用なし、hooks なし。データは直接 fetch。
type PageProps = Readonly<{ params: Promise<{ slug: string }> }>
const ArticlePage = async ({ params }: PageProps) => {
const { slug } = await params
const article = await fetchArticle(slug)
return <Article data={article} />
}
// Next.js のページは default export が必要
export default ArticlePage
"use client"Result 型で返す。境界でバリデーション。
"use server"
import { ok, err, type Result } from "neverthrow"
const createPost = async (formData: FormData): Promise<Result<Post, ValidationError>> => {
const parsed = parsePostInput(formData)
if (parsed.isErr()) return err(parsed.error)
const post = await db.post.create({ data: parsed.value })
return ok(post)
}
src/
├── app/ # ルート(App Router)
│ ├── layout.tsx
│ └── users/page.tsx
├── features/ # 機能モジュール(純粋ロジック + actions)
│ └── auth/
│ ├── validate.ts
│ └── actions.ts
├── components/ # 共有 UI コンポーネント
└── lib/ # 共有ユーティリティ
機能ファースト。テストはソースと同じ場所に。純粋なコアを features/ に、I/O は app/ 境界に。