skill-visual-feedback

ホスト：Codex CLI — このスキルはClaude Code向けに設計され、Codex向けに調整されています。 相互参照するコマンドでは、/octo:* スラッシュコマンドではなく、Codexでインストール済みのスキル名を使用します。 アクティブなCodexシェルとサブエージェントツールを使用してください。現在のセッションで利用可能であることが確認できるまでは、プロバイダー、モデル、ホストのサブエージェントが利用可能だと断言しないでください。 ホストのツールに相当するものについては、skills/blocks/codex-host-adapter.md を参照してください。

ビジュアルフィードバックの処理

概要

画像ベースのUI/UXフィードバックを処理し、視覚的な問題を特定して修正するための体系的なアプローチです。

基本原則： 画像を分析 → 問題を特定 → コードを見つける → 体系的に修正 → 視覚的に検証

使用する場面

ユーザーが次のものを提供した場合に、このスキルを使用します：

• UI/UXの問題があるスクリーンショット
• 視覚的な問題の説明と「[Image]」という接頭辞
• 「UIがごちゃごちゃしている」または「UXがひどく散らかっている」という不満
• 視覚的な例を伴うボタンのスタイルやレイアウトの問題
• 画像を添えて「Xのように見えるはずなのに、Yのように表示される」という指摘

次の場合は使用しないでください：

• 視覚的な文脈を伴わない純粋なコードの問題
• UIモックアップを伴わない機能リクエスト
• パフォーマンスや機能上のバグ
• バックエンドの問題

プロセス

フェーズ1：視覚的な分析

ユーザーから画像によるフィードバックが提供された場合：

ステップ1：受け止めて確認する

I can see the screenshot showing [describe what you observe].

Let me analyze the visual issues:

