Communitygithub.com

felipebasurto/unslop-ui

AIによるインターフェースやグラフのコピーから不必要な装飾や説明を削除します。アイブロウラベル、01/02/03番号、冗長なサブタイトル、説明書きなど、人間が読む必要のないテキストをカットします。各保持文字列に /pstack:unslop を適用します。

unslop-ui とは?

Unslop UI は、Web ページ、アプリ画面、チャート、ダッシュボードの表示テキストや装飾的なUI要素から、AI生成特有の「スロップ(過剰・不要なもの)」を取り除くスキルです。「良いインターフェースは読まれるのではなく使われる」という原則に基づき、ユーザーが行動するために必要な単語だけを残し、それ以外を削除します。主に Claude Code 向けに設計されていますが、他のエージェントでも `python3 scripts/load_unslop.py` を実行してルールを適用できます。U1~U16 の詳細なルールに従い、アイブロウラベル、装飾番号、サブタイトル、説明過多、リークしたデザインノート、ステータス文字列、すべてにラベルを付ける習慣、バッジ、ステータスドット、装飾絵文字、チャートの過剰な装飾などをターゲットにします。変更は表示テキストと装飾要素のみに限定し、ロジックやデータ、色、スペーシング、レイアウト構造には触れません。アクセシビリティ属性は削除せず、削除前に必要であれば `aria-label` に移します。変更前後の差分をカウントするスクリプトも提供されています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/felipebasurto/unslop-ui/tree/main/skills/unslop-ui

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Unslop UI

Web ページ、アプリ画面、チャート、ダッシュボードの表示テキストや装飾的なクロームを編集し、AI が生成したように読めなくします。良いインターフェースは読まれるのではなく使われるものです。人が行動するために必要な単語だけを残し、それ以外を削除します。

対象: $ARGUMENTS(空の場合は、この会話で変更されたファイルを使用するか、尋ねてください)

/pstack:unslop からの記述ルール

保持するすべての文字列にこれらを適用します。番号で引用します。

!python3 ${CLAUDE_SKILL_DIR}/scripts/load_unslop.py

上の行が(Claude Code 以外のエージェントのため)コマンドの代わりにルールを表示している場合は、このスキルのフォルダから python3 scripts/load_unslop.py を実行し、出力された内容を適用します。

UI ルール

ID は固定です。レポートでは U1 から U16 として引用します。

インターフェースコピー

  • U1. アイブロウラベル。 見出しの上にある小さな大文字または文字間隔の空いたテキスト("PASSPORT"、"FEATURES"、"HOW IT WORKS")。削除します。見出しはすでにセクションの内容を示しています。
  • U2. 装飾番号。 "01 02 03"、"01 // Features"、"§"、"//" プレフィックス。順序が実際に存在し、ユーザーがそれに従う場合(チェックアウトのステップ、番号付きインストールガイド)を除き、削除します。
  • U3. サブタイトル反射。 すべての見出しの下にあるサブタイトル、または H1 の上の行。見出しにない事実を述べている場合にのみ 1 つ保持します。"Analytics / Understand your data better" は 2 行目を削除します。
  • U4. ボット説明。 要素が視覚的に何をするかを説明するキャプション、ヘルパーテキスト、説明("Click the button below to get started"、"This chart shows revenue over time")。削除します。見出しとキャプションは 5 単語以内に保ちます。例外: 空の状態、エラーメッセージ、破壊的操作の確認。これらは完全な文を使用してもかまいません。
  • U5. リークしたデザインノート。 画面の動作方法やその設計理由に関するテキスト、長い括弧書き、"(updates in real time)"、"(powered by AI)"。削除するか、ユーザーが本当に探すと思われる場合はツールチップに移動します。
  • U6. ステータス文字列。 "·" または "|" で連鎖された事実("12 items · Updated 2m ago · Synced · v2.1")。ユーザーが行動する 1 つの事実だけを保持します。その他は必要な場所に配置するか、削除します。
  • U7. すべてにラベルを付ける。 プレースホルダー、アイコン、ボタンテキスト、またはセクション見出しを繰り返すラベル。1 つの手がかりを選びます。虫眼鏡アイコンのある検索フィールドは、"Search" ラベルまたは "Search..." プレースホルダーのいずれか 1 つで十分です。
  • U8. スタッカートと空虚なスローガン。 "One. Big. Thing."、"Built different."、"Ship faster. Think less." 物とその機能を名付ける 1 文に書き換えるか、削除します。

