mcpField
Q
quieter

quieter

github.com/educlopezデザイン・UI407470 回インストール2 週間前に更新
リポジトリ

quieter について

quieter は ui-craft のスキルで、階層とアクセシビリティを保ちながら、既存 UI の視覚効果や動きを抑えます。コードを直接編集し、レビュー表と更新した Craft Read で締めくくります。

主な機能

  1. 01レイアウトの変化を抑制
  2. 02動きの強度を低減
  3. 03文字サイズと影を縮小
  4. 04アクセント色と装飾を削減
  5. 05階層とアクセシビリティを維持

活用シーン

  1. 01実験的なページレイアウトを落ち着かせる
  2. 02UI の装飾的な動きを減らす
  3. 03階層を保って視覚的な強さを抑える

インストール

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

$npx skills add https://github.com/educlopez/ui-craft --skill quieter

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

詳細

コンテキスト: このサブスキルは、より広範な ui-craft スキルの一つの視点です。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読み、Discovery + Anti-Slop + Craft Test を確認してから、以下の特定の視点を適用してください。

$ARGUMENTS の UI をより落ち着いたものにします。ui-craft スキルを読み込み、references/craft-intent.md を読んでください。

階層を損なわずに振れ幅を抑えます。 落ち着きと退屈さは別物です。

次の順番で適用します(コードを直接編集してください):

  1. 更新した Craft Read を宣言します — 何を控えめにしたかを一行で記します。
  2. DESIGN_VARIANCE を 1〜2 下げます(下限は 2)。非対称な崩し方を簡素化し、実験的なレイアウトだった箇所は、より明確なグリッドのリズムに戻します。
  3. MOTION_INTENSITY を 1〜2 下げます(下限は 2)。スクロール時のリビールと段階的な表示を取り除き、ホバーとフォーカスのみを残します。
  4. 視覚的な重み — ディスプレイサイズを一段階縮小します(例:56→48px)。シャドウの深さをヘアライン程度、または環境光のみまで抑え、枠線付きのコンテナを減らします。
  5. 色 — アクセントの使用箇所を最低限の 3 か所に絞り、装飾的な色味をニュートラルにします。新しい色相は追加しません。
  6. 装飾的な動きを削除します — アイドルアニメーション、パララックス、役割のない浮遊要素を取り除きます。

維持するもの: 主要な階層、CTA のレベルを一つにすること、アクセシビリティ、意味を担う場合に限ったシグネチャーディテール(そうでない場合は簡素化します)。

重複する場合: 構造的な削減(セクション、コピー)には /distill のロジックも適用します。色の方針については /colorize を参照してください。

出力: コードを編集します。Review Format の表を出力します。最後に更新した Craft Read の行を記します。

次のステップ: /critique — 抑制によって階層が平坦になっていないことを確認します(rung 1)。

コメント