Handles stargazing engine lifecycle, math, rendering, and testing configurations.
Install
mkdir -p .claude/skills/sky-engine-dev && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17297" && unzip -o skill.zip -d .claude/skills/sky-engine-dev && rm skill.zipInstalls to .claude/skills/sky-engine-dev
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when changing the stargazing engine, math, rendering, lifecycle, tests, or Vite wiring.Key capabilities
- →Manage structural or behavioral changes in the canvas background
- →Orchestrate lifecycle and canvas operations in `src/sky/createSky.js`
- →Handle screen-space math in `src/sky/projection.js`
- →Manage drawing operations in `src/sky/renderer.js`
- →Generate stars in `src/sky/stars.js`
How it works
The skill guides changes to the sky engine by enforcing module boundaries for specific functionalities like lifecycle orchestration, screen-space math, and star generation. It requires updating Vitest coverage and running build processes.
Inputs & outputs
When to use sky-engine-dev
- →Changing rendering math
- →Updating sky lifecycle
- →Configuring Vite for sky rendering
About this skill
Sky Engine Dev
Use this skill for structural or behavioural changes to the WebGL sky.
Core Rules
- Modern ES modules and arrow functions; no runtime dependencies.
- Keep
src/main.jsas bootstrap only andsrc/ui/DOM-only. - Pure, deterministic logic lives in
astro.js,projection.js,stars.js,camera.jsandevents.js, and is unit tested. createSky.jsowns lifecycle, input, time and per-frame state;render/owns GPU resources (created up front) and draw passes.- The GLSL projection in
render/shaders/common.glslmirrorsprojection.js; change both.
Workflow
- Check the module map in references/module-map.md.
- Change the smallest module that owns the behaviour.
- Add or update Vitest coverage for deterministic logic.
- Run
npm testandnpm run build(plusnpm run build:embedfor shared code). - Check shaders visually on the real GPU (see AGENTS.md, "Testing Expectations").
Validation Focus
- Frame conversions (equatorial, galactic, horizontal) and sidereal time.
- Projection round trips and composition (
altitudeForHorizon). - Catalogue decoding, generation invariants and determinism.
- Camera limits and inertia; meteor and satellite lifecycles.
Constraints
- No per-frame allocations in the render path.
- One-off heavy work is sliced across frames (generators, tiled bakes).
- Point-like light goes through the tone-mapped screen-blend star pass; diffuse light goes through the composite.
When not to use it
- →When changes are not related to the stargazing engine, math, rendering, lifecycle, tests, or Vite wiring
- →When the task involves CSS or a dedicated overlay for atmosphere effects
Limitations
- →Must keep the effect lightweight on desktop and mobile
- →Must cap device pixel ratio where needed
- →Must avoid extra allocations in hot loops
How it compares
This skill provides a structured approach to modifying the sky engine by adhering to strict module boundaries and testing requirements, which helps maintain determinism and performance compared to ad-hoc code changes.
Compared to similar skills
sky-engine-dev side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| sky-engine-dev (this skill) | 0 | 6mo | No flags | Advanced |
| 3d-web-experience | 35 | 9mo | Review | Intermediate |
| web-games | 11 | 9mo | No flags | Intermediate |
| pwa-development | 9 | 6mo | Caution | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
3d-web-experience
davila7
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
web-games
davila7
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
pwa-development
alinaqi
Progressive Web Apps - service workers, caching strategies, offline, Workbox
vite
antfu
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
threejs-shaders
CloudAI-X
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
webf-infinite-scrolling
openwebf
Create high-performance infinite scrolling lists with pull-to-refresh and load-more capabilities using WebFListView. Use when building feed-style UIs, product catalogs, chat messages, or any scrollable list that needs optimal performance with large datasets.