Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

shiqkuangsan/tooyoung:threejs-builder

Name: tooyoung:threejs-builder
Author: shiqkuangsan

skills/threejs-builder/SKILL.md

npx skillsauth add shiqkuangsan/oh-my-daily-skills tooyoung:threejs-builder

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Three.js Builder

A focused skill for creating simple, performant Three.js web applications using modern ES module patterns.

Quick Start: Minimal Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js App</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        overflow: hidden;
        background: #000;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as THREE from "https://unpkg.com/[email protected]/build/three.module.js";

      // Scene setup
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000,
      );
      const renderer = new THREE.WebGLRenderer({ antialias: true });

      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      document.body.appendChild(renderer.domElement);

      // Your 3D content here
      camera.position.z = 5;

      // Animation loop
      renderer.setAnimationLoop((time) => {
        renderer.render(scene, camera);
      });

      // Handle resize
      window.addEventListener("resize", () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });
    </script>
  </body>
</html>

Geometries

Common primitives:

BoxGeometry(width, height, depth) - cubes, boxes
SphereGeometry(radius, widthSegments, heightSegments) - balls, planets
CylinderGeometry(radiusTop, radiusBottom, height) - tubes, cylinders
TorusGeometry(radius, tube) - donuts, rings
PlaneGeometry(width, height) - floors, walls
IcosahedronGeometry(radius, detail) - low-poly spheres (detail=0)

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Materials

MeshBasicMaterial - No lighting, flat colors
MeshStandardMaterial - PBR lighting (default choice)
MeshPhongMaterial - Legacy, faster than Standard

Common properties:

{
    color: 0x44aa88,
    roughness: 0.5,      // 0=glossy, 1=matte
    metalness: 0.0,      // 0=non-metal, 1=metal
    wireframe: false,
    transparent: false,
    opacity: 1.0
}

Lighting

No light = black screen (except BasicMaterial).

// Ambient (base illumination)
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// Directional (sun-like)
const mainLight = new THREE.DirectionalLight(0xffffff, 1);
mainLight.position.set(5, 10, 7);
scene.add(mainLight);

Animation

// Continuous rotation
renderer.setAnimationLoop((time) => {
  mesh.rotation.x = time * 0.001;
  mesh.rotation.y = time * 0.0005;
  renderer.render(scene, camera);
});

// Wave motion
mesh.position.y = Math.sin(time * 0.002) * 0.5;

Camera Controls (OrbitControls)

import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js";

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
});

Common Patterns

Rotating Cube

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0x00ff88 }),
);
scene.add(cube);

renderer.setAnimationLoop((time) => {
  cube.rotation.x = cube.rotation.y = time * 0.001;
  renderer.render(scene, camera);
});

Particle Field

const positions = new Float32Array(1000 * 3);
for (let i = 0; i < 1000 * 3; i++) {
  positions[i] = (Math.random() - 0.5) * 50;
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
const particles = new THREE.Points(
  geometry,
  new THREE.PointsMaterial({ size: 0.1 }),
);
scene.add(particles);

Colors

Hex format: 0xRRGGBB

Black: 0x000000, White: 0xffffff
Red: 0xff0000, Green: 0x00ff00, Blue: 0x0000ff
Orange: 0xff8800, Purple: 0x8800ff

Key Anti-Patterns

Creating geometry in animation loop - Memory leak, use once and transform
Missing scene.add() - Object won't render
No pixelRatio cap - Use Math.min(window.devicePixelRatio, 2)

References

references/mobile-touch.md - Touch events, mobile optimization
references/advanced-topics.md - GLTF loading, shaders, post-processing

Version Note: Three.js r170 (January 2025). Check threejs.org for updates.

shiqkuangsan/tooyoung:threejs-builder

skills/threejs-builder/SKILL.md

Create simple Three.js web apps with scene setup, lighting, geometries, materials, animations, OrbitControls, particles, and responsive rendering. Use for Three.js scenes, WebGL demos, 3D showcases, and interactive 3D web content. Trigger: threejs, Three.js, 3D scene, WebGL, 三维展示, 3D showcase, interactive 3D

15 stars

development

Updated May 19, 2026

$ install --global

skillsauth

npx skillsauth add shiqkuangsan/oh-my-daily-skills tooyoung:threejs-builder

Install 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.

Scanners Passed

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: May 19, 2026, 6:22 AM174.4s3 files scanned

SKILL.md

name:: tooyoung:threejs-builder
description:: Create simple Three.js web apps with scene setup, lighting, geometries, materials, animations, OrbitControls, particles, and responsive rendering. Use for Three.js scenes, WebGL demos, 3D showcases, and interactive 3D web content. Trigger: threejs, Three.js, 3D scene, WebGL, 三维展示, 3D showcase, interactive 3D
version:: 1.0.2
author:: shiqkuangsan
visibility:: public

Three.js Builder

A focused skill for creating simple, performant Three.js web applications using modern ES module patterns.

Quick Start: Minimal Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js App</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        overflow: hidden;
        background: #000;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as THREE from "https://unpkg.com/[email protected]/build/three.module.js";

      // Scene setup
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000,
      );
      const renderer = new THREE.WebGLRenderer({ antialias: true });

      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      document.body.appendChild(renderer.domElement);

      // Your 3D content here
      camera.position.z = 5;

      // Animation loop
      renderer.setAnimationLoop((time) => {
        renderer.render(scene, camera);
      });

      // Handle resize
      window.addEventListener("resize", () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });
    </script>
  </body>
