atmosphere-background — Claude Code skill: dark light-fold backdrop
A skill for building a dark atmospheric backdrop: vertical light folds drift slowly across the frame and the glow concentrates in one corner or along the lower edge.
npx skills add MengTo/Skills --skill atmosphere-background -a claude-codeWhat atmosphere-background does
The skill lays out how to build an immersive background layer: a near-black base with several tall overlapping light bands drifting horizontally on a slow sine wave. Bands blend with screen or additive-style compositing, so the background brightens naturally where they cross. Brightness accumulates toward one zone, usually the lower right or the lower edge, which gives the scene a cinematic focal glow instead of flat, even light.
The palette stays restrained: dark navy or charcoal underneath, with the glow derived from the design's primary or strongest accent color. If there is no clear brand color, a cool cyan-blue atmosphere is allowed. For motion the skill prefers canvas or shader-driven rendering over static CSS gradients. Tuning knobs cover fold count, drift amplitude and speed, overlap width and gradient falloff, so density and softness can be adjusted without rewriting the effect.
Scope is narrow. This applies to the background layer only, not to page layout, typography or unrelated WebGL and particle systems, so do not expect it to touch your UI. The skill also lists what to avoid: flat multi-stop gradients with no fold structure, rainbow transitions, hardcoded cyan when the design uses another primary color, and fast noisy turbulence that breaks the calm look.
What it helps with
- build a dark atmospheric backdrop for a landing page
- make light folds that drift slowly instead of pulsing
- concentrate the glow in one corner rather than spreading it
- tint the background to match the design's accent color
- tune fold density and softness without rewriting the shader
Example prompts for the agent
- Create a dark atmospheric background with drifting light folds for the hero section
- Rework the background so the glow sits in the lower right and the motion stays slow
- Drop the rainbow transitions and rebuild the backdrop from our accent color
How to install atmosphere-background
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a claude-code2Manually: put the files in place
~/.claude/skills/atmosphere-background/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/atmosphere-background/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a codex2Manually: put the files in place
.agents/skills/atmosphere-background/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a cursor2Manually: put the files in place
.cursor/skills/atmosphere-background/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills atmosphere-background2Manually: put the files in place
.github/skills/atmosphere-background/SKILL.md1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a gemini-cli2Platform CLI
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/atmosphere-backgroundManually: put the files in place
.devin/skills/atmosphere-background/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about atmosphere-background
How do I install atmosphere-background in Claude?
Run npx skills add MengTo/Skills --skill atmosphere-background -a claude-code. The skill file then lives at ~/.claude/skills/atmosphere-background/SKILL.md.
What does atmosphere-background do?
It describes how to build a dark backdrop with drifting vertical light folds and a concentrated glow in a corner or along the lower edge. It works on the background layer only.
What is atmosphere-background not for?
Page layout, typography and unrelated WebGL or particle systems are out of scope. If you need a static background, canvas or shaders are overkill.
Source text
SKILL.md · MIT
--- name: atmosphere-background description: "Create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom." --- # Atmosphere Background Skill ## Use When - Create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom. ## Workflow ## Scope - Apply this only to the immersive background layer, not to the full page layout, typography, or unrelated WebGL/particle systems. - Use it when the design needs a moody atmospheric backdrop with fluid light curtains or folds instead of geometric grids, blobs, or literal illustrations. ## Visual target - Create a deep near-black background with soft vertical light folds drifting across the frame like illuminated fabric, fog sheets, or light curtains. - Build the glow from multiple overlapping vertical bands so the background feels layered and spatial rather than flat. - Let brightness accumulate more strongly toward one area, especially the lower right or lower edge, so the scene has a cinematic focal glow instead of uniform brightness. - Keep the palette restrained: dark navy or charcoal base, then derive the glow from the design's primary color or strongest accent color. If no clear brand color exists, a cool cyan-blue atmosphere is acceptable. ## Implementation guidance - Prefer canvas or shader-driven rendering for this effect instead of static CSS gradients when motion is required. - Use multiple tall overlapping bands or folds with slow sine-wave drift so the structure reads as moving atmospheric light rather than hard columns. - Use screen or additive-style blending so the overlapping folds brighten naturally where they cross. - Shape each fold with vertical gradients that fade at the top and intensify toward the bottom or focal corner. - Add a subtle radial glow overlay near the focal edge or corner to reinforce depth and the main luminous area. - Motion should stay slow and meditative: gentle drift, slight intensity modulation, no noisy flicker or rapid pulsing. ## Tuning knobs - Fold count: add or reduce the number of vertical folds depending on how dense the atmosphere should feel. - Drift: control horizontal sway amplitude and speed to keep motion calm. - Brightness focus: place the strongest glow near a corner, edge, or lower quadrant instead of spreading it evenly across the whole frame. - Color: tint the folds with the active design accent while preserving a dark, premium base. - Softness: adjust overlap width, gradient falloff, and post-glow strength so the background feels luminous but not washed out. ## Avoid - Flat multi-stop gradients with no layered fold structure. - Loud rainbow color transitions or bright full-frame glow that competes with foreground content. - Hardcoded cyan if the design clearly uses another primary color. - Fast turbulence, noisy particle motion, or obvious repeating patterns that break the calm atmospheric look.
© MengTo · MIT · MengTo/Skills