jyjeanne/canvas-threejs-basics
skills/canvas-threejs-basics/SKILL.md
To render 2D (Canvas API) or 3D (Three.js/WebGL) graphics in the browser for games, visualizations, or creative effects. Use when: Canvas: Charts, simple games, image editing; Three.js: 3D models, immersive experiences, complex particle systems.
$ install --global
skillsauthnpx skillsauth add jyjeanne/ai-setup-forge canvas-threejs-basicsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 6, 2026, 11:26 AM57.9s1 file scanned
SKILL.md
- name:
- canvas-threejs-basics
- description:
- To render 2D (Canvas API) or 3D (Three.js/WebGL) graphics in the browser for games, visualizations, or creative effects. Use when: Canvas: Charts, simple games, image editing; Three.js: 3D models, immersive experiences, complex particle systems.
Purpose
To render 2D (Canvas API) or 3D (Three.js/WebGL) graphics in the browser for games, visualizations, or creative effects.
When to Use
- Canvas: Charts, simple games, image editing.
- Three.js: 3D models, immersive experiences, complex particle systems.
Procedure
1. HTML Canvas (2D)
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw Rectangle
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
// Animation Loop
function animate() {
ctx.clearRect(0, 0, 500, 500);
// update and draw...
requestAnimationFrame(animate);
}
</script>
2. Three.js (3D)
Install: npm install three
import * as THREE from 'three';
// Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Object
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// Loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
3. React Integration
Use @react-three/fiber for declarative 3D in React.
Constraints
- Performance: WebGL is GPU-intensive. Optimize geometry count and texture sizes.
- Accessibility: Canvas content is not readable by screen readers. Provide fallback text or ARIA labels.
Expected Output
High-performance graphical rendering beyond the capabilities of standard DOM elements.
Related Skills
jyjeanne/legacy-circuit-mockups
development
VerifiedTrustedCommunity
Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.
1SKILL.mdUpdated Apr 6, 2026
jyjeanne/lean-ux
development
VerifiedTrustedCommunity
Apply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables. Use when the user mentions "Lean UX", "design hypothesis", "UX experiment", "collaborative design", or "outcome over output". Covers hypothesis statements, MVPs for UX, and cross-functional collaboration. For Build-Measure-Learn, see lean-startup. For usability audits, see ux-heuristics.
1SKILL.mdUpdated Apr 6, 2026
jyjeanne/lean-startup
development
VerifiedTrustedCommunity
Design MVPs, validated learning experiments, and pivot-or-persevere decisions using Build-Measure-Learn. Use when the user mentions "MVP scope", "validated learning", "pivot or persevere", "vanity metrics", or "test assumptions". Covers innovation accounting and actionable metrics. For 5-day prototype testing, see design-sprint. For customer motivation analysis, see jobs-to-be-done.
1SKILL.mdUpdated Apr 6, 2026
jyjeanne/langsmith
tools
VerifiedTrustedCommunity
Instrument, trace, evaluate, and monitor LLM applications and AI agents with LangSmith. Use when setting up observability for LLM pipelines, running offline or online evaluations, managing prompts in the Prompt Hub, creating datasets for regression testing, or deploying agent servers. Triggers on: langsmith, langchain tracing, llm tracing, llm observability, llm evaluation, trace llm calls, @traceable, wrap_openai, langsmith evaluate, langsmith dataset, langsmith feedback, langsmith prompt hub, langsmith project, llm monitoring, llm debugging, llm quality, openevals, langsmith cli, langsmith experiment, annotate llm, llm judge.
1SKILL.mdUpdated Apr 6, 2026