sickn33/antigravity-awesome-skills
Overview
This skill helps you create high-quality 3D scenes, interactive experiences, and visual effects using Three.js. It codifies a reliable, CDN-friendly workflow (r128) for scene setup, animation, interaction, and performance tuning. Use it to rapidly prototype WebGL visuals or to produce production-ready patterns that scale into modern build toolchains.
How this skill works
The skill provides a systematic pattern: import the correct Three.js CDN, initialize scene/camera/renderer, build geometry and materials, add lights when using lit materials, and run an animation loop with requestAnimationFrame. It includes practical interaction patterns (custom orbit-like controls, raycasting for selection, particle systems), responsiveness handling, and resource disposal for performance. Guidance is included for both CDN-based projects and migrating to modular imports in production.
When to use it
- When a user requests 3D graphics, WebGL rendering, or canvas-based visualizations
- To build interactive scenes (rotating objects, camera-follow, user-driven exploration)
- When adding animations, particle effects, or realistic PBR materials
- To implement object selection or hover effects via raycasting
- For prototyping with CDN-based Three.js (r128) or preparing to move to npm/Vite/Webpack environments
Best practices
- Always import the supported CDN version (r128) for artifact compatibility or switch to modular imports in production
- Initialize scene, camera, renderer at the top and keep the animation loop centralized
- Reuse geometries and materials; prefer BufferGeometry for custom shapes
- Add ambient + directional lights for MeshStandardMaterial and enable shadows carefully
- Handle window resize, dispose geometries/materials/textures when removing objects
Example use cases
- Interactive product viewer: rotating model, mouse-driven camera, and texture swapping
- Data visualization in 3D: map data points to a particle system with hover tooltips
- Explorable scene: simple custom controls that rotate/zoom the camera without OrbitControls
- Portfolio-quality render: PBR materials, environment map reflections, tone mapping, and soft shadows
- Performance demo: particle field with BufferGeometry and controlled particle counts
FAQ
No. OrbitControls and many example modules are not available on the r128 CDN. Implement simple custom controls or switch to modular imports via npm to use the examples library.
Why is my scene black or nothing renders?
Common causes: forgot to add objects to scene, camera inside objects, using lit materials without lights, or not calling renderer.render() inside the animation loop. Check console errors and validate camera and object positions.
9 skills
This skill helps you create high-quality 3D scenes and interactive visuals using Three.js with CDN-r128 best practices.
This skill helps you integrate Azure OpenAI services in .NET for chat, embeddings, image generation, and audio with simple, secure clients.
This skill helps you build and deploy Microsoft 365 Agents in Python, enabling secure multi-channel agents for Teams with streaming responses.
This skill guides creating Azure SDK and Foundry skills, ensuring up-to-date patterns, documentation checks, and reusable templates for AI coding agents.
This skill creates absurdly thorough README documentation for a project, covering setup, architecture, deployment, and maintenance to save you time.
This skill helps you integrate Azure Maps services in .NET applications, enabling geocoding, routing, rendering, geolocation, and weather data retrieval.
This skill helps you detect harmful content in text and images using Azure AI Content Safety in Python, with blocklist management and severity analysis.
This skill helps validate and test application configurations with robust schemas, security checks, and environment-aware rules to prevent misconfigurations.
This skill applies Clean Code principles to writing, reviewing, and refactoring Python code for readability and maintainability.
