code-name-check.prompt.md
by interlife
HTML
---
description: "HTML/CSS命名規則チェック"
model: 任意のAIモデルを指定
agent: agent
---
## タスク
開いているファイル/変更されたファイルのHTML/CSS命名をチェックし、プロジェクトの命名規則との一貫性を確認してください
## 背景・文脈
プロジェクト全体で命名規則を統一し、保守性と可読性を向上させたい
## 事前準備
まず、プロジェクトの既存ファイルから命名規則のパターンを学習してください:
1. 既存のHTML/PHPファイル3-5個を分析
2. 既存のCSS/SCSSファイル3-5個を分析
3. 命名パターンを抽出
## チェック観点
### 1. 命名規則の種類
以下のいずれかを採用しているか確認:
- **BEM（Block Element Modifier）**: `.block__element--modifier`
- **FLOCSS**: `.l-layout`, `.c-component`, `.p-project`, `.u-utility`
- **SMACSS**: `.layout-`, `.module-`, `.state-`, `.theme-`
- **ケバブケース**: `.my-class-name`
- **キャメルケース**: `.myClassName`
- **スネークケース**: `.my_class_name`
- **独自ルール**: プロジェクト固有のパターン
### 2. クラス名のチェック項目
#### 一貫性
- [ ] プロジェクト全体で統一された命名規則
- [ ] 同じ意味の要素に異なる名前を使っていないか
- [ ] 命名規則の混在（BEMとケバブケースの混在等）
#### 意味の明確さ
- [ ] クラス名から役割が理解できるか
- [ ] 抽象的すぎる名前（`.box`, `.content1`, `.wrapper2`）
- [ ] 省略しすぎ（`.btn` → `.button` が望ましい場合も）
- [ ] 曖昧な名前（`.item`, `.element`, `.component`）
#### 階層・関係性
- [ ] 親子関係が分かる命名
- [ ] モディファイアの適切な使用
- [ ] 状態を表すクラス（`.is-active`, `.is-open`）の統一
#### 長さ
- [ ] 長すぎるクラス名（50文字以上）
- [ ] 短すぎて意味不明なクラス名
#### 特殊ケース
- [ ] JavaScript用クラス（`.js-`プレフィックス）の分離
- [ ] テスト用クラス（`.test-`, `[data-testid]`）の使用
- [ ] ユーティリティクラス（`.u-`, `.utility-`）の適切な使用
### 3. ID名のチェック項目
- [ ] スタイリングにIDを使用していないか（推奨: クラスを使用）
- [ ] ID名の重複（必須: ページ内で一意）
- [ ] アンカーリンク用IDの命名規則
- [ ] JavaScript用IDの命名規則
### 4. HTML要素のチェック
- [ ] セマンティックな要素名（`<header>`, `<nav>`, `<article>`等）
- [ ] div/span の過剰な使用
- [ ] カスタムデータ属性（`data-*`）の命名規則
### 5. SCSS/CSS固有のチェック
#### 変数名
- [ ] CSS変数（Custom Properties）: `--primary-color`, `--spacing-base`
- [ ] SCSS変数: `$primary-color`, `$spacing-base`
- [ ] 変数名の一貫性（color vs colour, gray vs grey）
#### ミックスイン・関数
- [ ] ミックスイン名: `@mixin button-variant()`, `@mixin media-sp()`
- [ ] 関数名: `@function rem()`, `@function color()`
#### ネスト時のクラス名
- [ ] BEMの`&__element`、`&--modifier`の正しい使用
- [ ] ネスト内での命名の一貫性
## 出力形式
### 📊...