bolder

概要

bolderスキルとは？

bolderは、平凡で無難すぎるUIデザインに視覚的なインパクトと個性を加えることに特化したスキルです。使いやすさを損なうことなく、より魅力的で記憶に残るユーザー体験をデザイナーやフロントエンドチームが作り出すのを支援します。特に、製品の見た目にもっとキャラクターやエネルギー、独自性を求められる場合に有効です。

誰がbolderを使うべき？

• ありきたりなデザインパターンから脱却したいUI/UXデザイナー
• Reactなどのフレームワークを使うフロントエンド開発者
• ブランド表現や視覚的な魅力を高めたいチーム
• 「デザインが無難すぎる」「個性が足りない」といったフィードバックを受けている方

解決できる課題

• 視覚的な単調さやありふれたレイアウトの排除
• インターフェースにドラマ性、コントラスト、階層構造を追加
• ブランドの個性やターゲットへの共感を明確化
• 使いやすさやアクセシビリティを尊重しつつ大胆に強調する指針

使い方

インストール手順

1. Agent Skills CLIを使ってbolderをインストールします：

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

2. 詳細なワークフローや準備手順はSKILL.mdファイルを確認してください。
3. 必要に応じてREADME.md、AGENTS.md、metadata.jsonなど関連ファイルも参照しましょう。

ワークフローガイド

必須の準備

• /frontend-designコマンドを呼び出してデザイン原則とコンテキスト収集プロトコルを利用します。
• デザインのコンテキストがない場合は、/teach-impeccableを実行して基礎知識を構築してください。

現状の評価

• 平凡さの原因を特定：一般的なフォントや色、控えめなスケール、低コントラスト、静的なビジュアル、予測可能なパターン、平坦な階層構造など。
• ブランドの個性、目的、ターゲット、制約を理解します。

強調の計画

• コンテキストや制約に基づき、どこまで大胆にできるかを判断。
• 色、タイポグラフィ、レイアウト、動き、階層など、強調する要素を選びます。

デザインの強調

• 視覚的なドラマ性や独自性を高めるための改善を適用。
• 使いやすさやアクセシビリティ基準を維持することを確認。

ファイル概要

• 手順はSKILL.mdから始めてください。
• 補助ファイルやフォルダには追加の参考資料やスクリプトがあります。

よくある質問

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

bolderは視覚的なインパクトや個性を求めるプロジェクトに最適です。金融ダッシュボードなど規制が厳しい、保守的なインターフェースにはブランドガイドラインが許す場合を除き適さないことがあります。

bolderはReactが必要ですか？

bolderはフロントエンドやReact向けにタグ付けされていますが、その原則はあらゆるUIデザインプロセスに適用可能です。他のフレームワークや静的サイトにも適応できます。

スキルのワークフローを事前に確認するには？

リポジトリのFilesタブでSKILL.mdや関連リソースを開くと、bolderを導入する前に全体像を把握できます。

デザインにコンテキストがない場合は？

必須の準備手順として、/frontend-designまたは/teach-impeccableを使ってコンテキストを収集してからbolderを適用してください。

参考資料はどこで見つかりますか？

リポジトリの補助フォルダに、bolderスキルを補完する追加のルール、リソース、スクリプトがあります。