</html>

Geometries

Common primitives:

BoxGeometry(width, height, depth) - cubes, boxes
SphereGeometry(radius, widthSegments, heightSegments) - balls, planets
CylinderGeometry(radiusTop, radiusBottom, height) - tubes, cylinders
TorusGeometry(radius, tube) - donuts, rings
PlaneGeometry(width, height) - floors, walls
IcosahedronGeometry(radius, detail) - low-poly spheres (detail=0)

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Materials

MeshBasicMaterial - No lighting, flat colors
MeshStandardMaterial - PBR lighting (default choice)
MeshPhongMaterial - Legacy, faster than Standard

Common properties:

{
    color: 0x44aa88,
    roughness: 0.5,      // 0=glossy, 1=matte
    metalness: 0.0,      // 0=non-metal, 1=metal
    wireframe: false,
    transparent: false,
    opacity: 1.0
}

Lighting

No light = black screen (except BasicMaterial).

// Ambient (base illumination)
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// Directional (sun-like)
const mainLight = new THREE.DirectionalLight(0xffffff, 1);
mainLight.position.set(5, 10, 7);
scene.add(mainLight);

Animation

// Continuous rotation
renderer.setAnimationLoop((time) => {
  mesh.rotation.x = time * 0.001;
  mesh.rotation.y = time * 0.0005;
  renderer.render(scene, camera);
});

// Wave motion
mesh.position.y = Math.sin(time * 0.002) * 0.5;

Camera Controls (OrbitControls)

import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js";

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
});

Common Patterns

Rotating Cube

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0x00ff88 }),
);
scene.add(cube);

renderer.setAnimationLoop((time) => {
  cube.rotation.x = cube.rotation.y = time * 0.001;
  renderer.render(scene, camera);
});

Particle Field

const positions = new Float32Array(1000 * 3);
for (let i = 0; i < 1000 * 3; i++) {
  positions[i] = (Math.random() - 0.5) * 50;
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
const particles = new THREE.Points(
  geometry,
  new THREE.PointsMaterial({ size: 0.1 }),
);
scene.add(particles);

Colors

Hex format: 0xRRGGBB

Black: 0x000000, White: 0xffffff
Red: 0xff0000, Green: 0x00ff00, Blue: 0x0000ff
Orange: 0xff8800, Purple: 0x8800ff

Key Anti-Patterns

Creating geometry in animation loop - Memory leak, use once and transform
Missing scene.add() - Object won't render
No pixelRatio cap - Use Math.min(window.devicePixelRatio, 2)

References

references/mobile-touch.md - Touch events, mobile optimization
references/advanced-topics.md - GLTF loading, shaders, post-processing

Version Note: Three.js r170 (January 2025). Check threejs.org for updates.

Related Skills

shiqkuangsan/tooyoung:codex-features

development

VerifiedTrustedCommunity

Show OpenAI Codex release highlights in Chinese. Fetch GitHub release notes, summarize feature-level changes, skip bug-fix/chore noise by default, and append a mandatory highlights section. Trigger words: Codex updates, Codex features, Codex 新功能, Codex 更新, OpenAI Codex releases

16SKILL.mdUpdated May 23, 2026

shiqkuangsan/tooyoung:codex-features

shiqkuangsan/tooyoung:cc-session-cleaner

development

VerifiedTrustedCommunity

清理当前项目的 Claude Code 会话：列出 ~/.claude/projects 下最近会话，按序号或 sessionId 选择，经二次确认后删除对应 .jsonl 与同名附件目录。Trigger words: 清理 cc 会话, 删除历史会话, cc resume 会话, clean cc sessions, cc session cleaner

15SKILL.mdUpdated May 16, 2026

shiqkuangsan/tooyoung:cc-session-cleaner

shiqkuangsan/tooyoung:persona-define

development

VerifiedTrustedCommunity

为 Claude Code 定义个性化身份风格（人设）。触发词：定义人设、创建身份、persona、角色设定、CLAUDE.local.md

15SKILL.mdUpdated Apr 25, 2026

shiqkuangsan/tooyoung:persona-define

shiqkuangsan/tooyoung:openclash-merger

data-ai

VerifiedTrustedCommunity

将 vless+reality 等新协议配置转换为带 GEOSITE 规则的配置文件，支持 11 地区分组 + AI/媒体/游戏分流，可直接上传 OpenClash 使用。触发词：合并 OpenClash、转换订阅、Clash 配置

15SKILL.mdUpdated Apr 25, 2026

shiqkuangsan/tooyoung:openclash-merger

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/shiqkuangsan/oh-my-daily-skills.git

# Copy into Claude Code skills folder (global)
cp -r oh-my-daily-skills/skills/threejs-builder ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

shiqkuangsan/oh-my-daily-skills

15 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT