# Claude Code で作る

Fluxlay 壁紙を最速で作る方法は、[Claude Code](https://claude.com/claude-code) に任せることです。公式プラグインが、足場づくり・SDK / マニフェスト / CSP の知識・公開時のガードレールまでまとめて提供します。

> 💡 **手動で進めたい方は** [はじめよう](/ja/studio/developer/tutorials/getting-started.md)からどうぞ。同じプロジェクト構成をステップバイステップで作ります。

## 前提条件

- [Claude Code](https://claude.com/claude-code)
- [Fluxlay デスクトップアプリ](/download)がインストール済み
- [Node.js](https://nodejs.org/) v20 以降（パッケージマネージャーは npm / pnpm / yarn / bun のいずれでも可）

## プラグインのインストール

Claude Code 上で実行します。

```text
/plugin marketplace add fluxlay/claude-plugin
/plugin install fluxlay@fluxlay
```

これで以降のすべての Claude Code セッションで利用可能になります。

## 壁紙を作る

作りたいものを伝えるだけです。

```text
/fluxlay:new CPU の使用率に応じて呼吸するように色が変わる円
```

Claude は次の流れで進めます。

1. **プラン** — `kind`（`web` / `video` / `image`）、`slug`、使う SDK hook（例: `useSystemMonitor`）、必要な `permissions:` / `network:` 宣言、関連する CSP 上の注意点を提案
2. **確認** — 調整 or 承認を待つ
3. **足場作成** — 最小テンプレートをコピー、プレースホルダ置換、依存関係のインストール、git 初期化
4. **実装** — プランで決めた SDK hook を使って `src/main.tsx` を書き始める

動画や画像の壁紙なら、その旨を伝えるだけで OK。Claude が適切なテンプレートを選び、`kind:` と `source:` を設定し、メディアファイルを置く場所を案内します。

## 開発・ビルド・公開も会話で

プロジェクトができたら、あとは自然な日本語で話しかけます。

- 「dev サーバー立ち上げて」 → `dev` スクリプトを実行（HMR プレビューにはデスクトップアプリの起動が必要）
- 「ビルドして本番 CSP で動くか確認して」 → `build` スクリプトを実行
- 「公開して」 → `publish` を起動しようとしますが、同梱の **PreToolUse hook** が先に走り、ビルドの鮮度、マニフェスト妥当性、`fluxlay whoami` のログイン状態を事前検証します。問題があれば自動でブロック、問題がなければサマリ付きの確認プロンプトが表示されます。

`fluxlay.yaml` の編集も **PostToolUse hook** が自動で検証します（slug 形式、SemVer、`kind` enum、`source` 拡張子）。エラーは Claude に返されるので、同じターン内で修正されます。

## プラグインに含まれるもの

|                             |                                                                                                    |
| --------------------------- | -------------------------------------------------------------------------------------------------- |
| **`/fluxlay:new` コマンド** | アイデア → プラン → 足場作成 → 実装まで一気通貫                                                    |
| **ドメインスキル**          | SDK API、`fluxlay.yaml` スキーマ、ランタイム CSP、よくある落とし穴を Claude が壁紙作業時に自動参照 |
| **マニフェスト検証 hook**   | `fluxlay.yaml` への `Edit` / `Write` ごとに `PostToolUse` で検証                                   |
| **公開ガードレール hook**   | `fluxlay publish` / `npm run publish` の前に `PreToolUse` で事前チェック                           |
| **テンプレート**            | `web`（Vite + React）と `video` / `image`（単一メディアファイル）の最小構成                        |

## プラグインの更新

Claude Code のマーケットプレイスは手動更新です。

```text
/plugin marketplace update
```

定期的に実行して最新版を取得してください。

## ソースとフィードバック

プラグインはオープンソースです: [github.com/fluxlay/claude-plugin](https://github.com/fluxlay/claude-plugin)。Issue・改善提案・コントリビュートを歓迎します。

## 次のステップ

- [インタラクティブ壁紙](/ja/studio/developer/tutorials/interactive-wallpaper.md) — マウス・キーボード・システム情報の SDK hook を使う
- [壁紙を公開する](/ja/studio/developer/tutorials/publish-wallpaper.md) — 公開フローを手動で一通り
- [マニフェストリファレンス](/ja/studio/developer/reference/cli/manifest.md) — 全フィールド・全型