デザイン&モーション · leonxlnx/taste-skill

minimalist-ui

クリーンなエディトリアルスタイルのインターフェース。温かみのあるモノクロパレット、タイポグラフィのコントラスト、フラットなbentoグリッド、落ち着いたパステルカラー。グラデーションや重いシャドウは不使用。

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author leonxlnxGitHub leonxlnx/taste-skill ↗Stars 85698License MIT(仓库根 LICENSE 文件;GitHub API spdx MIT;Copyright (c) 2026 Leonxlnx)Commit ccbc15639c
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

純粋なプロンプトプロトコルファイル(スクリプトなし、85行の単一ファイル)。『Premium Utilitarian Minimalism & Editorial UI』と名付けられ、暖色系モノクロ、エディトリアル階層、bento、ウルトラフラット、ミュートパステルという基本方針を冒頭で提示。

skills/minimalist-skill/SKILL.md
This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents.
基本方針でまず「何を求めるか」を厳格に定義し、後続の各セクションで「どう作るか」の具体的な仕様を示します。

ミニマリズムを損なうデフォルト値をすべて禁止するネガティブ制約リスト:Inter/Roboto、Lucide/Feather/Heroicons、Tailwindの重いシャドウ、広面積の有色背景、グラデーション/ネオン/3Dガラス、大きなコンテナの角丸カプセル、絵文字、プレースホルダー名、AI定型表現。

skills/minimalist-skill/SKILL.md
DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
禁止事項を具体的なライブラリ名やTailwindクラス名まで指定してモデルに明確な境界を提供。『beyond subtle navbar blurs』で限定的な例外のみを許可しています。

3系統のタイポグラフィシステム(UI sans / エディトリアル serif / 等幅 meta)に、フォントファミリー、字間、行高パラメータを個別に指定し、極端なフォントコントラストでエディトリアル感を創出。

skills/minimalist-skill/SKILL.md
Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`.
「タイポグラフィこそがUI」:ミニマルスタイルには装飾がないため、階層はフォントの個性とスケールのみに依存します。同一箇所の続きで tracking (-0.02em〜-0.04em) と line-height (1.1) のパラメータを指定。

数値で厳密に固定されたカラーパレット:暖色系モノクロ(ホワイト/ボーンホワイト/チャコール)+ 構造線 #EAEAEA + 4色のウォッシュパステルアクセント(それぞれ前景テキスト色付き)。色を希少リソースとしてセマンティクスのみに使用。

skills/minimalist-skill/SKILL.md
Canvas / Background: Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
「低彩度」といった曖昧な記述ではなくhex値を直接指定し、モデルの勝手な解釈を防止。同セクションでは構造線 #EAEAEA と4組のウォッシュパステルアクセント(前景テキスト色対応)も定義。

コンポーネント仕様を個別かつ厳格に定義:1px #EAEAEA ボーダー+角丸上限8/12pxのbentoカード、#111 塗りつぶし・角丸4-6px・シャドウなしのプライマリボタン、枠線なしアコーディオン、kbdキートップ、疑似macOSウィンドウ。

skills/minimalist-skill/SKILL.md
Cards must have exactly `border: 1px solid #EAEAEA`.
Section 5 Bento Box Feature Grids のサブ項目(同文脈内に角丸上限8/12px、内側余白24-40pxなどの仕様を含む)に該当し、「Notion/Linear感」をそのままコピー可能なアトミックスペックへと変換。

「見えない洗練」を追求したモーション:600msのフェードイン登場、カードの 0→2px 8px 超ソフトシャドウ遷移、スタッガーカスケード、低速の環境光ブロップ(不透明度≤0.04、任意)。すべて transform/opacity-only かつ IntersectionObserver に限定。

