(日本語があまり得意ではないため、AI を使って翻訳しました。
もし不自然な表現やご不便な点がありましたら、ご容赦いただけますと幸いです。 
)
目次
はじめに
Cursor を使ってフロントエンド開発をしていると、AI は非常に高速にコードを生成してくれますが、
必ずしもプロジェクトの規約に合ったコードになるとは限りません。
例えば：
- UI コンポーネントを使うべきところで、素の HTML タグを使ってしまう
- Validation が抜けている
- ファイルが間違ったレイヤーに置かれる
このような問題を防ぐために重要なのが Rules（ルール） です。
Rules を定義することで、Cursor に「どのような書き方をしてほしいか」を明確に伝えることができます。
この記事では、
Cursor の Rules の仕組み、
私が実際にフロントエンドプロジェクト（Next.js / TypeScript / ShadcnUI）で使っている Rules、
そしてそれを使うことで得られるメリットを紹介します。
Cursor における Rules の概要
Cursor の Rules とは、AI に対する指示を書いた設定ファイルのことです。
Cursor はこれらのファイルを読み取り、コード生成や提案に反映します。
Rules で指定できる内容の例：
- プロジェクトのスタックやコンベンション（Next.js, Tailwind, ShadcnUI など）
- コーディング原則（KISS, DRY, defensive programming など）
- Naming ルール、ディレクトリ構成、import ルール
- component / form / page を書く際のチェックリスト
主に使う場所は 2 つあります：
-
.cursorrules（プロジェクトの root）
常に最優先で読まれるため、グローバルルール（全ファイル共通）を書くのに適しています。 -
.cursor/rules/
アーキテクチャ、パターン、品質など、詳細・テーマ別のルールを置く場所です。
Rules が明確であればあるほど、
AI が生成するコードはあなたの書き方に近づき、
手作業での修正が減り、コードベースの一貫性が保たれます。
よく使っている Rules
私は、よく使う Rules をすべて .cursorrules にまとめています。
以下は、実際にプロジェクトで使っている .cursorrules の内容です。
# .cursorrules
# Next.js 16+ | App Router | TypeScript | ShadcnUI
You are an expert Frontend Engineer. Strictly follow these rules when generating code.
# ================================
# I18N
# ================================
- 常に英語（en）と日本語（ja）の両方のメッセージを作成すること
# ═══════════════════════════════════════════════════
# CODING PRINCIPLES
# ═══════════════════════════════════════════════════
## 1. Core Principles
- **KISS**: シンプルで読みやすいコード。過度な設計は避ける
- **YAGNI**: 要求されていないものは実装しない
- **DRY**: 再利用できるロジックは hooks / components に切り出す
- **SOLID (S & O)**:
- 単一責務
- props による拡張は OK、既存コードの修正は最小限に
## 2. Defensive Programming
- **Safe Access**: ネストしたプロパティには必ず `?.` と `??` を使う
- **Empty States**: list コンポーネントは必ず empty state を考慮
- **Loading/Error States**: loading は Skeleton、error は Alert を使う
- **Error Boundaries**: Auth / Dashboard など主要機能は Error Boundary でラップ
- **Validation**: form の input を処理する前に必ず Zod で validation
## 3. ShadcnUI & Tailwind
- `@/components/ui` 配下の components はプロジェクト所有。必要なら直接修正してよい
- Tailwind First：utility class を優先し、CSS ファイルは極力使わない
- Composition：Radix UI の `asChild` パターンを活用する
- 新規作成の前に、既存の shadcn component がないか必ず確認する
## 4. Clean Props
- props は signature で destructuring
- 1 component あたり最大 5〜7 props。それ以上は refactor
- boolean props は shorthand を使う（`<Input disabled />`）
- default value は destructuring で指定
- event handler 名は `handleChange` ではなく `onEmailChange` のようにする
## 5. AI Interaction
- まず shadcn component を探す
- 複雑な component は sub-component に分割
- 常に Accessibility を考慮（aria-label, keyboard navigation）
- 複雑なロジックには JSDoc（「what」ではなく「why」を説明）
# ═══════════════════════════════════════════════════
# CODE 作成時のチェックリスト
# ═══════════════════════════════════════════════════
1. ✅ import ルールを確認（逆 import / 横断 import をしない）
2. ✅ ファイルを正しい layer に配置（ui / core / shared / features）
3. ✅ naming 規約を守る（file は kebab-case、component は PascalCase）
4. ✅ Zod で validation
5. ✅ すべて型付け（any 禁止）
6. ✅ public API は index.ts から export
7. ✅ loading / error / empty state を必ず handle
8. ✅ Accessibility（aria-labels）
# ═══════════════════════════════════════════════════
# 詳細はこちら：
# - .cursor/rules/ → Architecture, Patterns, Quality
# - .cursor/skills/ → Project Architecture Skill
# ═══════════════════════════════════════════════════
これらの Rules によって Cursor は：
- ShadcnUI + Tailwind を優先
- I18N（英語 / 日本語）を常に意識
- defensive programming を前提に
- props をシンプルに
- checklist を満たした状態で component を完成
といった形で、プロジェクト標準にかなり近いコードを生成してくれるようになります。
Rules の使い方とメリット
使い方
- 上記内容を
.cursorrulesとしてプロジェクトの root に配置する - Cursor で chat や Composer を使う際、Rules を毎回説明する必要はない
→ Cursor が自動的に.cursorrulesを読む - アーキテクチャやパターンなど長い Rules は
.cursor/rules/に分離し、
.cursorrulesには「詳細は .cursor/rules/ を参照」とだけ書く
メリット
-
一貫性
AI が生成するすべてのコードが、同じ layer / naming / Zod / ShadcnUI / Accessibility に従う -
手修正が激減
import ミス、state 抜け、props 過多などが大幅に減る -
オンボーディングが楽
新しいメンバー（または数か月後の自分）が.cursorrulesを読むだけで規約を理解できる -
再利用しやすい
同じ stack の別プロジェクトに.cursorrulesをコピーして少し調整するだけで使える
Rules はあくまで「共通ルール」です。
Auth / Form / Architecture / UI など、ドメインごとに Cursor に正しい手順で考えさせたい場合は、
Rules に加えて Skills を定義するのが効果的です。
次回の記事では、
Cursor における Skills の設計と使い方について詳しく解説します。