AI エージェントで作る

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

💡 手動で進めたい方は はじめようからどうぞ。同じプロジェクト構成をステップバイステップで作ります。

前提条件

• Agent Skills 対応の AI コーディングエージェント（Claude Code / Cursor / Codex / OpenCode など 70 種類以上）
• Fluxlay デスクトップアプリがインストール済み
• Node.js v20 以降（パッケージマネージャーは npm / pnpm / yarn / bun のいずれでも可）

スキルのインストール

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

npx skills add fluxlay/skills

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

npx skills add fluxlay/skills -g

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

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

壁紙を作る

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

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 のログイン状態をエージェントが確認

スキルに含まれるもの

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

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

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

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

/plugin marketplace update

スキルの更新

npx skills update

ソースとフィードバック

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

次のステップ

• インタラクティブ壁紙 — マウス・キーボード・システム情報の SDK hook を使う
• 壁紙を公開する — 公開フローを手動で一通り
• マニフェストリファレンス — 全フィールド・全型