quieter

概要

quieterスキルとは？

quieterは視覚的に刺激が強すぎる、または過剰なインターフェースを落ち着かせるUIデザインスキルです。過剰な色の彩度、コントラスト、アニメーションなどの強度を体系的に抑えつつ、デザインの効果と明快さを保ちます。UIがあまりに大胆すぎたり、派手すぎたり、圧倒的に感じられる場合に、より洗練され親しみやすい印象にしたいときに使います。

quieterを使うべき人

• 忙しく厳しいインターフェースを落ち着かせたいUIデザイナー
• デザインシステムを扱うフロントエンド開発者
• よりプロフェッショナルで気が散らないユーザー体験を目指すチーム

解決できる課題

• 過度に彩度が高い色や強いコントラストの要素
• 競合する大胆なビジュアルや過剰なアニメーション
• 視覚的な階層や洗練さの欠如
• 圧倒的、または未完成に感じるデザイン

使い方

インストール手順

1. プロジェクトにquieterスキルを追加：

   npx skills add https://github.com/pbakaus/impeccable --skill quieter
   

2. まずはメインドキュメントを確認：
   • 詳細なワークフローや準備手順はSKILL.mdを開いてください。
   • 追加の文脈が必要ならREADME.md、AGENTS.md、metadata.jsonも参照してください。

ワークフロー概要

1. 必須の準備：
   • /frontend-designを呼び出してデザインの文脈と原則を収集。
   • デザイン文脈がない場合は、まず/teach-impeccableを実行。
2. 現状の評価：
   • 視覚的強度の原因（色、コントラスト、アニメーション、複雑さ、スケール）を特定。
   • デザインの目的、対象、核心メッセージを理解。
   • 文脈が不明瞭な場合はAskUserQuestionツールで要件を明確化。
3. 計画と洗練：
   • 重要なメッセージや使いやすさを損なわずに強度を下げる計画を立てる。
   • quieterの推奨に従い、色、コントラスト、スケール、アニメーションを調整。
   • バランスと明快さを確認しながら繰り返し改善。

ベストプラクティス

• 変更前に必ずデザインの文脈を収集し明確にする。
• 効果的な要素は残しつつ、過剰刺激の原因だけを減らすことに注力。
• broaderなデザインシステムの洗練プロセスの一環としてquieterを活用。

よくある質問

どんなときにquieterスキルを使うべきですか？

UIが大胆すぎる、騒がしい、攻撃的、圧倒的と感じられる場合や、関係者からより落ち着いた洗練された見た目を求められたときに使います。

quieterはどんなフロントエンドフレームワークでも使えますか？

quieterはワークフローに依存せず、どんなフロントエンドスタックやデザインシステムにも適応可能です。コード固有の修正ではなくデザイン指針を提供します。

まずどのファイルを確認すればいいですか？

メインのワークフローはSKILL.mdから始めてください。補助スクリプトや参考資料はFilesタブで確認できます。

quieterはすべてのプロジェクトに適していますか？

視覚的な過剰刺激が問題となるプロジェクトに最適です。高エネルギーや注目を集めるビジュアルが必要な（例：マーケティングキャンペーン）場合は、選択的に使うことをおすすめします。

もっと詳しいガイダンスはどこで見つけられますか？

リポジトリのFilesタブでファイルツリー全体を探索し、ネストされた参照やデザイン洗練を支援するヘルパースクリプトを確認してください。