How to use the Atmosphere Background agent skill

What is an agent skill, and what does this one do?

An agent skill is a folder containing a SKILL.md file. The file holds instructions that an AI agent reads when a task matches the skill's description, so the agent follows a consistent method instead of improvising. This skill's description is: create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.

When the skill is active, the agent is guided to use a deep near-black or dark navy/charcoal base, build the glow from several overlapping tall bands that move on slow sine-wave drift, and blend them so they brighten where they cross. Each fold fades at the top and intensifies toward the bottom or a focal corner, and a subtle radial glow reinforces that focal area. The glow colour is derived from the design's primary or strongest accent colour. If no clear brand colour exists, a cool cyan-blue is the stated fallback.

The skill covers only this background layer. It does not design the page layout, typography or other effects such as WebGL or particle systems.

Install the atmosphere-background skill

Download the ZIP for atmosphere-background from the item page. Unzip it so that the folder containing SKILL.md ends up in one of these locations:

Pick the location that matches how you work. A personal skill in your home folder is available everywhere; a project skill in .claude/skills/ is only available inside that project. If you prefer the Claude apps, you can upload the skill instead under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/atmosphere-background/
• Project: .claude/skills/atmosphere-background/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload the skill

How do you trigger the skill with a natural request?

You do not need a special command. Describe the background you want and mention the skill by name, so the agent knows to load its instructions. The demo prompts in the package use the form $atmosphere-background followed by the task, so you can copy that pattern.

Name the page or section, the mood, and any colour you want. Mentioning your brand colour helps, because the skill tells the agent to tint the glow from the design's accent colour rather than a fixed cyan.

• Use $atmosphere-background to add a moody animated background to my landing page hero, using our brand's teal accent.
• Use $atmosphere-background to build a standalone HTML demo of the drifting light-fold background, glow in the lower right corner.
• Use $atmosphere-background to make the background slower and softer, so it sits behind a product headline without competing with it.

What the demo package shows

The package includes demo/index.html, a standalone page with CSS and JavaScript inline, and demo/PROMPT.md, which holds the prompts used to recreate the demo. The demo describes a canonical example of eighteen slow procedural wave bands plus one narrow moving signal beam, placed behind compact live-system metadata.

Open demo/index.html in a browser to see the intended look before you adapt it. Read demo/PROMPT.md to see how the prompts are phrased. The demo is a reference; your own page will need its own copy and layout.

Tune fold count, drift, glow and colour

The skill names five adjustment points. You can ask the agent to change any of them in your request.

Keep the motion calm. The skill says to avoid fast turbulence, noisy particle motion and obvious repeating patterns, so if the result looks busy, ask for slower drift and fewer folds.

• Fold count: more folds for a denser atmosphere, fewer for a sparser one
• Drift: horizontal sway amplitude and speed
• Brightness focus: where the strongest glow sits (corner, edge or lower quadrant)
• Colour: the accent tint, with a dark base kept
• Softness: overlap width, gradient falloff and glow strength

What does the skill need, and what about scripts and network?

The skill lists no requirements. It does not run scripts and does not use the network, according to its listing. The output is front-end code the agent writes for your project, so you still need a page to put it on and a browser to view it.

Review any code the agent writes before you deploy it, as you would for any generated code. The skill itself does not mention reduced-motion handling, so if your audience needs motion removed entirely, you must ask for that explicitly and check the result.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no

Tips for good results

Give the agent the real accent colour and the element the background sits behind. Ask for a radial glow near the focal corner if you want depth, and ask it to keep the full frame dark so that foreground text stays readable.

If you want a flat or minimal background, do not use this skill. The skill is built around animated glow, which can compete with content.

• State the page section and the brand colour in hex or in words.
• Ask for slow, low-intensity motion when the background sits behind text.
• Check the output on a small screen and with the text you actually use.