[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M714P5HBEBGPBEWW0NG8SH3P":3,"skill-same:01M714P5HBEBGPBEWW0NG8SH3P":96},{"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":44,"commitSha":45,"skillDirectory":46,"forksCount":14,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M714P5HBEBGPBEWW0NG8SH3P","spline-3d-integration",null,"Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"spline","integration","3D","spline 3d integration","use","2026","when","embedding","control","runtime","scenes","community","design","interactive","projects","api","react","web","safe","2026-11-10 10:12:30",false,"---\nname: spline-3d-integration\ndescription: \"Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.\"\nrisk: safe\nsource: community\ndate_added: \"2026-03-07\"\n---\n\n# Spline 3D Integration Skill\n\nMaster guide for embedding interactive 3D scenes from [Spline.design](https:\u002F\u002Fspline.design) into web projects.\n\n---\n\n## Quick Reference\n\n| Task                              | Guide                                                          |\n| --------------------------------- | -------------------------------------------------------------- |\n| Vanilla HTML\u002FJS embed             | [guides\u002FVANILLA_INTEGRATION.md](guides\u002FVANILLA_INTEGRATION.md) |\n| React \u002F Next.js \u002F Vue embed       | [guides\u002FREACT_INTEGRATION.md](guides\u002FREACT_INTEGRATION.md)     |\n| Performance & mobile optimization | [guides\u002FPERFORMANCE.md](guides\u002FPERFORMANCE.md)                 |\n| Debugging & common problems       | [guides\u002FCOMMON_PROBLEMS.md](guides\u002FCOMMON_PROBLEMS.md)         |\n\n## Working Examples\n\n| File                                                                   | What it shows                                            |\n| ---------------------------------------------------------------------- | -------------------------------------------------------- |\n| [examples\u002Fvanilla-embed.html](examples\u002Fvanilla-embed.html)             | Minimal vanilla JS embed with background + fallback      |\n| [examples\u002Freact-spline-wrapper.tsx](examples\u002Freact-spline-wrapper.tsx) | Production-ready lazy-loaded React wrapper with fallback |\n| [examples\u002Finteractive-scene.tsx](examples\u002Finteractive-scene.tsx)       | Full interactive example: events, object control, camera |\n\n---\n\n## What Is Spline?\n\nSpline is a browser-based 3D design tool — think Figma, but for 3D. Designers create interactive 3D scenes (objects, materials, animations, physics, events) in the Spline editor, then export them for the web via a hosted `.splinecode` file URL.\n\n---\n\n## STEP 1 — Identify the Stack\n\nBefore writing any code, check the existing project files to determine the framework.\n\n| Stack                          | Method                                                   |\n| ------------------------------ | -------------------------------------------------------- |\n| Vanilla HTML\u002FJS                | `\u003Cspline-viewer>` web component OR `@splinetool\u002Fruntime` |\n| React \u002F Vite                   | `@splinetool\u002Freact-spline`                               |\n| Next.js                        | `@splinetool\u002Freact-spline\u002Fnext`                          |\n| Vue                            | `@splinetool\u002Fvue-spline`                                 |\n| iframe (Webflow, Notion, etc.) | Public URL iframe                                        |\n\n---\n\n## STEP 2 — Get the Scene URL\n\nThe user must go to their Spline editor → **Export** → **Code Export** → copy the `prod.spline.design` URL:\n\n```\nhttps:\u002F\u002Fprod.spline.design\u002FXXXXXXXXXXXXXXXX\u002Fscene.splinecode\n```\n\n**Before copying the URL, tell the user to check Play Settings:**\n\n- ✅ Toggle **Hide Background** ON if the site has a dark or custom background\n- ✅ Toggle **Hide Spline Logo** ON if they have a paid plan\n- ✅ Set **Geometry Quality** to Performance for faster load\n- ✅ Disable **Page Scroll**, **Zoom**, **Pan** if those aren't needed (reduces hijacking risk)\n- ✅ Click **Generate Draft** or **Promote to Production** after any settings change — the URL does NOT auto-update\n\n---\n\n## STEP 3 — Read the Relevant Guide\n\nOnce you have the stack and the scene URL, read the appropriate guide file above and follow its instructions. Always read COMMON_PROBLEMS.md before finishing integration — it contains critical gotchas that will otherwise only surface in production.\n\n---\n\n## Strict Rules\n\n- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI\u002FUX. DO NOT build in common, generic, or safe styles. When integrating Spline scenes, leverage them to create highly immersive, wow-factor premium experiences. Combine them thoughtfully with typography and layout.\n","# Spline 3D Integration Skill\n\nMaster guide for embedding interactive 3D scenes from [Spline.design](https:\u002F\u002Fspline.design) into web projects.\n\n---\n\n## Quick Reference\n\n| Task                              | Guide                                                          |\n| --------------------------------- | -------------------------------------------------------------- |\n| Vanilla HTML\u002FJS embed             | [guides\u002FVANILLA_INTEGRATION.md](guides\u002FVANILLA_INTEGRATION.md) |\n| React \u002F Next.js \u002F Vue embed       | [guides\u002FREACT_INTEGRATION.md](guides\u002FREACT_INTEGRATION.md)     |\n| Performance & mobile optimization | [guides\u002FPERFORMANCE.md](guides\u002FPERFORMANCE.md)                 |\n| Debugging & common problems       | [guides\u002FCOMMON_PROBLEMS.md](guides\u002FCOMMON_PROBLEMS.md)         |\n\n## Working Examples\n\n| File                                                                   | What it shows                                            |\n| ---------------------------------------------------------------------- | -------------------------------------------------------- |\n| [examples\u002Fvanilla-embed.html](examples\u002Fvanilla-embed.html)             | Minimal vanilla JS embed with background + fallback      |\n| [examples\u002Freact-spline-wrapper.tsx](examples\u002Freact-spline-wrapper.tsx) | Production-ready lazy-loaded React wrapper with fallback |\n| [examples\u002Finteractive-scene.tsx](examples\u002Finteractive-scene.tsx)       | Full interactive example: events, object control, camera |\n\n---\n\n## What Is Spline?\n\nSpline is a browser-based 3D design tool — think Figma, but for 3D. Designers create interactive 3D scenes (objects, materials, animations, physics, events) in the Spline editor, then export them for the web via a hosted `.splinecode` file URL.\n\n---\n\n## STEP 1 — Identify the Stack\n\nBefore writing any code, check the existing project files to determine the framework.\n\n| Stack                          | Method                                                   |\n| ------------------------------ | -------------------------------------------------------- |\n| Vanilla HTML\u002FJS                | `\u003Cspline-viewer>` web component OR `@splinetool\u002Fruntime` |\n| React \u002F Vite                   | `@splinetool\u002Freact-spline`                               |\n| Next.js                        | `@splinetool\u002Freact-spline\u002Fnext`                          |\n| Vue                            | `@splinetool\u002Fvue-spline`                                 |\n| iframe (Webflow, Notion, etc.) | Public URL iframe                                        |\n\n---\n\n## STEP 2 — Get the Scene URL\n\nThe user must go to their Spline editor → **Export** → **Code Export** → copy the `prod.spline.design` URL:\n\n```\nhttps:\u002F\u002Fprod.spline.design\u002FXXXXXXXXXXXXXXXX\u002Fscene.splinecode\n```\n\n**Before copying the URL, tell the user to check Play Settings:**\n\n- ✅ Toggle **Hide Background** ON if the site has a dark or custom background\n- ✅ Toggle **Hide Spline Logo** ON if they have a paid plan\n- ✅ Set **Geometry Quality** to Performance for faster load\n- ✅ Disable **Page Scroll**, **Zoom**, **Pan** if those aren't needed (reduces hijacking risk)\n- ✅ Click **Generate Draft** or **Promote to Production** after any settings change — the URL does NOT auto-update\n\n---\n\n## STEP 3 — Read the Relevant Guide\n\nOnce you have the stack and the scene URL, read the appropriate guide file above and follow its instructions. Always read COMMON_PROBLEMS.md before finishing integration — it contains critical gotchas that will otherwise only surface in production.\n\n---\n\n## Strict Rules\n\n- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI\u002FUX. DO NOT build in common, generic, or safe styles. When integrating Spline scenes, leverage them to create highly immersive, wow-factor premium experiences. Combine them thoughtfully with typography and layout.\n",{"name":5,"risk":37,"source":30,"date_added":43,"description":7},"2026-03-07","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcopilot\u002Fspline-3d-integration","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill spline-3d-integration",{"tool":56,"command":57},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill spline-3d-integration",{"tool":59,"command":60},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill spline-3d-integration","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002FSKILL.md",true,[64,70,74,80,84,88,92],{"path":65,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":68,"sourceHtmlUrl":69},"examples\u002Finteractive-scene.tsx","OTHER","其他",5934,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002Fexamples\u002Finteractive-scene.tsx",{"path":71,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":72,"sourceHtmlUrl":73},"examples\u002Freact-spline-wrapper.tsx",3562,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002Fexamples\u002Freact-spline-wrapper.tsx",{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"examples\u002Fvanilla-embed.html","REFERENCE","参考文档",4297,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002Fexamples\u002Fvanilla-embed.html",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"guides\u002FCOMMON_PROBLEMS.md",8963,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002Fguides\u002FCOMMON_PROBLEMS.md",{"path":85,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":86,"sourceHtmlUrl":87},"guides\u002FPERFORMANCE.md",5175,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002Fguides\u002FPERFORMANCE.md",{"path":89,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":90,"sourceHtmlUrl":91},"guides\u002FREACT_INTEGRATION.md",4870,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002Fguides\u002FREACT_INTEGRATION.md",{"path":93,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":94,"sourceHtmlUrl":95},"guides\u002FVANILLA_INTEGRATION.md",5289,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fspline-3d-integration\u002Fguides\u002FVANILLA_INTEGRATION.md",[97,119,143,153,166,185],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":108,"publishedAt":38},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[103],{"categoryNo":104,"categoryName":105,"taxonomyType":106,"taxonomyTypeDesc":107},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[109,110,111,112,113,31,114,115,36,116,117,118],"wechat search","wechat","search","capabilities","openclaw","web search","compliance","official","fetch","with",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":125,"publishedAt":38},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[126,127,128,129,130,131,111,132,133,134,135,25,136,137,138,139,140,141,142,34],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","brew","live","data","google","install","read","across",{"skillNo":144,"name":145,"nameZh":6,"description":146,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":147,"categories":148,"keywords":149,"publishedAt":38},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[150,151,126,136,137,138,139,130,111,141,152,142,34,25,134,133,132,140,131,129],"trend radar","radar","pulse",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":159,"publishedAt":38},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[160,161,162,163,164,165],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":177,"publishedAt":38},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[172],{"categoryNo":173,"categoryName":174,"taxonomyType":175,"taxonomyTypeDesc":176},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[168,36,178,179,180,118,136,181,182,183,128,184,140],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":191,"publishedAt":38},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[187,192,193,194,140,195,182,196,197,27,198,199],"status","play","go","latest","github","discover","cmd","volume"]