quieter について
quieter は ui-craft のスキルで、階層とアクセシビリティを保ちながら、既存 UI の視覚効果や動きを抑えます。コードを直接編集し、レビュー表と更新した Craft Read で締めくくります。
主な機能
- 01レイアウトの変化を抑制
- 02動きの強度を低減
- 03文字サイズと影を縮小
- 04アクセント色と装飾を削減
- 05階層とアクセシビリティを維持
活用シーン
- 01実験的なページレイアウトを落ち着かせる
- 02UI の装飾的な動きを減らす
- 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 を読んでください。
階層を損なわずに振れ幅を抑えます。 落ち着きと退屈さは別物です。
次の順番で適用します(コードを直接編集してください):
- 更新した Craft Read を宣言します — 何を控えめにしたかを一行で記します。
- DESIGN_VARIANCE を 1〜2 下げます(下限は 2)。非対称な崩し方を簡素化し、実験的なレイアウトだった箇所は、より明確なグリッドのリズムに戻します。
- MOTION_INTENSITY を 1〜2 下げます(下限は 2)。スクロール時のリビールと段階的な表示を取り除き、ホバーとフォーカスのみを残します。
- 視覚的な重み — ディスプレイサイズを一段階縮小します(例:56→48px)。シャドウの深さをヘアライン程度、または環境光のみまで抑え、枠線付きのコンテナを減らします。
- 色 — アクセントの使用箇所を最低限の 3 か所に絞り、装飾的な色味をニュートラルにします。新しい色相は追加しません。
- 装飾的な動きを削除します — アイドルアニメーション、パララックス、役割のない浮遊要素を取り除きます。
維持するもの: 主要な階層、CTA のレベルを一つにすること、アクセシビリティ、意味を担う場合に限ったシグネチャーディテール(そうでない場合は簡素化します)。
重複する場合: 構造的な削減(セクション、コピー)には /distill のロジックも適用します。色の方針については /colorize を参照してください。
出力: コードを編集します。Review Format の表を出力します。最後に更新した Craft Read の行を記します。
次のステップ: /critique — 抑制によって階層が平坦になっていないことを確認します(rung 1)。
コメント
Markdown 対応