# Build with Claude Code

The fastest way to build a Fluxlay wallpaper today is to let [Claude Code](https://claude.com/claude-code) do the work. Our official plugin bundles everything needed: a scaffolder, a domain skill that knows the SDK / manifest / CSP rules, and guardrail hooks that block bad publishes.

> 💡 **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

- [Claude Code](https://claude.com/claude-code)
- [Fluxlay desktop app](/download) installed
- [Node.js](https://nodejs.org/) v20 or later (any package manager: npm / pnpm / yarn / bun)

## Install the plugin

In Claude Code, run:

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

That's it. The plugin is now active in every Claude Code session.

## Create a wallpaper

Just describe what you want to build:

```text
/fluxlay:new a breathing circle whose color tracks CPU usage
```

Claude 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 — Claude 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 Claude 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"_ — kicks off `publish`, but the bundled **PreToolUse hook** intercepts first and runs pre-flight checks (build freshness, manifest validity, `fluxlay whoami` login state). Hard failures are blocked; otherwise you get a confirmation summary.

Edits to `fluxlay.yaml` are also validated automatically by a **PostToolUse hook** — slug format, SemVer, `kind` enum, `source` extension. Errors are surfaced back to Claude so they get fixed in the same turn.

## What the plugin includes

|                             |                                                                                                                      |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| **`/fluxlay:new` command**  | Idea → plan → scaffold → implementation, in one flow.                                                                |
| **Domain skill**            | SDK API surface, `fluxlay.yaml` schema, runtime CSP, common pitfalls — auto-loaded when Claude works on a wallpaper. |
| **Manifest validator hook** | `PostToolUse` validation after every `Edit` / `Write` to `fluxlay.yaml`.                                             |
| **Publish guardrail hook**  | `PreToolUse` pre-flight before `fluxlay publish` / `npm run publish`.                                                |
| **Templates**               | Minimal scaffolds for `web` (Vite + React) and `video` / `image` (single media file).                                |

## Updating the plugin

Claude Code marketplaces update on demand:

```text
/plugin marketplace update
```

Run this periodically to pick up the latest plugin version.

## Source & feedback

The plugin is open source: [github.com/fluxlay/claude-plugin](https://github.com/fluxlay/claude-plugin). 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.