apply-mantel-styles

Name: apply-mantel-styles
Author: sammcj

github.com/sammcjデザイン・UI167106 回インストール1 日前に更新

リポジトリ

apply-mantel-styles について

apply-mantel-stylesは、図表やフロントエンドコンポーネントにMantelのブランドルールを適用するデザインスキルです。カラートークン、コンポーネントのスタイル、タイポグラフィ、ロゴの使い方を定めています。

主な機能

01Mantelのパレットとカラースケールの使用
02セマンティックなステータスカラーの適用
03ボタン、ナビゲーション、フォームのスタイル設定
04タイポグラフィとロゴのルール遵守
05CSS変数とTailwindカラーの利用

活用シーン

01図表をMantelのブランドに合わせる
02フロントエンドコンポーネントのスタイル統一
03ステータスメッセージやチャートの色選び
04明暗の背景に応じたロゴバリエーションの選択

インストール

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

$npx skills add https://github.com/sammcj/agentic-coding --skill apply-mantel-styles

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/

Mantel_Icon__Navy.svg

Mantel_Icon__Negative.svg

Mantel_Icon__Positive.svg

Mantel_Icon__White.svg

Mantel_Logo__Navy.svg

Mantel_Logo__Negative.svg

Mantel_Logo__Positive.svg

Mantel_Logo__White.svg

resources/

diagrams.md

詳細

Mantel ブランドスタイルの適用ルール

図やフロントエンドコンポーネントを作成する際は、Mantel のブランドアイデンティティとの一貫性を保つために、以下のスタイルガイドラインを適用できます。

カラースキーム

Mantel ブランドパレットの以下のプライマリカラーを使用することをおすすめします。
必要に応じて、これらの色のティントやシェードを使用してもかまいませんが、ブランドカラー以外の色は使用しないでください。

パレット

名前	Hex	RGB
Ocean	`#1E5E82`	rgb(30, 94, 130)
Flamingo	`#D86E89`	rgb(216, 110, 137)
Deep Ocean	`#002A41`	rgb(0, 42, 65)
Sky Blue	`#81CCEA`	rgb(129, 204, 234)
Cloud	`#EEF9FD`	rgb(238, 249, 253)

拡張パレット — ブランドランプ（最も明るい 50 → 最も暗い 900）

ブランドカラー以外の色を導入せずに、ティント、シェード、ホバー状態、ボーダー、サーフェスにこれらのトークンを使用してください。各ブランドカラーのコアステップ（太字）を優先し、コントラストの調整が必要な場合は隣接するステップを使用してください。

Ocean — コア 500

 50  #E8F2F8      500  #1E5E82   ← core
100  #C5DCEA      600  #174E6E
200  #9DC3D8      700  #103D57
300  #6AA5C3      800  #0A2D40
400  #3D89AF      900  #042031

Flamingo — コア 500

 50  #FAEEF2      500  #D86E89   ← core
100  #F4D1DA      600  #C25079
200  #EDB0BE      700  #9E3456
300  #E690A2      800  #7A1E3D
400  #DE7F92      900  #550E28

Sky — コア 400（Sky のブランドアンカーは 500 ではなく 400 にあります）

 50  #F0FAFD      400  #81CCEA   ← core
100  #D9F1F9      500  #59BAE2
200  #B8E5F5      600  #329DD3
300  #95D6EF      700  #1B7EAD
                  800  #0E5F85
                  900  #064260

Neutral — 明るいサーフェス上のテキスト、ボーダー、区切り線用のグレー

 50  #F5F7F9      500  #8A99AB
100  #DDE3EA      600  #5C6A7A
200  #C5CED9      700  #3E4F5E
300  #A8B5C4      800  #293C49
400  #B2BECC      900  #161C21

アンカートークン（固定、ランプ外）

トークン	Hex	用途
Deep Ocean	`#002A41`	プライマリの暗い背景
Cloud	`#EEF9FD`	プライマリの明るい背景／ニュートラルな背景
Skywalker 950	`#001421`	ほぼ黒の暗いサーフェス
Skywalker 900	`#001E2F`	最も暗いセクション
Skywalker 800	`#042D44`	暗いサーフェス 2
Skywalker 700	`#073B58`	暗いサーフェス 3
Skywalker 600	`#0C4F74`	暗いサーフェス 4（最も明るい暗色）

セマンティックなステータスカラー

成功／警告／エラー／注意の状態には、以下の色を使用してください。ブランドカラーで代用しないでください。エラーに Flamingo を多用すると、ユーザーが頼りにしているセマンティックな意味が損なわれます。

