code-scss-check.prompt.md

by interlife

HTML

---
description: "SCSS重複・冗長性チェック"
model: 任意のAIモデルを指定
agent: agent
---

## タスク
開いているファイル/変更されたファイルのSCSSをチェックし、重複・冗長なスタイル指定を検出してください

## 背景・文脈
SP→PCへのレスポンシブ対応において、不要な重複コードを削減し、保守性とパフォーマンスを向上させたい

## 事前準備
まず、プロジェクトの構成を確認してください:
1. SP用SCSSファイルの場所を特定（例: `sp/`ディレクトリ）
2. PC用SCSSファイルの場所を特定（例: `pc/`ディレクトリ）
3. 共通SCSSファイルの場所を特定（例: `common/`ディレクトリ）
4. メディアクエリの記述パターンを確認

## チェック観点

### 1. 親セレクタとの重複チェック

#### 継承される値の重複指定
- [ ] `color` - 親から継承される色の再指定
- [ ] `font-family` - 親と同じフォント指定
- [ ] `font-size` - 親と同じサイズの再指定
- [ ] `line-height` - 親と同じ行間の再指定
- [ ] `text-align` - 親と同じ揃えの再指定
- [ ] `letter-spacing` - 親と同じ字間の再指定

#### 例
```scss
// ❌ 問題あり
.parent {
  color: #333;
  .child {
    color: #333; // 親と同じ値で不要
  }
}

// ✅ 修正後
.parent {
  color: #333;
  .child {
    // colorは継承されるので指定不要
  }
}
```

### 2. 意味のないCSS指定チェック

#### 初期値と同じ指定
- [ ] `position: static;` - デフォルト値
- [ ] `float: none;` - デフォルト値
- [ ] `clear: none;` - デフォルト値
- [ ] `visibility: visible;` - デフォルト値
- [ ] `opacity: 1;` - デフォルト値
- [ ] `z-index: auto;` - デフォルト値
- [ ] `overflow: visible;` - デフォルト値
- [ ] `vertical-align: baseline;` - デフォルト値
- [ ] `font-weight: normal;`（400）- デフォルト値
- [ ] `font-style: normal;` - デフォルト値
- [ ] `text-decoration: none;`（リンク以外）- デフォルト値
- [ ] `background: transparent;` - デフォルト値
- [ ] `border: none;` - デフォルト値

#### 効果のない組み合わせ
- [ ] `display: inline;` + `width/height` - 効果なし
- [ ] `display: inline;` + `margin-top/bottom` - 効果なし
- [ ] `position: static;` + `top/right/bottom/left/z-index` - 効果なし
- [ ] `display: block;` + `vertical-align` - 効果なし
- [ ] `overflow: hidden;` + `text-overflow: ellipsis;`（white-space: nowrapなし）- 省略効果なし

#### 上書きされる指定
- [ ] ショートハンドで上書きされる個別指定
```scss
// ❌ 問題あり
.element {
  margin-top: 10px;
  margin: 20px; // 上の指定が無効になる
}
```

### 3. SP/PC間の重複チェック

#### 完全重複
- [ ] SP版とPC版で全く同じプロパティと値
- [ ] メディアクエリ内で共通スタイルと同じ指定

#### 例
```scss
// SP（ベース）
.card {
  padding: 16px;
  background: #fff;
 ...