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 behavioral changes in the canvas background.
Core Rules
- Prefer modern ES modules and arrow functions.
- Keep
src/main.jsas bootstrap only. - Keep pure math and projection logic testable and deterministic.
- Put lifecycle and canvas orchestration in
src/sky/createSky.js. - Put screen-space math in
src/sky/projection.js. - Put drawing only in
src/sky/renderer.js. - Keep star generation in
src/sky/stars.js. - Keep reusable math helpers in
src/sky/math.js.
Workflow
- Check the relevant module boundaries first.
- Change the smallest module that owns the behavior.
- Update or add Vitest coverage for deterministic logic.
- Run
npm testandnpm run build.
Validation Focus
- Camera basis orthogonality.
- Projection center points and horizon culling.
- Star generation invariants and sizing ranges.
- Import/build correctness under Vite.
Constraints
- Keep the effect lightweight on desktop and mobile.
- Cap device pixel ratio where needed.
- Avoid extra allocations in hot loops.
- Keep the canvas transparent; atmosphere belongs in CSS or a dedicated overlay, not an opaque clear.
See references/module-map.md when a task spans multiple files.
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 | 3mo | No flags | Advanced |
| 3d-web-experience | 35 | 6mo | Review | Intermediate |
| web-games | 11 | 6mo | No flags | Intermediate |
| pwa-development | 9 | 3mo | 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.