---
name: brand-template
description: プロジェクトのブランド（配色・書体・トンマナ）を成果物に自動適用するスキルのテンプレート。このファイルの Colors / Typography / 適用ルールを自プロジェクトの値に書き換えて使う。画像・図解・HTML・チャート・UI コンポーネントを生成するときに適用する。ユーザーに配色や書体を確認せず、本定義を直接使う。
---

# Brand Template

ブランドガイドラインを「読むもの」から「実行されるもの」に変えるガードレール型スキルのテンプレート。
theme-factory（選択肢を提示する対話型）と違い、選択肢を出さずに事前定義ルールを自動適用する。

使い方 — このディレクトリを自プロジェクトの `.claude/skills/<name>-brand/` にコピーし、以下の各セクションを書き換える。
frontmatter の name と description も自プロジェクト用に変更する（description はスキルの自動発動条件に影響する）。

## Colors

実装（CSS 変数・Tailwind クラスの実使用）から抽出した値を書く。想像で決めない。

- Background: #______
- Surface: #______
- Text Primary: #______
- Text Secondary: #______
- Accent: #______（使用は全体の 1〜2 割に抑える）
- Accent Strong: #______

## Typography

- Headings: ______
- Body: ______
- Code: ______
- フォールバック: ______

## 適用ルール（成果物種別ごとに書く）

- 画像（カバー・OGP） — 背景色 / アクセントの使い方 / 写真風にするか幾何学にするか / テキスト量の上限
- 図解・チャート — 背景、系列色の順序、グリッド線の色
- HTML・ドキュメント — ベース色と見出し書体
- UI コンポーネント — 既存クラスの再利用を優先し、新しい色を導入しない

## 禁止

- ブランド外のアクセント色の導入
- （プロジェクト固有の禁止事項を列挙する。例: 純黒背景、特定色の広面積使用、ロゴの変形）

## 設計メモ

- 固定するもの（このスキル） = ロゴ・色・書体・禁止表現。可変にするもの = 構図・リズム・キャンペーン固有の表現。全部固定すると成果物ごとの表現が死ぬ
- 全成果物への適用漏れを防ぎたい場合は、CLAUDE.md に「<name>-brand スキルを必ず適用する」と 1 行書く（常時適用 = CLAUDE.md、再利用 = スキル、のハイブリッド）
- 実例: docs/design-skills.md の brand-guidelines 章を参照