atmosphere-background — скилл для Claude Code: тёмный фон с бликами
Скилл для генерации тёмного атмосферного фона: вертикальные световые складки медленно дрейфуют, свечение складывается в углу или у нижнего края.
npx skills add MengTo/Skills --skill atmosphere-background -a claude-codeЧто делает atmosphere-background
Скилл описывает, как собрать immersive-фон для сайта или приложения: почти чёрная основа, поверх неё несколько высоких перекрывающихся полос света, которые медленно ходят по горизонтали. Полосы складываются через screen или additive blending, поэтому в местах пересечения фон светлеет сам собой. Яркость накапливается к одной зоне — чаще к правому нижнему углу или нижнему краю, чтобы у сцены был кинематографичный фокус, а не ровная заливка.
Палитра сдержанная: тёмно-синяя или угольная база, свечение выводится из основного цвета дизайна. Если явного брендового цвета нет, скилл допускает холодный циан-синий. Для движения рекомендуется canvas или шейдеры, а не статичные CSS-градиенты. Настройки — число складок, амплитуда и скорость дрейфа, ширина перекрытия, крутизна градиента — вынесены отдельными ручками, так что плотность и мягкость атмосферы правятся без переписывания эффекта.
Область применения узкая: только фоновый слой. Раскладку страницы, типографику и посторонние WebGL- или particle-системы скилл не трогает, и это стоит держать в голове, если ждёте от него правок интерфейса. Прямо перечислено, чего избегать: плоских многоцветных градиентов без структуры складок, радужных переходов, жёстко зашитого циана при другом основном цвете и быстрой шумной турбулентности — она ломает спокойный вид.
Какие задачи решает
- собрать тёмный атмосферный фон для лендинга
- сделать световые складки, которые медленно дрейфуют
- сложить свечение в одном углу вместо ровной заливки
- подобрать палитру фона под основной цвет дизайна
- настроить плотность и мягкость свечения без переписывания шейдера
Примеры запросов агенту
- Сделай тёмный атмосферный фон со световыми складками для главного экрана
- Переделай фон: свечение должно собираться в правом нижнем углу, движение медленное
- Убери радужные переходы и сделай фон на основе нашего акцентного цвета
Как установить atmosphere-background
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a claude-code2Вручную: положить файлы
~/.claude/skills/atmosphere-background/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/atmosphere-background/
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a codex2Вручную: положить файлы
.agents/skills/atmosphere-background/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a cursor2Вручную: положить файлы
.cursor/skills/atmosphere-background/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills atmosphere-background2Вручную: положить файлы
.github/skills/atmosphere-background/SKILL.md1Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a gemini-cli2Командой платформы
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/atmosphere-backgroundВручную: положить файлы
.devin/skills/atmosphere-background/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add MengTo/Skills --skill atmosphere-background -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о atmosphere-background
Как установить atmosphere-background в Claude?
Выполните npx skills add MengTo/Skills --skill atmosphere-background -a claude-code. После этого файл скилла лежит в ~/.claude/skills/atmosphere-background/SKILL.md.
Что делает atmosphere-background?
Описывает, как построить тёмный фон с дрейфующими вертикальными световыми складками и сконцентрированным свечением в углу или у нижнего края. Работает только с фоновым слоем.
На чём сломается этот скилл?
Он не для раскладки, типографики и посторонних WebGL- или particle-систем. Если нужен фон без движения, canvas или шейдеры избыточны.
Исходный текст
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