Skip to content
Get packs

Atmosphere Background

Adds a dark, slowly drifting light-fold background with a glowing corner for web designs

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent can build a moody, cinematic background for a web page: a near-black base with soft vertical bands of light that slowly sway like fabric or fog, brightest toward a lower corner or edge. It is told to pick colours from the design's own accent colour and to keep motion slow and calm. The skill only covers this background layer, not the rest of the page layout or text.

Great for

  • Front-end developers building landing pages or hero sections that need a moody backdrop
  • Designers prototyping atmospheric visual styles who want the agent to write the code
  • Anyone wanting a calm, premium-looking animated background without geometric grids or blobs

Skip it if

  • Projects needing a flat or minimal background, since this style adds animated glow that can compete with content
  • Accessibility-sensitive pages where motion must be fully removed, because the effect is continuous animation and the skill does not mention reduced-motion handling

Try asking

  • “Create a dark atmospheric hero background with slow vertical light folds glowing in the lower right, using our brand teal”
  • “Build a canvas-based drifting light curtain background behind this landing page section”
  • “Replace the flat gradient on this page with a layered, screen-blended fog effect that moves slowly”
Step-by-step guide: how to use Atmosphere BackgroundInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    atmosphere-background.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip atmosphere-background.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip atmosphere-background.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your brand colour in the request so the glow matches your design instead of defaulting to cyan
  • Ask for a calm, slow motion level explicitly and check that foreground text stays readable
  • Review the demo/index.html file to see the expected visual result before adopting the style

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.