mcpField
B
bolder

bolder

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

bolder について

bolder は ui-craft のスキルで、レイアウト、動き、タイポグラフィ、アクセント、特徴的な要素を通じて UI の存在感を高めます。階層を保ち、動きを減らす設定にも配慮したコード編集を指示します。

主な機能

  1. 01レイアウトの変化を強化
  2. 02焦点に意図的な動きを追加
  3. 03見出しのタイポグラフィを強調
  4. 04単一のアクセントを強化
  5. 05特徴的な要素を追加または調整

活用シーン

  1. 01プロダクト画面の視覚的な個性を高める
  2. 02マーケティングページのヒーロー構成を強化
  3. 03焦点要素に意図的な動きを加える

インストール

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

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

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

詳細

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

$ARGUMENTS の UI をより大胆にしてください。ui-craft スキルを読み込み、references/craft-intent.md を読んでください。

これは振幅であり、装飾ではありません。 スロップを避けながら、エディトリアルな自信を高めてください。

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

  1. 更新した Craft Read を宣言する — 変更点(変化の幅、モーション、シグネチャ)を1行で示します。
  2. DESIGN_VARIANCE を +1〜2 引き上げる(上限は10)。プロダクト画面:非対称なオフセット、より強い指標の階層、またはシェル内のディスプレイ上の見せ場。マーケティング:より力強いヒーロー構成、セクションのリズムの変化、またはタイポグラフィのスケール。references/craft-intent.md の変化の幅の表に従ってください。
  3. 8未満の場合は、MOTION_INTENSITY を +1 引き上げる(上限は10)。焦点要素だけに、意図的な登場アニメーションまたはホバーの振り付けを1つ加えてください。prefers-reduced-motion を尊重してください。
  4. タイポグラフィ — ディスプレイ用のウェイトまたはサイズを1段階引き上げ、見出しの字間を詰めます。数値には tabular-nums を適用してください。
  5. アクセント — 焦点となるアクセントの配置を強めます(ビューポート予算の3〜5の範囲内)。主カードまたは CTA に色味を加えます。アクセントの色相を2つ目に増やしてはいけません。
  6. シグネチャ — まだない、または弱い場合は、唯一のシグネチャ上の賭けを加えるか強めます(craft-intent §3 を参照)。

追加禁止: 紫からシアンへのグラデーション、バウンスイージング、グラスモーフィズムの多層化、絵文字、すべて大文字の見出し、同じ大きさのアイコンカードが3つ並ぶグリッド、紙吹雪。

ノブのゲーティング: すでに variance ≥9 または MOTION ≥9 の場合は、さらに引き上げず、シグネチャとタイポグラフィを強めてください。

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

次のステップ: /critique — 加えた個性によって階層が損なわれたり、スロップになったりしていないことを確認してください(段階1)。

コメント