# AI エージェントで作る

Fluxlay 壁紙を最速で作る方法は、普段使っている AI コーディングエージェントに任せることです。公式の Agent Skill が、SDK / マニフェスト / CSP の知識と足場づくりのフローをエージェントに渡します。

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

## 前提条件

- Agent Skills 対応の AI コーディングエージェント（[Claude Code](https://claude.com/claude-code) / Cursor / Codex / OpenCode など [70 種類以上](https://github.com/vercel-labs/skills#supported-agents)）
- [Fluxlay デスクトップアプリ](/)がインストール済み
- [Node.js](https://nodejs.org/) v20 以降（パッケージマネージャーは npm / pnpm / yarn / bun のいずれでも可）

## スキルのインストール

プロジェクトのルートで実行します。

```bash
npx skills add fluxlay/skills
```

インストール先のエージェントは自動検出されます。すべてのプロジェクトで使えるようにするなら `-g` を付けます。

```bash
npx skills add fluxlay/skills -g
```

エージェントを明示したい場合は `-a` で指定します。

```bash
npx skills add fluxlay/skills -a claude-code -a cursor
```

## 壁紙を作る

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

```text
CPU の使用率に応じて呼吸するように色が変わる Fluxlay 壁紙を作って
```

エージェントは次の流れで進めます。

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

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

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

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

- 「dev サーバー立ち上げて」 → `dev` スクリプトを実行（HMR プレビューにはデスクトップアプリの起動が必要）
- 「ビルドして本番 CSP で動くか確認して」 → `build` スクリプトを実行
- 「公開して」 → `publish` の前に、ビルドの鮮度・マニフェストの妥当性・`fluxlay whoami` のログイン状態をエージェントが確認

## スキルに含まれるもの

|                        |                                                                                            |
| ---------------------- | ------------------------------------------------------------------------------------------ |
| **ドメイン知識**       | SDK API、`fluxlay.yaml` スキーマ、ランタイム CSP、よくある落とし穴をエージェントが自動参照 |
| **足場づくりのフロー** | アイデア → プラン → 足場作成 → 実装までの手順書                                            |
| **テンプレート**       | `web`（Vite + React）と `video` / `image`（単一メディアファイル）の最小構成                |

## Claude Code ならプラグインでさらに一歩

[Claude Code](https://claude.com/claude-code) を使っている場合は、スキルの代わりに公式プラグインを入れると、上のスキルに加えてスラッシュコマンドと自動ガードレールが付きます。

```text
/plugin marketplace add fluxlay/skills
/plugin install fluxlay@fluxlay
```

|                           |                                                                                                                                                                         |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`/fluxlay:new`**        | アイデア → プラン → 足場作成 → 実装まで 1 コマンドで                                                                                                                    |
| **マニフェスト検証 hook** | `fluxlay.yaml` への `Edit` / `Write` ごとに `PostToolUse` で検証（`slug` 形式、`kind` enum、`source` 拡張子）。エラーは Claude に返されるので同じターン内で修正されます |
| **公開ガードレール hook** | `fluxlay publish` / `npm run publish` の前に `PreToolUse` で事前チェック。問題があれば自動でブロック、問題がなければサマリ付きの確認プロンプトが表示されます            |

マーケットプレイスは手動更新です。定期的に実行して最新版を取得してください。

```text
/plugin marketplace update
```

## スキルの更新

```bash
npx skills update
```

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

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

## 次のステップ

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