mcpField
M
minimalist-ui

minimalist-ui

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

minimalist-ui について

暖色のモノクロームに控えめなパステルを添えた、エディトリアルなWeb UI向けのスキルです。書体、レイアウト、コンポーネント、動き、コンテンツの指針とWiki草案の手順を定めます。

主な機能

  1. 01暖色モノクロームと淡いパステル
  2. 02エディトリアルな書体と広い余白
  3. 03非対称のBentoグリッドカード
  4. 04コンポーネントとアイコンの詳細規則
  5. 05控えめな動きと性能制約
  6. 06Wiki草案と索引への記録

活用シーン

  1. 01ドキュメント風ワークスペースUIの設計
  2. 02エディトリアルなランディングページの作成
  3. 03書体、配色、動きのルール統一

インストール

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

$npx skills add https://github.com/rheinmir/setup --skill minimalist-ui

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

詳細

[[design-foundation]] を土台にします — hallmark の 6 つの規律と slop-test は共通の土台（交渉不可）です。このスキルはその上に flavour を加えるものであり、土台を置き換えるものではありません。

プロトコル：プレミアムな実用的ミニマリズム UI アーキテクト

1. プロトコルの概要

名前：プレミアムな実用的ミニマリズムとエディトリアル UI 説明：トップクラスのワークスペースプラットフォームに類似した、洗練された超ミニマルな「ドキュメントスタイル」のウェブインターフェースを生成するための、高度なフロントエンドエンジニアリング指針です。このプロトコルでは、コントラストの高い暖色系モノクロパレット、独自のタイポグラフィ階層、緻密に構成された大きな余白、ベントーグリッドレイアウト、そして意図的に彩度を抑えたパステルアクセントを用いる極めてフラットなコンポーネントアーキテクチャを厳格に適用します。一般的な SaaS デザインのトレンドは積極的に排除します。

2. 絶対的な禁止事項（禁止要素）

AI は、次のような一般的なウェブ開発の既定パターンを厳格に避ける必要があります。

  • 「Inter」「Roboto」「Open Sans」の書体は使用しないでください。
  • 「Lucide」「Feather」や標準の「Heroicons」のような、汎用的で線の細いアイコンライブラリは使用しないでください。
  • Tailwind の既定の強いドロップシャドウ（例：shadow-md、shadow-lg、shadow-xl）は使用しないでください。シャドウは実質的に存在しないか、非常に拡散し、不透明度が低くなるように大幅にカスタマイズする必要があります（< 0.05）。
  • 大きな要素やセクションに原色の背景は使用しないでください（例：明るい青、緑、赤のヒーローセクションは不可）。
  • グラデーション、ネオンカラー、3D グラスモーフィズムは使用しないでください（控えめなナビゲーションバーのぼかしを除く）。
  • 大きなコンテナ、カード、主要ボタンに rounded-full（ピル形状）は使用しないでください。
  • コード、マークアップ、テキストコンテンツ、見出し、代替テキストのどこにも絵文字を使用しないでください。適切なアイコンまたはシンプルな SVG プリミティブに置き換えてください。
  • 「John Doe」「Acme Corp」「Lorem Ipsum」のような汎用のプレースホルダー名は使用しないでください。現実的で文脈に合ったコンテンツを使用してください。
  • AI コピーライティングの決まり文句である「Elevate」「Seamless」「Unleash」「Next-Gen」「Game-changer」「Delve」は使用しないでください。平易で具体的な言葉を使ってください。

3. タイポグラフィの設計

