bolder について
bolder は ui-craft のスキルで、レイアウト、動き、タイポグラフィ、アクセント、特徴的な要素を通じて UI の存在感を高めます。階層を保ち、動きを減らす設定にも配慮したコード編集を指示します。
主な機能
- 01レイアウトの変化を強化
- 02焦点に意図的な動きを追加
- 03見出しのタイポグラフィを強調
- 04単一のアクセントを強化
- 05特徴的な要素を追加または調整
活用シーン
- 01プロダクト画面の視覚的な個性を高める
- 02マーケティングページのヒーロー構成を強化
- 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 を読んでください。
これは振幅であり、装飾ではありません。 スロップを避けながら、エディトリアルな自信を高めてください。
次の順に適用してください(コードを直接編集):
- 更新した Craft Read を宣言する — 変更点(変化の幅、モーション、シグネチャ)を1行で示します。
- DESIGN_VARIANCE を +1〜2 引き上げる(上限は10)。プロダクト画面:非対称なオフセット、より強い指標の階層、またはシェル内のディスプレイ上の見せ場。マーケティング:より力強いヒーロー構成、セクションのリズムの変化、またはタイポグラフィのスケール。
references/craft-intent.mdの変化の幅の表に従ってください。 - 8未満の場合は、MOTION_INTENSITY を +1 引き上げる(上限は10)。焦点要素だけに、意図的な登場アニメーションまたはホバーの振り付けを1つ加えてください。
prefers-reduced-motionを尊重してください。 - タイポグラフィ — ディスプレイ用のウェイトまたはサイズを1段階引き上げ、見出しの字間を詰めます。数値には
tabular-numsを適用してください。 - アクセント — 焦点となるアクセントの配置を強めます(ビューポート予算の3〜5の範囲内)。主カードまたは CTA に色味を加えます。アクセントの色相を2つ目に増やしてはいけません。
- シグネチャ — まだない、または弱い場合は、唯一のシグネチャ上の賭けを加えるか強めます(craft-intent §3 を参照)。
追加禁止: 紫からシアンへのグラデーション、バウンスイージング、グラスモーフィズムの多層化、絵文字、すべて大文字の見出し、同じ大きさのアイコンカードが3つ並ぶグリッド、紙吹雪。
ノブのゲーティング: すでに variance ≥9 または MOTION ≥9 の場合は、さらに引き上げず、シグネチャとタイポグラフィを強めてください。
出力: コードを編集します。Review Format の表を出力します。最後に更新した Craft Read の行を記載します。
次のステップ: /critique — 加えた個性によって階層が損なわれたり、スロップになったりしていないことを確認してください(段階1)。