메뉴
React / Next.js / Tanstack Start + TypeScriptでコンポーネントやページを実装する際のルール。.tsxファイルの作成・編集、コンポーネント設計、フォーム実装、スタイリング、エラーハンドリング、画像最適化に関するリクエスト時に参照すること。「コンポーネントを作って」「ページを追加して」「フォームを実装して」「UIを修正して」などのリクエストに対応する。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | react-implementation |
| description | React / Next.js / Tanstack Start + TypeScriptでコンポーネントやページを実装する際のルール。.tsxファイルの作成・編集、コンポーネント設計、フォーム実装、スタイリング、エラーハンドリング、画像最適化に関するリクエスト時に参照すること。「コンポーネントを作って」「ページを追加して」「フォームを実装して」「UIを修正して」などのリクエストに対応する。 |
const で宣言する（function 宣言ではなく）type を使用するtype ExampleProps {
title: string
isActive: boolean
}
const Example = ({ title, isActive }: ExampleProps) => {
return (
<div className={isActive ? 'opacity-100' : 'opacity-50'}>
<h1>{title}</h1>
</div>
)
}
error.tsx: ルートセグメント単位のエラーハンドリングglobal-error.tsx: アプリ全体のフォールバックUIuseEffect と setState の使用を最小限に抑えるsm: md: lg: で段階的にレスポンシブ対応）resolver に渡すimport { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
const schema = z.object({
email: z.string().email('メールアドレスの形式が正しくありません'),
})
type FormValues = z.infer<typeof schema>
const ExampleForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({
resolver: zodResolver(schema),
mode: 'all',
})
const onSubmit = (data: FormValues) => { /* 送信処理 */ }
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}
<button type="submit">送信</button>
</form>
)
}
width / height を必ず指定する（レイアウトシフト防止）next/image の loading="lazy" またはデフォルト動作を活用）