[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70MN0NCRYMCR48P05QBECJS":3,"skill-same:01M70MN0NCRYMCR48P05QBECJS":67},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":46,"repositoryHtmlUrl":47,"repositoryHomepageUrl":48,"ownerHtmlUrl":49,"ownerBlogUrl":50,"ownerDescription":51,"updatedAt":52,"install":53,"resources":66},"01M70MN0NCRYMCR48P05QBECJS","three",null,"Three.js and WebGL adapter patterns for HyperFrames. Use when creating deterministic Three.js scenes, WebGL canvas layers, AnimationMixer timelines, camera motion, shader-driven visuals, or canvas renders that respond to HyperFrames hf-seek events.","shengdabai\u002FTony-Claude-Code-Skills","shengdabai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F116417419?v=4","01M70F6D2WY5PQV5A92BKYJQEW","Tony Sheng","01M70F6D3GAAAYZ5H4CC1G8VXM",3,"MIT","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fhyperframes-three\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"use","events","camera","js","patterns","webgl","hyperframes","hf","shader","when","scenes","motion","visuals","adapter","canvas","respond","layers","for","deterministic","2026-11-10 10:12:30",false,"---\nname: three\ndescription: Three.js and WebGL adapter patterns for HyperFrames. Use when creating deterministic Three.js scenes, WebGL canvas layers, AnimationMixer timelines, camera motion, shader-driven visuals, or canvas renders that respond to HyperFrames hf-seek events.\n---\n\n# Three.js for HyperFrames\n\nHyperFrames supports Three.js through its `three` runtime adapter. The adapter does not own your scene. It publishes HyperFrames time and dispatches a seek event so your composition can render the exact frame.\n\n## Contract\n\n- Create the scene, camera, renderer, materials, and assets synchronously when possible.\n- Render from HyperFrames time, not wall-clock time.\n- Listen for the `hf-seek` event and render exactly that time.\n- Load models, textures, and HDRIs before render-critical seeking. Do not fetch them at seek time.\n- Avoid `requestAnimationFrame` or `renderer.setAnimationLoop` as the source of truth for render-critical motion.\n\nThe adapter sets `window.__hfThreeTime` and dispatches `new CustomEvent(\"hf-seek\", { detail: { time } })` on each seek.\n\n## Basic Pattern\n\n```html\n\u003Ccanvas id=\"three-layer\">\u003C\u002Fcanvas>\n\u003Cscript type=\"module\">\n  import * as THREE from \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fthree@0.181.2\u002F+esm\";\n\n  const canvas = document.getElementById(\"three-layer\");\n  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });\n  \u002F\u002F Match these to your composition's frame size.\n  renderer.setSize(1920, 1080, false);\n  renderer.setPixelRatio(1);\n\n  const scene = new THREE.Scene();\n  const camera = new THREE.PerspectiveCamera(35, 1920 \u002F 1080, 0.1, 100);\n  camera.position.set(0, 0, 6);\n\n  const mesh = new THREE.Mesh(\n    new THREE.IcosahedronGeometry(1.4, 4),\n    new THREE.MeshStandardMaterial({ color: 0x64d2ff, roughness: 0.38 }),\n  );\n  scene.add(mesh);\n  scene.add(new THREE.HemisphereLight(0xffffff, 0x223344, 2));\n\n  function renderAt(time) {\n    mesh.rotation.y = time * 0.7;\n    mesh.rotation.x = Math.sin(time * 0.6) * 0.16;\n    renderer.render(scene, camera);\n  }\n\n  window.addEventListener(\"hf-seek\", (event) => {\n    renderAt(event.detail.time);\n  });\n\n  renderAt(window.__hfThreeTime || 0);\n\u003C\u002Fscript>\n```\n\n```css\n#three-layer {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n```\n\n## AnimationMixer Pattern\n\nFor GLTF or authored clip animation, seek the mixer directly:\n\n```js\nfunction renderAt(time) {\n  mixer.setTime(time);\n  renderer.render(scene, camera);\n}\n```\n\nIf several mixers exist, seek all of them from the same `time`.\n\n## Good Uses\n\n- Deterministic 3D objects, product spins, particles with seeded data, and shader plates.\n- Camera moves derived from `time`.\n- GLTF animation clips when assets are local and loaded before validation completes.\n\n## Avoid\n\n- Using `Date.now()`, `performance.now()`, or clock deltas to update scene state.\n- Leaving render-critical work inside a free-running animation loop.\n- Loading remote models or textures at render time.\n- Device-pixel-ratio dependent output. Pin renderer size and pixel ratio for video renders.\n- Post-processing passes that depend on previous frame history unless you can reconstruct state from time.\n\n## Validation\n\nAfter editing a Three.js composition:\n\n```bash\nnpx hyperframes lint\nnpx hyperframes validate\n```\n\n## Credits And References\n\n- HyperFrames adapter source: `packages\u002Fcore\u002Fsrc\u002Fruntime\u002Fadapters\u002Fthree.ts`.\n- Three.js `WebGLRenderer` docs: https:\u002F\u002Fthreejs.org\u002Fdocs\u002Fpages\u002FWebGLRenderer.html\n- Three.js `AnimationMixer.setTime()` docs: https:\u002F\u002Fthreejs.org\u002Fdocs\u002Fpages\u002FAnimationMixer.html\n","# Three.js for HyperFrames\n\nHyperFrames supports Three.js through its `three` runtime adapter. The adapter does not own your scene. It publishes HyperFrames time and dispatches a seek event so your composition can render the exact frame.\n\n## Contract\n\n- Create the scene, camera, renderer, materials, and assets synchronously when possible.\n- Render from HyperFrames time, not wall-clock time.\n- Listen for the `hf-seek` event and render exactly that time.\n- Load models, textures, and HDRIs before render-critical seeking. Do not fetch them at seek time.\n- Avoid `requestAnimationFrame` or `renderer.setAnimationLoop` as the source of truth for render-critical motion.\n\nThe adapter sets `window.__hfThreeTime` and dispatches `new CustomEvent(\"hf-seek\", { detail: { time } })` on each seek.\n\n## Basic Pattern\n\n```html\n\u003Ccanvas id=\"three-layer\">\u003C\u002Fcanvas>\n\u003Cscript type=\"module\">\n  import * as THREE from \"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fthree@0.181.2\u002F+esm\";\n\n  const canvas = document.getElementById(\"three-layer\");\n  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });\n  \u002F\u002F Match these to your composition's frame size.\n  renderer.setSize(1920, 1080, false);\n  renderer.setPixelRatio(1);\n\n  const scene = new THREE.Scene();\n  const camera = new THREE.PerspectiveCamera(35, 1920 \u002F 1080, 0.1, 100);\n  camera.position.set(0, 0, 6);\n\n  const mesh = new THREE.Mesh(\n    new THREE.IcosahedronGeometry(1.4, 4),\n    new THREE.MeshStandardMaterial({ color: 0x64d2ff, roughness: 0.38 }),\n  );\n  scene.add(mesh);\n  scene.add(new THREE.HemisphereLight(0xffffff, 0x223344, 2));\n\n  function renderAt(time) {\n    mesh.rotation.y = time * 0.7;\n    mesh.rotation.x = Math.sin(time * 0.6) * 0.16;\n    renderer.render(scene, camera);\n  }\n\n  window.addEventListener(\"hf-seek\", (event) => {\n    renderAt(event.detail.time);\n  });\n\n  renderAt(window.__hfThreeTime || 0);\n\u003C\u002Fscript>\n```\n\n```css\n#three-layer {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n```\n\n## AnimationMixer Pattern\n\nFor GLTF or authored clip animation, seek the mixer directly:\n\n```js\nfunction renderAt(time) {\n  mixer.setTime(time);\n  renderer.render(scene, camera);\n}\n```\n\nIf several mixers exist, seek all of them from the same `time`.\n\n## Good Uses\n\n- Deterministic 3D objects, product spins, particles with seeded data, and shader plates.\n- Camera moves derived from `time`.\n- GLTF animation clips when assets are local and loaded before validation completes.\n\n## Avoid\n\n- Using `Date.now()`, `performance.now()`, or clock deltas to update scene state.\n- Leaving render-critical work inside a free-running animation loop.\n- Loading remote models or textures at render time.\n- Device-pixel-ratio dependent output. Pin renderer size and pixel ratio for video renders.\n- Post-processing passes that depend on previous frame history unless you can reconstruct state from time.\n\n## Validation\n\nAfter editing a Three.js composition:\n\n```bash\nnpx hyperframes lint\nnpx hyperframes validate\n```\n\n## Credits And References\n\n- HyperFrames adapter source: `packages\u002Fcore\u002Fsrc\u002Fruntime\u002Fadapters\u002Fthree.ts`.\n- Three.js `WebGLRenderer` docs: https:\u002F\u002Fthreejs.org\u002Fdocs\u002Fpages\u002FWebGLRenderer.html\n- Three.js `AnimationMixer.setTime()` docs: https:\u002F\u002Fthreejs.org\u002Fdocs\u002Fpages\u002FAnimationMixer.html\n",{"name":5,"description":7},"main","7850740bd837adb32f0a109ab2af82482196c6f2","skills\u002Fhyperframes-three",1,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills","https:\u002F\u002Fzturnsgo.com","https:\u002F\u002Fgithub.com\u002Fshengdabai","https:\u002F\u002Fzturnsgo.com\u002F","AI × education creator — producer, not consumer. Taught 6,000+ learners; shipping learning tools & daily essays with Claude Code, practicing @xiaolai's way 🥋","2026-11-01 21:28:23",{"source":8,"skillName":5,"commands":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add shengdabai\u002FTony-Claude-Code-Skills --skill three",{"tool":59,"command":60},"bunx","bunx skills add shengdabai\u002FTony-Claude-Code-Skills --skill three",{"tool":62,"command":63},"pnpm","pnpm dlx skills add shengdabai\u002FTony-Claude-Code-Skills --skill three","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fhyperframes-three\u002FSKILL.md",true,[],[68,87,121,146,168,188],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":79,"publishedAt":38},"01M70P17DAD4C1C47NPH6A96EM","xiaolai-methodology","以李笑来(Li Xiaolai)的思考方式、方法论与表达风格,为用户做全方位 1-on-1 教练指导,覆盖创业、赚钱、投资、学习、自学、读书写作、用 AI、以及人生心态与自我管理。当用户提到 \"李笑来\"、\"笑来\"、\"笑来老师\"、\"扮演李笑来\"、\"找笑来聊聊\"、\"笑来怎么看\"、\"xiaolai\"、\"把时间当作朋友\"、\"通往财富自由之路\"、\"定投改变命运\"、\"韭菜的自我修养\"、\"自学是门手艺\"、\"让时间陪你慢慢变富\"、\"七年就是一辈子\"、\"元认知\"、\"活在未来\"、\"复利\u002F长期主义\"、\"践行\"、\"痴迷改进\"、\"个人商业模式\u002F出售时间\"、\"睡后收入\"、\"定投\"、\"财富自由\"、\"操作系统升级\"、\"最少必要知识\"、\"北极星提示词\"、\"用 AI 该怎么学\u002F思考\" 等任一触发词,或当用户带着关于创业\u002F赚钱\u002F投资\u002F学习\u002F职业\u002F重大人生决策的困惑、希望被人用笑来式的「逻辑 + 大白话 + 类比 + 重新定义 + 践行导向」来点醒和指导时,自动进入李笑来教练模式。","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fxiaolai-methodology\u002FSKILL.md",[74],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",[80,81,82,83,84,85,86],"methodology","xiaolai","xiaolai methodology","朋友","投资","writing","收入",{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":101,"publishedAt":38},"01M70P13NB9YP7ACJR1S861CDS","zread","Produce and consume a wiki-style knowledge base for a code repository via the `zread` CLI and its on-disk output under `.\u002F.zread\u002Fwiki\u002F`. Use this skill whenever the user wants to understand, onboard onto, explore, summarize, map, or get an overview of an unfamiliar codebase; asks for architecture docs, a project wiki, a repo walkthrough, module\u002Fpackage explanations, or \"what does this repo do\"; wants to generate, regenerate, resume, browse, or serve code documentation locally; or mentions zread \u002F zread.ai directly. Also use it proactively before diving into a large unknown repo — if `.\u002F.zread\u002Fwiki\u002Fcurrent` exists, read the generated pages instead of crawling source file-by-file; if it doesn't, consider offering to run `zread generate`. The trigger is the intent (understand a codebase through generated docs), not the literal word \"zread\".","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fzread\u002FSKILL.md",[93,96],{"categoryNo":94,"categoryName":95,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":97,"categoryName":98,"taxonomyType":99,"taxonomyTypeDesc":100},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[89,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120],"knowledge","wiki","explore","walkthrough","project","get","knowledge base","run","generate","intent","cli","map","documentation","project wiki","disk","architecture","code","unknown","generated",{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":131,"publishedAt":38},"01M70P10S4SWMZQ8BJAFBFDRW3","youtube","Launch the YouTube Creator Agent to auto-generate videos.\nUse when: user types \u002Fyoutube, wants to create YouTube videos,\ngenerate video content, or upload to YouTube.\nKeywords: youtube, video, 视频, 创作视频, 发布视频","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[127,128],{"categoryNo":94,"categoryName":95,"taxonomyType":77,"taxonomyTypeDesc":78},{"categoryNo":129,"categoryName":130,"taxonomyType":99,"taxonomyTypeDesc":100},"01JBSEEDCAT000000000000036","内容创作者",[123,132,133,134,135,136,137,138,110,139,140,141,28,19,142,143,144,145],"user","content","视频","creator","generate video","videos","launch","video content","create","upload","auto","types","Video","创作",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":38},"01M70P0YE95D8BACZCGV8BK90K","youtube-script-sync","Sync, update, or optimize Tony's GetNote knowledge base `Youtube视频逐字稿` by turning each parent recording or first-person idea note into an idempotent child note containing a directly recordable YouTube long-video or Shorts script. Use when the user says “更新\u002F同步\u002F优化 Youtube视频逐字稿知识库”, or says “更新\u002F同步\u002F优化该知识库” while this knowledge base is the active context.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-sync\u002FSKILL.md",[152],{"categoryNo":94,"categoryName":95,"taxonomyType":77,"taxonomyTypeDesc":78},[154,155,123,156,157,144,158,159,160,161,162,163,164,165,108,166,28,19,102,167],"sync","script","youtube script sync","recording","shorts","first","base","person","update","active","child","optimize","idempotent","long",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":178,"publishedAt":38},"01M70P0WMV5XT0EEC0N445PW07","writing-skills","How to write SKILL.md files that trigger reliably and teach effectively. Use when creating, improving, or reviewing Claude Code skills.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-skills\u002FSKILL.md",[174,175,176,177],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},{"categoryNo":94,"categoryName":95,"taxonomyType":77,"taxonomyTypeDesc":78},{"categoryNo":97,"categoryName":98,"taxonomyType":99,"taxonomyTypeDesc":100},{"categoryNo":129,"categoryName":130,"taxonomyType":99,"taxonomyTypeDesc":100},[179,85,180,181,182,183,118,28,19,184,185,186,187],"writing skills","how","teach","write skill","write","claude code skills","files","how to","trigger",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":196,"publishedAt":38},"01M70P0SJFR4YVJQBGMHKGSKXT","writing-rules","How to write .claude\u002Frules\u002F files that Claude actually follows. Use when creating, improving, or reviewing project rules.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-rules\u002FSKILL.md",[194,195],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},{"categoryNo":129,"categoryName":130,"taxonomyType":99,"taxonomyTypeDesc":100},[197,85,198,106,199,185,28,180,183,19,186],"Rules","writing rules","project rules"]