ban-pattern

Category: Content & Multimedia | Uploader: tsubotax | Downloads: 0 | Version: v1.0（Latest）

Register AI-generated-looking UI patterns as prohibited rules in the design system. Use when user says \"AIっぽい\", \"AI臭い\", \"これ禁止\", \"このパターンやめたい\", \"ban this pattern\", \"add to prohibited\", or points out a generic/cookie-cutter UI element.

Changelog: Source: GitHub https://github.com/tsubotax/melta-ui

Directory Structure

Current level: skills/ban-pattern/

📄 SKILL.md 4.5 KB

SKILL.md

---
name: ban-pattern
description: "Register AI-generated-looking UI patterns as prohibited rules in the design system. Use when user says \"AIっぽい\", \"AI臭い\", \"これ禁止\", \"このパターンやめたい\", \"ban this pattern\", \"add to prohibited\", or points out a generic/cookie-cutter UI element."
user-invokable: true
args:
  - name: pattern
    description: 禁止したいパターンの説明（例：「カード上部のカラーバー」「左端のグラデーション」）
    required: false
---

AI生成UIに頻出する「それっぽい」装飾パターンを特定し、DS全体の禁止ルールとして登録する。

## 手順

### Step 1: パターンを特定する

ユーザーの説明（テキスト or スクリーンショット）から、禁止対象のパターンを特定する。

以下を明確にする:
- **何が問題か**: どの視覚要素がAI生成っぽいのか
- **該当する Tailwind クラス / CSS**: 具体的な実装パターン（例: `border-l-4`, `bg-gradient-to-r`）
- **代替パターン**: DS準拠の代わりの実装

不明点があれば AskUserQuestion で確認する。推測で進めない。

### Step 2: 既存ルールと重複がないか確認する

以下を読み込む:
- `foundations/prohibited.md` の「AI生成パターンの排除」セクション
- `CLAUDE.md` の禁止パターン要約テーブル

既に同じ or 類似のルールが存在する場合は、ユーザーに報告して既存ルールの更新で対応するか確認する。

### Step 3: 禁止ルールを登録する

以下の3箇所を更新する（順序厳守）:

#### 3-1. `foundations/prohibited.md` — SSOT（正規版）

「## AI生成パターンの排除」セクションのテーブルに行を追加する。

**セクションが存在しない場合**: `## コンポーネント` の直前に以下を挿入してからルールを追加する:
```markdown
## AI生成パターンの排除

> AI（LLM）がUIを生成する際に頻出する「それっぽい」装飾パターンを明示的に禁止する。

| 禁止 | 理由 | 代替 |
|------|------|------|
```

フォーマット:
```
| 禁止パターン（具体的な Tailwind クラス） | 理由（なぜAI生成っぽいか） | 代替（DS準拠の実装） |
```

#### 3-2. `CLAUDE.md` — 禁止パターン要約テーブル

禁止パターン要約テーブルに1行サマリーを追加する。
AI生成パターン関連の行は近くにまとめて配置する。

**テーブルが見つからない場合**: `## 禁止パターン要約` セクションを Grep で探す。見つからなければユーザーに報告して確認する。

#### 3-3. 関連コンポーネント md — 禁止事項

パターンが特定のコンポーネントに関連する場合、該当する `components/*.md` の禁止事項セクションにも追記する。

### Step 4: 既存サンプルを走査・修正する

`examples/` と `docs/` 配下のHTMLファイルを Grep で走査し、禁止パターンに該当する実装が既にないか確認する。

該当がある場合:
- 全箇所をリストアップしてユーザーに報告する
- ユーザーの承認後、DS準拠の代替パターンに修正する

該当がない場合:
- 「既存サンプルに該当なし」と報告する

### Step 5: 結果を報告する

以下のフォーマットで報告する:

```
## 禁止パターン登録完了

**パターン**: [禁止したパターンの説明]
**Tailwind クラス**: `[該当クラス]`
**代替**: `[DS準拠の代替]`

### 更新ファイル
- foundations/prohibited.md — AI生成パターンの排除セクションに追加
- CLAUDE.md — 禁止パターン要約に追加
- [components/xxx.md — 禁止事項に追加]（該当する場合）

### サンプル修正
- [修正した箇所のリスト or 「該当なし」]
```

## トラブルシューティング

| 問題 | 対処 |
|------|------|
| `foundations/prohibited.md` が存在しない | ユーザーに報告し、ファイル作成の承認を得る |
| 「AI生成パターンの排除」セクションが存在しない | Step 3-1 のテンプレートで自動作成する |
| 禁止パターンの Tailwind クラスが特定できない | AskUserQuestion でスクリーンショットや具体例を求める |
| 既存ルールと部分的に重複する | 既存ルールの拡張（行の更新）で対応するか、新規行として追加するかをユーザーに確認する |

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

ban-pattern

Directory Structure

SKILL.md

Report

Notice