エディトリアルな印象を生み出すため、インターフェースには極端なタイポグラフィのコントラストと、上質なフォントの選定が必要です。

  • プライマリーサンセリフ（本文、UI、ボタン）：個性のある、すっきりした幾何学的なフォントまたはシステム標準フォントを使用してください。推奨：font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif。
  • エディトリアルセリフ（ヒーロー見出しと引用）：推奨：font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif。文字間隔を詰め（letter-spacing: -0.02em～-0.04em）、行の高さを小さくしてください（1.1）。
  • 等幅（コード、キー入力、メタデータ）：推奨：font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace。
  • テキストカラー：本文の色に真っ黒（#000000）は使用しないでください。読みやすさを確保するため、オフブラックまたはチャコール（#111111 または #2F3437）を使用し、ゆとりのある line-height（1.6）を設定してください。セカンダリテキストには彩度を抑えたグレー（#787774）を使用してください。

4. カラーパレット（暖色系モノクロ＋アクセントパステル）

色は貴重なリソースです。意味を伝える場合、または控えめなアクセントに限って使用してください。

  • キャンバス／背景：ピュアホワイト #FFFFFF またはウォームボーン／オフホワイト #F7F6F3／#FBFBFA。
  • プライマリーサーフェス（カード）：#FFFFFF または #F9F9F8。
  • 構造上の境界線／区切り線：非常に薄いグレー #EAEAEA または rgba(0,0,0,0.06)。
  • アクセントカラー：タグ、インラインコードの背景、控えめなアイコン背景に限り、彩度を大幅に抑えた淡いパステルカラーのみを使用してください。
    • 淡い赤：#FDEBEC（テキスト：#9F2F2D）
    • 淡い青：#E1F3FE（テキスト：#1F6C9F）
    • 淡い緑：#EDF3EC（テキスト：#346538）
    • 淡い黄：#FBF3DB（テキスト：#956400）

5. コンポーネント仕様

  • Bento Box の機能グリッド：
    • 非対称の CSS Grid レイアウトを使用します。
    • カードのスタイルは、厳密に border: 1px solid #EAEAEA とします。
    • 角丸はすっきりとした印象にし、最大でも 8px または 12px とします。
    • 内側の余白はゆったりと取ります（例：24px～40px）。
  • プライマリーコールトゥアクション（ボタン）：
    • 背景色は #111111、テキスト色は #FFFFFF とします。
    • 角丸は控えめにします（4px～6px）。ボックスシャドウは使用しません。
    • ホバー時は、色を #333333 にわずかに変化させるか、transform: scale(0.98) でごくわずかに縮小します。
  • タグとステータスバッジ：
    • ピル型（border-radius: 9999px）にし、ごく小さな文字（text-xs）を使用します。大文字で、文字間隔を広く取ります（letter-spacing: 0.05em）。
    • 背景には、定義済みのミュートパステルカラーを使用します。
  • アコーディオン（FAQ）：
    • コンテナのボックス装飾はすべて取り除きます。項目間は border-bottom: 1px solid #EAEAEA のみで区切ります。
    • 開閉状態を示すアイコンには、すっきりとしたシャープな + と - を使用します。
  • キーストロークのマイクロ UI：
    • ショートカットは物理キーのように <kbd> タグで表示します。border: 1px solid #EAEAEA、border-radius: 4px、background: #F7F6F3 を指定し、等幅フォントを使用します。
  • 偽 OS ウィンドウのクローム：
    • ソフトウェアのモックアップは、上部に小さな薄いグレーの丸を3つ並べた白いバーがある、ミニマルなコンテナで囲みます（macOS のウィンドウコントロールを再現します）。

6. アイコンと画像に関する指針

  • システムアイコン：技術的で、やや太めの線のスタイルにするため、「Phosphor Icons（Bold または Fill のウェイト）」または「Radix UI Icons」を使用します。すべてのアイコンで線幅を統一します。
  • イラスト：白い背景に、くすんだパステルカラーで塗りつぶした、わずかにずらした幾何学形状を1つ配した、単色の粗い連続線のインクスケッチにします。
  • 写真：高品質で彩度を抑え、温かみのあるトーンの画像を使用します。控えめなオーバーレイ（温かみのある粒子を opacity: 0.04 で適用）を重ね、写真をモノクロの配色になじませます。彩度の高すぎるストック写真は使用しません。実際の素材がない場合は、https://picsum.photos/seed/{context}/1200/800 のような信頼できるプレースホルダーを使用します。
  • ヒーローとセクションの背景：セクションが空虚で平坦な印象にならないようにします。クリーンな美しさを損なわずに奥行きを加えるため、幅いっぱいに広がる低不透明度の背景画像、柔らかな放射状の光（温かみのあるトーンを使った radial-gradient を opacity: 0.03 で適用）、または最小限の幾何学的な線模様を使用します。

