К основному содержанию
скилл CX Codex

corner-lasers — скилл для Claude Code: установка и функции

Создаёт угловую композицию из тонких лазерных лучей, яркого источника и атмосферного свечения. Нужен для интерфейсов и сцен с лучами от края или угла.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add MengTo/Skills --skill corner-lasers -a claude-code
Открыть на GitHub

Что делает corner-lasers

Скилл задаёт композицию, где два или три тонких луча сходятся в яркой точке у края или угла. Центр луча остаётся почти белым, а ореол и дымка берут цвет из активного акцента дизайна. Вокруг источника добавляются локальное свечение, bloom и рассеивание света.

Для эффекта предлагается raw WebGL-шейдер или аналогичная логика, а толщину линий можно отделить от внешнего свечения через расчёт расстояния до линии. Положение источника, углы, плотность тумана, спад света и виньетка настраиваются отдельно. Скилл не годится для центральных лазеров и хаотичного мерцания: движение должно быть сдержанным, с медленной пульсацией или лёгким пробегом энергии.

Какие задачи решает

  • собрать лазерные лучи из одной угловой точки
  • добавить яркий источник в месте схождения лучей
  • окрасить ореол под акцентный цвет интерфейса
  • настроить локальный туман вокруг лазерных линий
  • избежать толстых неоновых полос

Примеры запросов агенту

  • Создай угловой лазерный эффект с источником у правого края и двумя тонкими лучами.
  • Добавь в фон композицию с лазерами, сходящимися в левом верхнем углу.
  • Сделай WebGL-эффект с белым ядром лучей, цветным ореолом и мягкой дымкой.

Как установить corner-lasers

1Через Skills CLI (Vercel)

npx skills add MengTo/Skills --skill corner-lasers -a claude-code

2Вручную: положить файлы

~/.claude/skills/corner-lasers/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/corner-lasers/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора144

bright-green-tech-system-webgl Скилл настраивает техническую дизайн-систему с тёмным фоном, угловыми скобками, акцентным зелёным цветом и витриной WebGL для консолей или инженерных панелей. CX Codex +1 1 400установок nested-container-clean-agency Задаёт ИИ-агенту направление дизайна: внешняя редакционная оболочка, тёмные врезные блоки, скруглённые карточки и сдержанный акцентный цвет. CX Codex +1 1 400установок glass-dark-mode-clock Задаёт дизайн-систему тёмного стекла: матовые панели, сетка лучей и круглый циферблат-калибратор в центре страницы. CX Codex +1 1 400установок tech-green-dark-mode-modern Задаёт правила для тёмного интерфейса с изумрудными акцентами, матовыми поверхностями и моноширинными метками. Помогает оформить технические дашборды без ухода в неоновый киберпанк. CX Codex +1 1 400установок blue-cloudy-clean-modern Задаёт дизайн-систему с голубым небом, мягкими облаками и белой типографикой. Пригодится, когда интерфейсу нужен спокойный воздушный вид. CX Codex +1 1 400установок nested-container-frames Скилл задаёт правила вёрстки многоуровневых интерфейсов по принципу «контейнер в контейнере». Пригодится при оформлении лендингов с внешними рамками и внутренними блоками. CX Codex +1 1 400установок dither-laser-dark-mode Скилл задаёт тёмную дизайн-систему с текстурой ordered dither и тонким лазерным акцентом. Пригодится для атмосферных интерфейсов с чёткой иерархией. CX Codex +1 1 400установок light-mode-paper-technical Задаёт направление дизайн-системы: тёплые бумажные поверхности, тёмная внешняя рамка, тонкая диагональная текстура и один сдержанный акцент. CX Codex +1 1 400установок

Похожие

threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. CX Codex +1 3 400установок p5js SHL0MS, Hermes Agent Создаёт браузерные скетчи на p5.js: генеративное искусство, интерактивные визуализации, 3D-сцены с WebGL, audio-reactive графика. Экспорт в PNG, GIF, MP4 или SVG. CX Codex +1 534установок threejs-shaders CloudAI-X Скилл помогает писать кастомные GLSL-шейдеры и материалы для Three.js r186, настраивать униформы и переводить код на TSL для WebGPU. CX Codex +1 15 600установок pixijs-custom-rendering pixijs Помогает писать кастомные шейдеры, юниформы, фильтры и батчеры в PixiJS v8 — на GLSL и WGSL, под WebGL и WebGPU. CX Codex +1 5 700установок threejs-aaa-graphics-builder majidmanzarpour Скилл переводит браузерную 3D-графику Three.js из прототипа в качественный продакшен: настраивает материалы, свет, шейдеры и проверяет сцену по шкале качества. CX Codex +1 3 200установок shader-dev MiniMax-AI Набор руководств по 36 техникам GLSL для генерации шейдеров под ShaderToy и WebGL2. Пригодится для процедурного 3D, рей-марчинга и визуальных эффектов прямо в коде. CX Codex +1 2 500установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о corner-lasers

Как установить corner-lasers в Claude Code?

Запустите npx skills add MengTo/Skills --skill corner-lasers -a claude-code, затем повторите npx skills add MengTo/Skills --skill corner-lasers -a claude-code. Файл скилла находится в ~/.claude/skills/corner-lasers/SKILL.md.

Что делает corner-lasers?

Скилл направляет агента на создание угловой композиции с двумя или тремя тонкими лазерными лучами, яркой точкой-источником, bloom и атмосферным свечением.

Подходит ли corner-lasers для лазера по центру экрана?

Нет. Его область применения ограничена лучами, которые выходят из угла или сходятся у краевой точки; симметричная центральная композиция ему не соответствует.

Исходный текст

SKILL.md · MIT
---
name: corner-lasers
description: "Create a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog."
---

# Corner Lasers Skill

## Use When
- Create a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog.

## Workflow

## Scope
- Apply this only to corner-based laser beam compositions, not to generic centered lasers, particle scenes, or unrelated motion systems.
- Use it when the design needs beams that originate from or converge at a corner or edge junction, with a strong cinematic emitter point.

## Visual target
- Create two or three thin laser beams that meet at a bright corner emitter, then extend outward along different directions like a geometric room corner or portal seam.
- Keep the beam lines narrow and sharp with a white-hot center, a restrained halo, and strong bloom concentrated around the corner junction.
- Let the surrounding atmosphere glow softly from the emitter so the corner feels illuminated by volumetric haze rather than flat lines on a dark background.
- Use the design's primary color or strongest accent color for the halo and atmospheric tint instead of hardcoding blue, while keeping the brightest beam core near white.

## Implementation guidance
- Prefer raw WebGL shader treatment or equivalent effect logic when the output supports it.
- Anchor the composition to an off-center corner point and derive multiple beam directions from that point rather than placing unrelated separate lines.
- Use signed-distance or line-distance logic so each beam stays thin, crisp, and continuous.
- Add a concentrated bloom or energy flare at the corner emitter where the beams meet; that hotspot should be the brightest point in the composition.
- Add subtle atmospheric glow, fog, or light diffusion around the beams so the effect feels immersive and spatial, not flat.
- Motion should stay restrained: slow pulsing, faint traveling energy, or gentle shimmer is good; chaotic flicker is not.

## Tuning knobs
- Corner position: move the emitter point inward from the edge or corner to frame the composition.
- Beam count and angle: use two or three rays with clear directional contrast.
- Beam thickness: keep the core thin and tune the outer glow separately so the lasers stay elegant.
- Color: derive halo and haze tint from the active design accent color.
- Atmosphere: adjust bloom radius, fog density, falloff, and vignette strength so the corner stays luminous without washing out the UI.

## Avoid
- Thick neon bars that lose the precision of laser lines.
- Full-screen fog with no localized relationship to the corner emitter.
- Hardcoding a cold blue palette when the design clearly uses another primary color.
- Symmetrical centered compositions when the goal is an off-axis corner beam effect.

© MengTo · MIT · MengTo/Skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой