FLUXLAY
Sign in ・ up

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 — it walks through the same project layout step by step.

Prerequisites

Install the skill

Run this at the root of your project:

npx skills add fluxlay/skills

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

npx skills add fluxlay/skills -g

Or name the agents explicitly with -a:

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

Create a wallpaper

Just describe what you want to build:

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 knowledgeSDK API surface, fluxlay.yaml schema, runtime CSP, common pitfalls — auto-loaded when the agent works on a wallpaper.
Scaffolding flowIdea → plan → scaffold → implementation, written out step by step.
TemplatesMinimal scaffolds for web (Vite + React) and video / image (single media file).

On Claude Code, go one step further

If you use Claude Code, install the official plugin instead of the bare skill. You get everything above, plus a slash command and automatic guardrails:

/plugin marketplace add fluxlay/skills
/plugin install fluxlay@fluxlay
/fluxlay:newIdea → plan → scaffold → implementation, in one command.
Manifest validator hookPostToolUse 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 hookPreToolUse 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:

/plugin marketplace update

Updating the skill

npx skills update

Source & feedback

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

Next steps