# Build with AI agents

The fastest way to build a Fluxlay wallpaper is to let your AI coding agent do the work. Our official agent skill hands it everything it needs: the SDK surface, the manifest schema, the runtime CSP rules, and a scaffolding flow that goes from idea to running wallpaper.

> 💡 **Prefer the manual path?** Skip to [Getting Started](/en/studio/developer/tutorials/getting-started.md) — it walks through the same project layout step by step.

## Prerequisites

- An AI coding agent that supports Agent Skills — [Claude Code](https://claude.com/claude-code), Cursor, Codex, OpenCode, and [70+ others](https://github.com/vercel-labs/skills#supported-agents)
- [Fluxlay desktop app](/) installed
- [Node.js](https://nodejs.org/) v20 or later (any package manager: npm / pnpm / yarn / bun)

## Install the skill

Run this at the root of your project:

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

Installed agents are detected automatically. Add `-g` to make the skill available across every project:

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

Or name the agents explicitly with `-a`:

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

## Create a wallpaper

Just describe what you want to build:

```text
Build a Fluxlay wallpaper: a breathing circle whose color tracks CPU usage
```

Your agent will:

1. **Plan** — propose the `kind` (`web` / `video` / `image`), `slug`, SDK hooks (e.g. `useSystemMonitor`), required `permissions:` / `network:` declarations, and any CSP gotchas relevant to your idea.
2. **Confirm** — wait for you to adjust or approve the plan.
3. **Scaffold** — copy the minimal template, replace placeholders, install dependencies, initialize git.
4. **Implement** — write `src/main.tsx` using the SDK hooks identified during planning.

For a video or image wallpaper, just say so — the agent picks the right template, sets `kind:` and `source:`, and tells you where to drop the media file.

## Develop, build, publish — in conversation

Once the project exists, talk to your agent in natural language:

- _"Start the dev server"_ — runs the `dev` script (the desktop app must be running for HMR preview)
- _"Build and check it works under production CSP"_ — runs the `build` script
- _"Publish it"_ — before running `publish`, the agent checks build freshness, manifest validity, and `fluxlay whoami` login state

## What the skill includes

|                      |                                                                                                                         |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **Domain knowledge** | SDK API surface, `fluxlay.yaml` schema, runtime CSP, common pitfalls — auto-loaded when the agent works on a wallpaper. |
| **Scaffolding flow** | Idea → plan → scaffold → implementation, written out step by step.                                                      |
| **Templates**        | Minimal scaffolds for `web` (Vite + React) and `video` / `image` (single media file).                                   |

## On Claude Code, go one step further

If you use [Claude Code](https://claude.com/claude-code), install the official plugin instead of the bare skill. You get everything above, plus a slash command and automatic guardrails:

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

|                             |                                                                                                                                                                                  |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`/fluxlay:new`**          | Idea → plan → scaffold → implementation, in one command.                                                                                                                         |
| **Manifest validator hook** | `PostToolUse` validation after every `Edit` / `Write` to `fluxlay.yaml` (slug format, `kind` enum, `source` extension). Errors go back to Claude and get fixed in the same turn. |
| **Publish guardrail hook**  | `PreToolUse` pre-flight before `fluxlay publish` / `npm run publish`. Hard failures are blocked; otherwise you get a confirmation summary.                                       |

Claude Code marketplaces update on demand — run this periodically to pick up the latest version:

```text
/plugin marketplace update
```

## Updating the skill

```bash
npx skills update
```

## Source & feedback

Both the skill and the plugin are open source: [github.com/fluxlay/skills](https://github.com/fluxlay/skills). Issues, ideas, and contributions are welcome.

## Next steps

- [Interactive Wallpaper](/en/studio/developer/tutorials/interactive-wallpaper.md) — Add SDK hooks for mouse / keyboard / system data.
- [Publish Your Wallpaper](/en/studio/developer/tutorials/publish-wallpaper.md) — Walk through the full publish flow manually.
- [Manifest Reference](/en/studio/developer/reference/cli/manifest.md) — Every field, every type.