skills/minimalist-skill/SKILL.md
Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`.
ミニマリズム=モーションなしではない:作者は「静かだが確かに存在する」モーション構文を提供し、パフォーマンス規律を両立。

ホワイトスペース、幅の制約、タイポグラフィとパレット、ボーダー、登場モーション、視覚的奥行きを順次適用し、最終的に「手動調整不要」な成果物を求める7段階の実行プロトコル。

skills/minimalist-skill/SKILL.md
Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.
プロトコル末尾の自律性要件により、「結局手動での微調整が必要になる」という典型的な失敗パターンを未然に排除。

2コア機能

01エディトリアルミニマルデザイン言語の統括(暖色系モノクロ + 2種フォント対比 + bento + フラット)
02絶対的なネガティブ制約:デフォルトフォント/アイコンライブラリ/重いシャドウ/グラデーション/大型カプセルコンテナ/絵文字/AI定型句の全面禁止
03フォントファミリー・字間・行高パラメータを備えた3系統タイポグラフィシステム(sans/serif/mono)
04数値化された暖色系モノクロパレット + セマンティックなウォッシュパステル(各前景テキスト色付き)
05コンポーネントレベルの仕様:bento、塗りつぶしボタン、枠なしFAQ、kbd、疑似ウィンドウchrome
06静かなモーション構文:600ms登場/スタッガー/超ソフトシャドウ/低不透明度環境光、パフォーマンス規律の同期
07「空虚な平面を作らない」奥行きの補完:低不透明度背景画像/放射状グラデーション光/幾何学的ラインパターン

3外部依存関係

KindDependency / Endpoint
networkpicsum.photos(占位图服务)
packagePhosphor Icons / Radix UI Icons

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: スクリプト実行や外部への影響を伴わない、純粋なプロンプト指示およびルールテキスト
監査ノート: 純粋な指示型単一ファイルスキル:スクリプト実行、外部ネットワーク通信、認証情報の読み取り、スキル自体によるファイル書き込みは一切ありません。picsum.photos は生成コード内でのプレースホルダー画像URLの提案に過ぎず、スキル実行時の呼び出しではありません。アイコンやフォントも出力層の選定提案です。留意点はすべて対話・生成レイヤーに属し、コードレベルのリスクはありません。

5二重目の独立検証

  • [ok] 目录资产面(含隐藏/未跟踪文件) — git ls-files + ls -A 双查:该 skill 目录仅 1 个文件 SKILL.md,无 scripts/references/模板/数据/隐藏文件,无可执行代码。
  • [ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中(brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报,人工复核排除)。
  • [ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在,无 paraphrase 冒充。
  • [ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37(README 显示该提交为 docs/sponsor 修订 #102,2026-08-24);GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
  • [ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现,无脚本可调用、无越界承诺(详见本文件 how_it_works 引文)。
  • [ok] 『No gradients』vs Section 6/7 的 radial-gradient 是否自相矛盾 — 细读后判定为措辞张力而非矛盾:禁令对象是渐变填充/霓虹色带('DO NOT use gradients, neon colors, or 3D glassmorphism'),而 radial light spots 限 opacity 0.03、ambient blob 限 0.02-0.04 且须 pointer-events-none 固定层——属超低透明氛围例外,语义上不与『视觉渐变』冲突,但模型可能误读,建议页面标注此细微差别。
  • [ok] 『no heavy shadows』与 hover 阴影建议是否矛盾 — Section 2 禁的是 Tailwind 默认重阴影(shadow-md/lg/xl);Section 7 hover 用 0 2px 8px rgba(0,0,0,0.04) 超柔阴影——低透明度自洽,无矛盾。
  • [ok] bento 网格『flat』与 8/12px 圆角上限的执行一致性 — 正文对所有大容器统一 8/12px 上限并禁 rounded-full(Section 2),唯 tags/badges 用 9999px 药丸(Section 5 Tags),两级圆角策略明确无冲突。

6結論

  • 「ミニマルエディトリアル風」を厳密に数値化(hex/1pxボーダー/角丸上限/トラッキング範囲)し、モデルが指示通りに記述するだけでNotion/Linearの雰囲気を再現可能。
  • ネガティブリストもライブラリ名やクラス名レベルで具体化されており、判定コストが低く誤用リスクが極めて小さい。
  • 先進的なカラー規律:希少化 + セマンティック化 + 各アクセントへの前景色指定により、パステルの乱用による視認性低下を防止。
  • 「静かなモーション」とパフォーマンス規律(transform/opacity-only、scroll監視ではなくIOの利用)を両立し、質感とフレームレートを維持。
  • フレームワーク非依存(HTML/React/Tailwind/Vue)かつ単一ファイルでポータブル。導入や貼り付けのコストが最小限。
  • 最適な用途: 明確なエディトリアル/ワークスペースの質感を持つインターフェースに最適:SaaSドキュメントや設定画面、ノート/プロジェクト管理ツール(Notion/Linear風)、コンテンツサイト、ポートフォリオ、ダッシュボードの視覚実装。「余白、階層、静かな洗練」が求められるHTML/React/Tailwind/Vueにまたがる新規フロントエンドタスク向け。
    不向きな用途: 高彩度なブランドマーケティングページや、感情的な訴求を重視するゲーム/エンタメ系UIには不向き。インダストリアル・ブルータリズムや高級グラスモーフィズムには不向き(それぞれ industrial-brutalist-ui / high-end-visual-design を使用)。既存コードベースの段階的改修には不向き(redesign-existing-projects を使用)。過度な装飾イラストや派手なアニメーション演出が必要なシーンには不向き。
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload minimalist-ui.tar.gz
    sha256: 1878e24d26888079…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3cca18b368.