トークン	Hex	用途
Yoda 600	`#07883D`	成功／肯定
BB8 600	`#E87400`	警告
Kylo 600	`#D91544`	エラー／危険
Pyre 300	`#FFD60A`	ハイライト／注意

一般的なデザイン原則

カラーの階層

プライマリアクション／要素：Ocean (#1E5E82)
セカンダリ／補助：Sky Blue (#81CCEA)
強調／アクセント：Flamingo (#D86E89)
基盤／権威：Deep Ocean (#002A41)
背景／ニュートラル：Cloud (#EEF9FD)

明るい背景には Cloud（#EEF9FD）または白（#FFFFFF）を使用します。
暗い背景には Deep Ocean（#002A41）を使用します。純粋な黒（#000000）は使用しないでください。
プライマリテキストには、明るい背景では Deep Ocean を、暗い背景では白を使用します。
アクセント要素（ボーダー、アイコン、ハイライト）には、Ocean、Flamingo、または Sky Blue を使用します。

セマンティックな使い方

プライマリアクション、メインナビゲーション、ブランドレベルの強調には Ocean を使用します
インタラクティブ要素、情報、セカンダリアクションには Sky Blue を使用します
CTA やブランドのハイライトには Flamingo を控えめに使用します（エラーには使用せず、Kylo を使用します）
テキスト、ボーダー、権威を示す要素には Deep Ocean を使用します
背景、控えめな区切り線、非アクティブ状態には Cloud を使用します
成功／警告／エラー／注意にはセマンティックなステータスカラー（Yoda／BB8／Kylo／Pyre）を使用し、これらの代わりにブランドカラーを使用しないでください
既定では、明るい／デイモードのカラースキームを使用します

一貫性のルール

他のブランドのカラースキームを混在させないでください
プロジェクト内のすべての図で、色の意味を一貫させてください
透明度が必要な場合は、ブランドカラーの rgba 値を使用します
ホバー／押下状態には、ブランドランプ上で 1 段階移動した色を使用します（例：ホバー時は ocean-500 → ocean-600、押下時は flamingo-500 → flamingo-600）。適切なランプトークンがない場合に限り、パーセンテージによる暗色化／明色化を使用してください

フロントエンドコンポーネントのスタイル

コンポーネントのガイドライン

ボタン

プライマリ：

背景：Ocean (#1E5E82)
テキスト：Cloud (#EEF9FD)
ホバー：Deep Ocean (#002A41)
境界線：なし、またはOcean

セカンダリ：

背景：Sky Blue (#81CCEA)
テキスト：Deep Ocean (#002A41)
ホバー：Ocean (#1E5E82)、テキストはCloud
境界線：Ocean (#1E5E82)

アクセント／CTA：

背景：Flamingo 500 (#D86E89)
テキスト：White (#FFFFFF)
ホバー：Flamingo 600 (#C25079)
境界線：なし

ゴースト／アウトライン：

背景：透明
テキスト：Ocean (#1E5E82)
ホバー：背景はCloud (#EEF9FD)
境界線：Ocean (#1E5E82)

フォーム

入力フィールド：

背景：White (#FFFFFF)
境界線：Sky Blue (#81CCEA)
フォーカス時の境界線：Ocean (#1E5E82)
テキスト：Deep Ocean (#002A41)
プレースホルダー：Sky Blue (#81CCEA)
エラー時の境界線：Kylo 600 (#D91544)

ラベル：

色：Ocean (#1E5E82)
必須項目の表示：Flamingo (#D86E89)

カードとサーフェス

標準カード：

背景：White (#FFFFFF)
境界線：Cloud (#EEF9FD)
影：rgba(0, 42, 65, 0.1)

強調カード：

背景：Cloud (#EEF9FD)
境界線：Sky Blue (#81CCEA)
影：rgba(30, 94, 130, 0.15)

アラートとメッセージ

意味に応じたステータスカラーを使用してください。エラーや警告にFlamingoを、成功にOceanを多用しないでください。

エラー：

背景：Kylo 600 (#D91544)、不透明度10%
境界線：Kylo 600 (#D91544)
テキスト：Deep Ocean (#002A41)
アイコン：Kylo 600 (#D91544)

警告：

背景：BB8 600 (#E87400)、不透明度10%
境界線：BB8 600 (#E87400)
テキスト：Deep Ocean (#002A41)
アイコン：BB8 600 (#E87400)

成功：

背景：Yoda 600 (#07883D)、不透明度10%
境界線：Yoda 600 (#07883D)
テキスト：Deep Ocean (#002A41)
アイコン：Yoda 600 (#07883D)

情報：

背景：Sky Blue (#81CCEA)、不透明度10%
境界線：Sky Blue (#81CCEA)
テキスト：Deep Ocean (#002A41)
アイコン：Sky Blue (#81CCEA)

データ可視化（グラフ）

プライマリ系列：Ocean (#1E5E82)
セカンダリ系列：Sky Blue (#81CCEA)
ターシャリ系列：Deep Ocean (#002A41)
ハイライト／アクセント：Flamingo (#D86E89)
背景：Cloud (#EEF9FD)
グリッド線：Sky Blue (#81CCEA)、不透明度20%
テキスト：Deep Ocean (#002A41)

CSS 変数

:root {
   /* Core brand (anchor steps) */
   --brand-ocean: #1E5E82;        /* ocean-500 */
   --brand-flamingo: #D86E89;     /* flamingo-500 */
   --brand-sky-blue: #81CCEA;     /* sky-400 */
   --brand-deep-ocean: #002A41;
   --brand-cloud: #EEF9FD;

   /* Ocean ramp */
   --ocean-50:  #E8F2F8; --ocean-100: #C5DCEA; --ocean-200: #9DC3D8;
   --ocean-300: #6AA5C3; --ocean-400: #3D89AF; --ocean-500: #1E5E82;
   --ocean-600: #174E6E; --ocean-700: #103D57; --ocean-800: #0A2D40;
   --ocean-900: #042031;

   /* Flamingo ramp */
   --flamingo-50:  #FAEEF2; --flamingo-100: #F4D1DA; --flamingo-200: #EDB0BE;
   --flamingo-300: #E690A2; --flamingo-400: #DE7F92; --flamingo-500: #D86E89;
   --flamingo-600: #C25079; --flamingo-700: #9E3456; --flamingo-800: #7A1E3D;
   --flamingo-900: #550E28;

   /* Sky ramp */
   --sky-50:  #F0FAFD; --sky-100: #D9F1F9; --sky-200: #B8E5F5;
   --sky-300: #95D6EF; --sky-400: #81CCEA; --sky-500: #59BAE2;
   --sky-600: #329DD3; --sky-700: #1B7EAD; --sky-800: #0E5F85;
   --sky-900: #064260;

   /* Neutral greys */
   --neutral-50:  #F5F7F9; --neutral-100: #DDE3EA; --neutral-200: #C5CED9;
   --neutral-300: #A8B5C4; --neutral-400: #B2BECC; --neutral-500: #8A99AB;
   --neutral-600: #5C6A7A; --neutral-700: #3E4F5E; --neutral-800: #293C49;
   --neutral-900: #161C21;

   /* Dark surfaces */
   --skywalker-950: #001421; --skywalker-900: #001E2F; --skywalker-800: #042D44;
   --skywalker-700: #073B58; --skywalker-600: #0C4F74;

   /* Semantic status */
   --yoda-600: #07883D;  /* success */
   --bb8-600:  #E87400;  /* warning */
   --kylo-600: #D91544;  /* error */
   --pyre-300: #FFD60A;  /* highlight */

   /* Semantic mappings */
   --colour-primary: var(--brand-ocean);
   --colour-primary-dark: var(--brand-deep-ocean);
   --colour-secondary: var(--brand-sky-blue);
   --colour-accent: var(--brand-flamingo);
   --colour-background: var(--brand-cloud);
   --colour-surface: #FFFFFF;

   /* Text */
   --text-primary: var(--brand-deep-ocean);
   --text-secondary: var(--brand-ocean);
   --text-on-primary: var(--brand-cloud);
   --text-on-accent: #FFFFFF;

   /* State (semantic status — do not substitute brand colours) */
   --colour-error: var(--kylo-600);
   --colour-warning: var(--bb8-600);
   --colour-success: var(--yoda-600);
   --colour-info: var(--brand-sky-blue);
   --colour-highlight: var(--pyre-300);

   /* Shadows and overlays */
   --shadow-colour: rgba(0, 42, 65, 0.1);
   --overlay-light: rgba(238, 249, 253, 0.9);
   --overlay-dark: rgba(0, 42, 65, 0.8);
}

Tailwind 設定

Tailwindの設定キーはcolors（アメリカ英語の綴り）です。プロジェクト全体で採用している綴りの規則にかかわらず、フレームワーク上、この指定が必須です。

module.exports = {
   theme: {
      extend: {
         colors: {
            brand: {
               ocean: '#1E5E82',
               flamingo: '#D86E89',
               'sky-blue': '#81CCEA',
               'deep-ocean': '#002A41',
               cloud: '#EEF9FD',
            },
            ocean: {
               50: '#E8F2F8', 100: '#C5DCEA', 200: '#9DC3D8',
               300: '#6AA5C3', 400: '#3D89AF', 500: '#1E5E82',
               600: '#174E6E', 700: '#103D57', 800: '#0A2D40',
               900: '#042031',
            },
            flamingo: {
               50: '#FAEEF2', 100: '#F4D1DA', 200: '#EDB0BE',
               300: '#E690A2', 400: '#DE7F92', 500: '#D86E89',
               600: '#C25079', 700: '#9E3456', 800: '#7A1E3D',
               900: '#550E28',
            },
            sky: {
               50: '#F0FAFD', 100: '#D9F1F9', 200: '#B8E5F5',
               300: '#95D6EF', 400: '#81CCEA', 500: '#59BAE2',
               600: '#329DD3', 700: '#1B7EAD', 800: '#0E5F85',
               900: '#064260',
            },
            neutral: {
               50: '#F5F7F9', 100: '#DDE3EA', 200: '#C5CED9',
               300: '#A8B5C4', 400: '#B2BECC', 500: '#8A99AB',
               600: '#5C6A7A', 700: '#3E4F5E', 800: '#293C49',
               900: '#161C21',
            },
            skywalker: {
               600: '#0C4F74', 700: '#073B58', 800: '#042D44',
               900: '#001E2F', 950: '#001421',
            },
            // Semantic status (single-step anchors)
            yoda: '#07883D',   // success
            bb8:  '#E87400',   // warning
            kylo: '#D91544',   // error
            pyre: '#FFD60A',   // highlight
         }
      }
   }
}

フォントとタイポグラフィ

該当する場合、見出し、小見出し、本文には「Inter」書体を使用します。
CDNに依存するよりも、オフラインで使用できるようフォントをバンドルすることを推奨します。

役割	フォント	ウェイト	CSS
見出し	Inter	セミボールド	`font-weight: 600`
小見出し	Inter	ミディアム	`font-weight: 500`
本文	Inter	レギュラー	`font-weight: 400`

Inter CDN フォールバック

バンドルできない場合は、このCDNを使用してください。


<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

ロゴシステム

ロゴのバリエーション

スキルにはすべてのロゴファイルが assets/ に含まれています。選択ガイド：

ファイル	使用する場面…
`Mantel_Logo__Positive.svg`	明るい背景にフルカラーのロゴを使用する場合
`Mantel_Logo__Negative.svg`	暗い背景にフルカラーのロゴを使用する場合
`Mantel_Logo__Navy.svg`	明るい背景にモノクロ（Deep Ocean）のロゴを使用する場合
`Mantel_Logo__White.svg`	暗い背景にモノクロ（白）のロゴを使用する場合
`Mantel_Icon__Positive.svg`	明るい背景にフルカラーのアイコンのみを使用する場合
`Mantel_Icon__Negative.svg`	暗い背景にフルカラーのアイコンのみを使用する場合
`Mantel_Icon__Navy.svg`	明るい背景にモノクロ（Deep Ocean）のアイコンを使用する場合
`Mantel_Icon__White.svg`	暗い背景にモノクロ（白）のアイコンを使用する場合

ロゴのルール（重要 — 違反はすぐに目立ちます）

引き伸ばしたり、変形したりしないでください。 ロゴの縦横比は約 4.67:1、アイコンは約 1.5:1 です。必ず比率を維持してください。
ロゴの色を変更しないでください。 提供されているバリエーションのみを使用し、アイコンやワードマークの色を変更しないでください。
ロゴを切り抜かないでください。 すべての要素が完全に見えるようにしてください。
ロゴの周囲には、アイコン部分の高さと幅に相当する最小限の余白を確保してください。
最小サイズ： ロゴは幅 80px / 21mm、アイコンは幅 44px / 12mm です。
明るい背景に明るいロゴを使用するのは誤りです。暗い背景に暗いロゴを使用するのも誤りです。背景と十分なコントラストが得られるバリエーションを必ず使用してください。
クライアント向け資料での推奨： Deep Ocean の背景にはフルカラーの Negative ロゴを使用してください。これは最も一般的で、ブランドを象徴する組み合わせです。
ロゴの周囲に色付きの枠線を追加しないでください — ブランドガイドで明示的に禁止されています。

リソース

図を作成する場合は、必ず ./resources/diagrams.md も読んでください。

この情報を参考に、図やフロントエンドコンポーネント全体で Mantel ブランドの視覚的な一貫性を保ってください。

Markdown 対応

ログインしてコメント

基本情報

作者: sammcj
リポジトリ: sammcj/agentic-coding
カテゴリ: デザイン・UI
インストール数: 106
GitHub スター: 167

問題を報告