Cursorでプロジェクト管理のルールを設定する

更新日：2025年5月2日｜公開日：2025年5月2日

Cursorで日頃のプロジェクト管理をやってみたら面白いんじゃないかと思ったので色々実験してみました。

私はWebディレクターとして主にWebサイトの構築や運用などのプロジェクトを仕事でやっているので今回はWebディレクター向けにCursorで行うプロジェクト管理をまとめてみたいと思います。

いつものプロジェクトの業務フローを整理する

私はAIを利用する以前からプロジェクト毎に以下のフォルダ構成で区分をしているのでCursorのプロジェクトも同様にこのフォルダ構成で情報整理を行っていきます。

プロジェクトのフォルダ構成例

番号は業務のフロー順になりますが初期構築や運用などによっても前後しますし、プロジェクト進行中にも行ったり来たりすることもあるのであまり意味をなしていませんが基本の順を作るために接頭に連番を入れています。

自立型AIエージェントで動かすことを想定しているので基本となる情報整理のルールを決めたいと思います。

RulesでCursorにルールを設定する

Cursorの設定でRulesという項目があり、基本の根幹となるUser Rulesとプロジェクト毎のProject Rulesを作成することができます。User Rulesのデフォルトでは「Always respond in Japanese」と初期インストール時に設定をした日本語がルールとして記載されています。ここにはフォルダ構成や手順といったすべてのプロジェクトに共通する以下のルールを追加で入れておきます。

User Rulesは全体のルール

#ファイルを作成するディレクトリのルール
・00_情報: 情報や調査関連のファイルやWEB検索でのファクトチェックの情報を格納
・01_企画: 企画書や戦略のファイルや情報を格納
・02_仕様: コーディングルールやサイト構成のファイルや情報を格納
・03_見積: 見積や仕入れのファイルや情報を格納
・04_デザイン: figmaやPSDなどのデザインデータのファイルを格納
・05_html: html、css、jsなどのコーディングデータファイルを格納
・06_システム: Pythonやプログラム関連のファイルを格納
・07_テスト: テスト環境のFTPやSSHの情報を格納
・08_本番: 本番環境のFTPやSSHの情報を格納
・09_共有: クライアントからのフィードバックや修正依頼などの共有情報を格納

#手順について
・情報調査を依頼したときは必ずWEBサイトで最新の情報を取得すること
・ファイルを削除する時は確認をする
・ファイルを作成する時は確認をする

その他にも運用のなかで上手くいかなかった場合や追加のルールを入れたほうがスムーズになる場合などはここを随時カスタマイズしていきます。

またプロジェクトによっての個別のルールなどはProject Rulesとして個別に.mdcファイルにプロンプトを記載して呼び出せるようにしておきます。

Project Rulesはプロジェクト毎のルール

新規に登録する方法は以下の手順です。

作成された.mdcファイルにコーディング時のルールというかお作法のようなものを記載します。作成したProject Rulesは「.cursor>rules>coding-rules.mdc」という形でプロジェクトのフォルダに保存されます。

ここはルールの記載は結構迷うところがあってUser Rulesで記載したものもProject Rulesに入れたほうがいいかなとか汎用性を考えると今後の運用で色々試行錯誤しそうだなと感じています。

プロジェクトによっては企画だけ、デザインだけなどもあるのでコーディングやプログラムなどフォルダ構成の個別のタスクについてはProject Rulesに割り振ろうと思います。

#ファイルについて
・ページの拡張子は.htmlとする
・cssはcssフォルダに入れる
・jsはjsフォルダに入れる
・画像はimgフォルダに入れる

#htmlについて
・tailwindcssを利用する
・jqueryを利用する

#classの命名規則について
セクション要素はsectionを入れる。例　.***-section (ex キービジュアル) .kv-section
ブロック要素はblockを入れる。例.***-block (ex 汎用ブロック) .base-block
要素内の内側はinnerを入れる。例. (ex 汎用ブロックの内側) .base-block__inner
要素内の子要素はitemを入れる。例(ex 汎用ブロックの子要素) .base-block__item
要素内の固有の見出しはheadingを入れる。例(ex 汎用ブロックの見出し) .base-block__heading
要素内の固有のテキストはtextを入れる。例(ex 汎用ブロックのテキスト) .base-block__text
要素内の固有の画像はimgを入れる。例(ex 汎用ブロックの画像) .base-block__img
見出しはheadingを入れる。例.heading-00 (ex 汎用見出し) .heading-01
ボタンはbtnを入れる。例.***-btn (ex 汎用ボタン) .base-btn
リストはlistを入れる。例.***-list,.***-num-list (ex 汎用リスト) .base-list (ex 汎用ナンバーリスト) .base-num-list
テーブルはtableを入れる。例.***-table (ex 汎用テーブル) .base-table
ナビゲーションはnavを入れる。例.***-nav グローバルナビ:.global-nav ローカルナビ:.local-nav パンくず:.bread-nav
画像ファイル名はimg-00という規則性にする。例はページ内で5枚目の画像名 img-05.png

ルールが適用されているか確認するには

僕は入れなかったのですがルールが適用されているかわからないな？という時は冒頭に以下のような文言を入れるとAIがコンソールログみたいな感じで確認することができます。

このルールを参照したら、「coding-rulesを参照します」と答えてください。

こうすることで少し安心します。

エイリアス

その他にもよく使うプロンプトはエイリアスとして@のコンテキストメニューからRursor Rulesとして呼び出すこともできるようです。

設定はRulesに以下のようにショートカットを記載しておきます。

例はプログラムが上手く動かなかった時やリサーチの際に事実確認を取りたいときによく使うプロンプトです。

`/fix`: 上手く動いていないようです。エラーを修復してください。
`/web`: 最新のWebサイトの情報を参照して事実確認をしてください。

以上、まだ試行錯誤中ですがルールの設定についてまとめました。