装飾

  • U9. 実際の状態のないバッジとピル。 風味付けで追加された "LIVE"、"NEW"、"AI"、"Beta"、"Pro"、"🔥 Popular"。アプリが実際に追跡するデータを反映している場合(実際のストリームがライブである、最後の訪問以降にアイテムが実際に新しい)にのみバッジを保持します。
  • U10. ステータスドット。 テキストの横にあるパルスまたは色付きのドット(animate-pulse、小さい rounded-full ドット)。実際のライブステータスにバインドされている場合のみ保持します。
  • U11. 装飾絵文字とアイコン。 見出し、ボタン、KPI ラベル、リスト項目内。削除します。アイコンは、それがコントロールそのもの(aria-label 付きのアイコンボタン)であるか、テキストにない意味を伝える場合にのみ残します。

チャートとダッシュボード

  • U12. チャートタイプを名付けるチャートタイトル。 "Bar chart of monthly revenue" は "Monthly revenue" または発見事項("Revenue doubled since March")になります。
  • U13. 読み方の指示。 チャートの読み方を説明するサブタイトルやキャプション("Each bar represents one month"、"Hover for details")。削除します。
  • U14. 二重に言う。 各数量は 1 つのエンコーディングを取得します。すべて同じ値を示すバー、バー上の数値、その高さのグリッド線、軸の目盛りは 3 つ多すぎます。矢印+パーセント+「上昇」という単語+その下の文("Revenue grew 12% compared to last month")を持つ KPI は、テキストにおける同じ間違いです。読者が必要なエンコーディングを保持します。形状のための軸とグリッド線、重要な数値(多くの場合、最後の点または最大値のみ)のための印刷値。
  • U15. データと競合するチャートの足場。 プロット領域の周りのフレームボックス、暗いまたは密集したグリッド線、マイナー目盛り、太い軸境界線、3D、マーク上のドロップシャドウとグロー、プロットの背後にある背景塗りつぶし。削除するか、残さなければならないもの(いくつかのグリッド線、1 つのベースライン)を薄いグレーの極細線にします。データを最前面に、ラベルを次に、足場を最も薄くします。チャートを再設計しないでください。同じタイプ、同じデータ、同じ系列色。
  • U16. 直接ラベルが機能する場合の凡例。 読者が色と名前を一致させる必要がある凡例ボックス。名前を行の最後またはバーの隣に配置できる場合。系列に直接ラベルを付け、理想的には最新の値("This year 1,150")を付け、凡例を削除します。系列が 4 つを超える場合、またはマークが近すぎてラベル付けできない場合は、凡例を保持します。

before/after のペアについては、どこまで削除すべきかわからない場合は references/examples.md を参照してください。

ガードレール

  • 表示テキストと装飾要素のみを変更します。ロジック、データ、色、スペーシングトークン、レイアウト構造には触れません。唯一の例外は U15 の下のチャート足場で、細くしたり明るくしたりしてもかまいません。
  • 要素を削除するときは、空になったラッパーと、そのためだけに存在していたマージンやギャップも削除します。単一の子を保持するためにのみ存在していたラッパーも削除します。
  • アイコンボタンの aria-label、alt、title、またはスクリーンリーダー専用テキストは決して削除しないでください。削除した表示テキストが唯一のアクセシブルな名前だった場合は、それを aria-label に移動します。
  • データ、プロパティ、i18n ファイル、または CMS から取得したテキストは、そのソース(翻訳ファイル、フィクスチャ)で編集するか、報告してください。コンポーネント内でハードコードされた置換を行わないでください。
  • フラグが立てられたケースがその場所に値する場合(実際の状態、実際の順序、法律テキスト)、それを保持し、レポートで理由を述べてください。

手順

このチェックリストをコピーして追跡します。

- [ ] 1. カウント: python3 ${CLAUDE_SKILL_DIR}/scripts/count_tells.py <target>   (${CLAUDE_SKILL_DIR} はこのファイルのフォルダ)
- [ ] 2. すべての表示テキストと装飾要素を読み、各問題を U1-U16 または unslop ルール番号でタグ付けする
- [ ] 3. 編集
- [ ] 4. 同じコマンドで再度カウント
- [ ] 5. 報告

カウンターは正規表現ヒューリスティックです。候補を見つけ、before/after の数を提供します。U3、U4、U5、U7、U8、U12、U13、U14 は見逃します。これらは読み取りが必要です。U15 と U16 については、コード形式(シャドウ、太い軸境界線とグリッド線、凡例がオン)のみを認識します。また、正当なケースにフラグを立てることもあります。ステップ 2 での読み取りが実際のチェックです。

報告フォーマット:

ルールBeforeAfter
U1 アイブロウ60
unslop 13 全角ダッシュ40

次に、意図的に保持したものを 1 行ずつ理由とともにリストします。

関連スキル