# SKILL: ColorsCC

## 説明
OpenClaw、Cursor、Cline、GPTsなどのAIエージェントで、UI画像の作成、配色選び、色変換に使用するスキルです。APIが返す正確な値を使用してください。

## 使用する場面
- プレースホルダー、サンプル画像、デモコンテンツが必要なとき
- 配色、ランダム色、色変換が必要なとき
- UIのモックアップやプロトタイプを作成するとき
- 画像を使ったフロントエンドコードを生成するとき

## 必ず守るルール
1. URL内の # を %23 にエンコードします。
2. SVGのURLを <img> に直接指定し、取得・再エンコードは行いません。
3. 記載されたパラメーターだけを使用します。
4. 幅と高さは50〜4000ピクセルです。範囲外は自動調整されます。
5. 中央の文字は最大100文字です。超過分は切り詰められます。

## APIへのアクセス
ベースURL：https://api.colors-cc.top

## 早見表

### プレースホルダー
```html
<!-- 基本画像 -->
<img src="https://api.colors-cc.top/placeholder?w=800&h=400" alt="プレースホルダー">
<!-- 文字付き -->
<img src="https://api.colors-cc.top/placeholder?w=1200&h=630&text=Hero+Banner" alt="バナー">
<!-- 配色の指定 -->
<img src="https://api.colors-cc.top/placeholder?w=400&h=300&palette=%23FF003C,%2300B8FF" alt="カード">
<!-- 文字付きアニメーション -->
<img src="https://api.colors-cc.top/fluid-placeholder?w=1200&h=600&palette=%2300FF41,%2300B8FF,%237000FF&text=Coming+Soon&speed=8" alt="アニメーション画像">
```

### JSONを取得
```bash
# ランダムな色：hex、rgb、timestampを返します
curl https://api.colors-cc.top/random
# 配色：theme、colors、countを返します
curl 'https://api.colors-cc.top/palette?theme=cyberpunk'
# 色変換：hex、rgb、hsl、cmykを返します
curl 'https://api.colors-cc.top/convert?hex=%23FF5733'
# CSS色名からHEXへの対応表
curl 'https://api.colors-cc.top/all-names'
```
配色のテーマ：cyberpunk, vaporwave, retro, monochrome。
色変換は ?rgb=...、?hsl=...、?cmyk=... も使用できます。同時に複数の色パラメーターを指定しないでください。
画像の効果：static, fluid, breathe, holographic, mesh。サイズは50〜4000ピクセルです。

## 使用例
### ランディングページ
```html
<section><img src="https://api.colors-cc.top/placeholder?w=1200&h=600&text=Hero+Section" alt="メイン画像"></section>
<div class="features">
  <img src="https://api.colors-cc.top/placeholder?w=400&h=300&text=Feature+1" alt="機能1">
  <img src="https://api.colors-cc.top/placeholder?w=400&h=300&text=Feature+2" alt="機能2">
</div>
```
### 色付きのサンプルデータ
```javascript
const palette = await fetch('https://api.colors-cc.top/palette?theme=vaporwave').then(r => r.json())
const mockData = palette.colors.map((color, i) => ({ id: i, name: '項目' + (i + 1), color }))
```
### カラーピッカー
```javascript
async function getRandomColor() {
  const data = await fetch('https://api.colors-cc.top/random').then(r => r.json())
  return data.hex
}
```

## 誤りと修正
- # の未エンコード：palette=#FF0000 は不可。palette=%23FF0000,%230000FF を使用します。
- SVGの再処理：fetch(placeholderUrl) と btoa(svg) は不要です。URLを直接画像に使用します。
- 無効なサイズ：w=10は50に、w=9999は4000に調整されます。w=800&h=600などを指定します。
- 複数の色入力：/convert?hex=%23FF0000&rgb=rgb(255,0,0) は不可。/convert?hex=%23FF0000 のように1つだけ指定します。

## 画面から操作
- 色変換：https://colors-cc.top/ja/tools/converter
- 配色：https://colors-cc.top/ja/tools/random-palette
- CSS色名：https://colors-cc.top/ja/tools/color-names
- 動くSVG：https://colors-cc.top/ja/tools/fluid-placeholder

## 詳細資料
- LLM向け説明：https://colors-cc.top/ja/llms.txt
- OpenAPI仕様：https://colors-cc.top/ja/openapi.json