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 での読み取りが実際のチェックです。
報告フォーマット:
| ルール | Before | After |
|---|---|---|
| U1 アイブロウ | 6 | 0 |
| unslop 13 全角ダッシュ | 4 | 0 |
次に、意図的に保持したものを 1 行ずつ理由とともにリストします。