**Observed Problems:**
1. [Issue 1: e.g., Button styles inconsistent]
2. [Issue 2: e.g., Layout misaligned]
3. [Issue 3: e.g., Colors don't match design system]

**Expected Behavior (from description):**
- [What user said it should be]

**Actual Behavior (from image):**
- [What the image shows]

ステップ2：問題を分類する

問題の種類	例
スタイル	色、フォント、余白、境界線
レイアウト	配置、位置、レスポンシブ動作
コンポーネント	不適切なコンポーネントの使用、コンポーネントの欠落
状態	ホバー状態、アクティブ状態、無効状態
一貫性	UI全体でパターンに一貫性がない

**Issue Categories:**
- Styling: [list specific styling issues]
- Layout: [list layout issues]
- Component: [list component issues]
- State: [list state-related issues]
- Consistency: [list inconsistency issues]

フェーズ2：コードの調査

ステップ1：該当するコンポーネントを特定する

# Search for component files related to the issue
# Example: For settings page issues

Globを使ってコンポーネントファイルを検索します：

**/*settings*.{tsx,jsx,ts,js,vue,svelte}
**/*button*.{tsx,jsx,ts,js,vue,svelte}

Grepを使って特定の要素を検索します：

# Search for className patterns
pattern: "className.*button|btn-"

# Search for style definitions
pattern: "style={{|styled\.|makeStyles"

ステップ2：スタイルシステムを特定する

**Styling Approach Detected:**
- [ ] CSS Modules
- [ ] Styled Components
- [ ] Tailwind CSS
- [ ] Emotion/styled
- [ ] Plain CSS
- [ ] CSS-in-JS (other)

**Design System:**
- [ ] Custom design system
- [ ] Material-UI
- [ ] Ant Design
- [ ] Chakra UI
- [ ] Other: [name]

ステップ3：影響を受けるファイルを読む

コンポーネントファイルと関連するスタイルを読み、現在の実装を把握します。

フェーズ3：根本原因の分析

ステップ1：問題が発生している理由を特定する

よくある根本原因：

根本原因	指標
一貫性のないスタイル	同じ要素に複数のスタイル設定方法がある
デザイントークンの欠落	色や余白がハードコードされている
コンポーネントバリアントの誤り	セカンダリを使うべき箇所でプライマリを使用している
状態が未処理	ホバー、アクティブ、無効状態のスタイルが欠落している
レスポンシブの問題	固定幅、ブレークポイントの欠落
オーバーライドの競合	詳細度の競合、!importantの過剰使用
非推奨のパターン	古いスタイル設定方法がまだ使われている

**Root Cause Analysis:**

Issue: [specific visual problem]
Root Cause: [why it's happening]
Evidence: [code snippet or pattern showing the cause]

Impact:
- Affects: [which pages/components]
- Frequency: [how often users see this]
- Scope: [single instance or systemic]

ステップ2：修正範囲を決める

**Fix Scope:**

Option 1: **Targeted Fix** (fix just this instance)
- Files to modify: [list]
- Risk: Low
- Coverage: Fixes reported issue only

Option 2: **Systematic Fix** (fix pattern everywhere)
- Files to modify: [list]
- Risk: Medium
- Coverage: Fixes all instances of this pattern

Option 3: **Design System Fix** (update base component)
- Files to modify: [design system files]
- Risk: Higher (affects many components)
- Coverage: Fixes root cause system-wide

**Recommendation:** [which option and why]

AskUserQuestionを使って、修正範囲に関するユーザーの希望を確認します。

フェーズ4：実装

ステップ1：修正計画を作成する

特定した問題ごとに：

**Fix Plan:**

Issue: [description]
File: [file path]
Change: [what to change]
Before: [code snippet or description]
After: [code snippet or description]

ステップ2：修正を実装する

Editツールを使い、修正を1つずつ適用します：

Fixing [Issue 1]...
- File: [path]
- Change: [description]
✓ Fixed

Fixing [Issue 2]...
- File: [path]
- Change: [description]
✓ Fixed

ステップ3：一貫性を確保する

「全体」または「すべての箇所」と指定されている場合：

# Search for all instances of the pattern
# Example: Find all primary buttons

Grepを使ってすべての該当箇所を検索し、それぞれを修正します：

**Pattern Search:** "button.*primary"

Found in:
1. src/components/Header.tsx:45
2. src/pages/Settings.tsx:123
3. src/pages/Dashboard.tsx:67

Fixing all instances...

各ファイルを体系的に修正します。

フェーズ5：検証

ステップ1：視覚的な検証チェックリスト

**Verification Checklist:**

Visual Issues:
- [ ] Button styles consistent
- [ ] Layout aligned properly
- [ ] Colors match design system
- [ ] Spacing is uniform
- [ ] Typography consistent

Responsive:
- [ ] Works on mobile
- [ ] Works on tablet
- [ ] Works on desktop

States:
- [ ] Default state correct
- [ ] Hover state correct
- [ ] Active state correct
- [ ] Disabled state correct
- [ ] Focus state accessible

**How to verify:**
1. Run dev server: `npm run dev`
2. Navigate to [affected page]
3. Check all items above
4. Compare with original screenshot

ステップ2：ユーザーに確認を求める

✅ **Fixes Applied**

Changes made:
1. [Change 1]
2. [Change 2]
3. [Change 3]

**Please verify:**
- Open [URL or page]
- Check that [specific issue] is now resolved
- Verify no new issues introduced

Let me know if the visual issues are resolved or if further adjustments are needed.

よくあるパターン

パターン1：ボタンのスタイルの一貫性

User: "[Image] these button styles need to be fixed everywhere"

Process:
1. Analyze image - identify button style issues
2. Search for all button components
3. Identify design system button component
4. Update base button component OR
5. Update all instances to use correct variant
6. Verify consistency across app

パターン2：レイアウトのずれ

User: "[Image] When logo position is set to Top right, it shows as Middle right"

Process:
1. Analyze image - see position mismatch
2. Find logo positioning code
3. Identify why "Top right" maps to "Middle right"
4. Fix the mapping or positioning logic
5. Test all position options
6. Verify with user

パターン3：設定UIの問題

User: "[Image] The /settings should be dropdowns not text inputs"

Process:
1. Analyze image - see text inputs instead of dropdowns
2. Navigate to settings component code
3. Identify field definitions
4. Replace input components with select/dropdown
5. Ensure options are populated correctly
6. Verify all settings fields

パターン4：「ごちゃごちゃしている」という全般的なフィードバック

User: "why is the Display Ad Creator UX still a hot mess?"

Process:
1. Ask for specific issues or screenshot
2. If provided, analyze systematically
3. Create prioritized list of issues
4. Fix highest-impact issues first
5. Verify improvements with user

他のスキルとの連携

skill-debugとの連携

Visual issue that doesn't make sense?
→ Use skill-debug to investigate why visual state is incorrect

skill-auditとの連携

User says "fix these everywhere"?
→ Use skill-audit to find all instances
→ Use skill-visual-feedback to fix each systematically

flow-tangleとの連携

Visual feedback requires new component?
→ Use flow-tangle to implement the component
→ Use skill-visual-feedback to verify it matches design

ベストプラクティス

1. 視覚的な証拠を必ず受け止める

良い例：

I can see in the screenshot that the button has inconsistent padding and the wrong color scheme compared to other primary buttons in the interface.

悪い例：

I'll fix the button.

2. 変更内容を具体的に伝える

良い例：

Changing:
- Button background: #3498db → #2563eb (primary-600)
- Padding: 8px 12px → 12px 16px
- Border radius: 4px → 6px

悪い例：

Updating button styles.

3. モバイル／レスポンシブを考慮する

修正が各ブレークポイントで機能するか、必ず確認します：

**Responsive Verification:**
- Mobile (< 768px): [status]
- Tablet (768px - 1024px): [status]
- Desktop (> 1024px): [status]

やってはいけないこと

操作	問題点
画像を分析せずに修正する	間違った箇所を修正する可能性があります
「すべての箇所」と言われているのに、1か所だけ変更する	修正が不完全です
スタイルを強制するために !important を使う	詳細度の問題が発生します
デザイントークンを使わずに色をハードコードする	システムとの一貫性が失われます
検証を省略する	ユーザーが同じ問題を再度報告することになります
確認せずに推測する	ユーザーの意図に合わない可能性があります

クイックリファレンス

ユーザーからのフィードバックのパターン	必要な対応
「[画像] X は Y であるべき」	画像を分析 → コードを見つける → 修正 → 検証
「ボタンのスタイルをすべての箇所で」	すべての箇所を見つける → 系統的に修正
「UI がひどい」	詳細を尋ねる → 優先順位を付ける → 段階的に修正
「X のとき、Z ではなく Y が表示される」	状態／ロジックをデバッグ → マッピングを修正 → すべてのケースをテスト

要点

Visual feedback → Image analysis + Systematic fix + Visual verification
Otherwise → Guessing at fixes + Incomplete coverage

問題を確認し、根本原因を理解し、すべての箇所を修正し、見た目を検証します。