7. 控えめな動きとマイクロアニメーション

動きは目立たないようにします。存在感はありつつ、決して気を散らさないことが大切です。目指すのは、派手さではなく、静かな洗練です。

  • スクロール時の表示：要素がビューポートに入ると、穏やかにフェードインさせます。translateY(12px) と opacity: 0 から、cubic-bezier(0.16, 1, 0.3, 1) を使って 600ms かけて表示します。IntersectionObserver を使用し、window.addEventListener('scroll') は使用しません。
  • ホバー状態：カードには、ごく控えめなシャドウの変化を加えます（box-shadow を 0 0 0 から 0 2px 8px rgba(0,0,0,0.04) へ 200ms で変化させます）。ボタンは :active 時に scale(0.98) で反応させます。
  • 時差をつけた表示：リストやグリッドの項目は、段階的な遅延を付けて表示します（animation-delay: calc(var(--index) * 80ms)）。すべてを一度に表示してはいけません。
  • 背景の環境的な動き：任意です。ヒーローセクションの背後に、非常にゆっくり動く放射状グラデーションのぼかしを1つ配置します（animation-duration: 20s+、opacity: 0.02-0.04）。position: fixed; pointer-events: none のレイヤーに適用します。スクロールするコンテナには適用しません。
  • パフォーマンス：アニメーションには transform と opacity のみを使用します。レイアウトを再計算させるプロパティ（top、left、width、height）は使用しません。will-change: transform は控えめに使用し、アニメーション中の要素にのみ適用します。

8. 実行プロトコル

フロントエンドのコード（HTML、React、Tailwind、Vue）の作成、またはレイアウトのデザインを依頼された場合：

  1. まず、全体の余白を確保します。セクション間には大きな垂直方向のパディングを設けます（例：Tailwind の py-24 や py-32）。
  2. 主要なタイポグラフィのコンテンツ幅を max-w-4xl または max-w-5xl に制限します。
  3. 独自のタイポグラフィ階層とモノクロの色変数をすぐに適用します。
  4. すべてのカード、区切り線、ボーダーが 1px solid #EAEAEA のルールに厳密に従っていることを確認します。
  5. すべての主要なコンテンツブロックに、スクロール時に表示されるアニメーションを追加します。
  6. 画像、アンビエントグラデーション、または控えめなテクスチャを用いてセクションに視覚的な奥行きを持たせます。何もない単調な背景は避けてください。
  7. 手動で調整しなくても、この洗練された、すっきりとしたエディトリアルな美しさが自然に表れるコードを提供します。

出力レポート

主要なスキルタスクがすべて完了したら、Wiki に提案ドラフトを作成します。

手順

1. ファイル名を作成します：

  • 形式：DDMMYY-<ten>.md
  • DDMMYY = 今日の日付（例：2026 年 6 月 2 日の場合は 020626）
  • <ten> = 実施内容を要約する 2～4 語の kebab-case 表記（例：landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. llmwiki/wiki/draft/uiux/DDMMYY-<ten>.md を作成します：

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/draft/uiux/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. Wiki のインデックスとログを更新します：

  • llmwiki/wiki/index.md — 1 行追加します：| [DDMMYY-<ten>](draft/uiux/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
  • llmwiki/wiki/log.md — 追記します：## YYYY-MM-DD — <skill-name> — <ten>

スキルによって成果物も判断事項も生じない場合に限り、スキップします（例：/caveman-stats のような表示のみのモード）。

コメント

Markdown 対応