mcpField
R
refactor-ui

refactor-ui

github.com/gnurioデザイン・UI453182 回インストール26 週間前に更新
リポジトリ

refactor-ui について

refactor-uiは、10項目のRefactoring UI原則に基づいて画面を監査するメタスキルです。指摘を集約して優先順位を付け、クイックスキャン、詳細分析、修正モードで評価します。

主な機能

  1. 0110項目の原則に沿ったUI監査
  2. 02重要度別の指摘整理
  3. 03重複排除と優先順位付け
  4. 04スキャン・分析・修正モード
  5. 05構造化された評価レポート

活用シーン

  1. 01マーケティングページの視覚的階層の確認
  2. 02ダッシュボードの色と影の分析
  3. 03優先順位付きの画面修正案の作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill refactor-ui

インストール後、Claude Code で/refactor-uiを入力して読み込まれたか確認します。

詳細

メタスキル：/refactor-ui

目的

10 個すべての Refactoring UI の原則に基づいて UI デザインを包括的に監査し、具体的な改善点を優先順位付きで生成します。

ワークフロー

フェーズ 1：スキルレジストリの読み込み
Read skills.json
Validate all 10 skills available
フェーズ 2：スキルを順番に適用

最適な順序で各スキルを実行します。

1. establish-visual-hierarchy
   ↓
2. apply-typography-scale
   ↓
3. build-color-palette
   ↓
4. apply-consistent-spacing
   ↓
5. design-button-hierarchy
   ↓
6. eliminate-visual-clutter
   ↓
7. design-empty-states
   ↓
8. use-shadows-appropriately
   ↓
9. manage-color-contrast
   ↓
10. group-related-elements
フェーズ 3：調査結果の統合

すべてのスキルの結果を集約します。

  • すべての FAIL 評価を収集します
  • 重要度（Critical | High | Medium | Low）で分類します
  • 重複（複数のスキルで検出された同じ問題）を削除します
  • 影響度に基づいて優先順位を付けます
フェーズ 4：レポートの生成

構造化された評価を出力します。

{
  "overall_score": "PASS | NEEDS_WORK | FAIL",
  "summary": "3 critical, 5 high, 2 medium priority fixes",
  "violations": [
    {
      "skill": "visual-hierarchy",
      "severity": "critical",
      "issue": "Primary CTA buried",
      "location": "Hero section",
      "fix": "Increase button to solid brand color, reduce surrounding contrast"
    }
  ],
  "priority_fixes": [
    "1. Make primary CTA prominent with brand color",
    "2. Consolidate font sizes from 12 to 6",
    "3. Add 8-10 grey shades to palette"
  ],
  "skill_breakdown": {
    "visual-hierarchy": { "status": "FAIL", "issues": 2 },
    "typography-scale": { "status": "PASS", "issues": 0 },
    "color-palette": { "status": "FAIL", "issues": 1 },
    ...
  }
}

実行モード

モード：クイックスキャン
  • 10 個すべてのスキルを実行します
  • FAIL のみを報告します
  • 所要時間：約 30 秒
モード：詳細分析
  • 10 個すべてのスキルを実行します
  • 根拠を添えて PASS を報告します
  • スキル間の相互参照を行います
  • レイアウトの改善案を提案します
  • 所要時間：約 2 分
モード：修正
  • 10 個すべてのスキルを実行します
  • 具体的な修正手順を生成します
  • 修正前／修正後のコード例を提示します
  • 所要時間：約 5 分

使用例

例 1：マーケティングページ
Input: Landing page description with hero, features, CTA

/refactor-ui
→ Overall: NEEDS_WORK
→ Critical: Visual hierarchy (CTA buried)
→ High: Typography (8 sizes, need 5)
→ Medium: Spacing (ambiguous grouping)
→ Priority fixes: [3 items]
例 2：ダッシュボード
Input: Analytics dashboard screenshot

/refactor-ui --deep
→ Overall: PASS with suggestions
→ Visual hierarchy: PASS (clear primary)
→ Color palette: FAIL (only 4 greys)
→ Shadows: FAIL (decorative on cards)
→ Suggestions: [5 items]

検証との統合

このメタスキルは NotebookLM に対して検証できます。

For each skill assessment:
  Query: "According to Refactoring UI, is this correct?"
  Validate assessment matches expert
Report agreement rate

参考資料

  • ../skills.json - スキルレジストリ
  • ../examples/ - すべてのスキルの修正前／修正後の例

コメント

Markdown 対応