[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71K6XMVREEPR5YGZQ9KXBZ9":3,"skill-same:01M71K6XMVREEPR5YGZQ9KXBZ9":77},{"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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M71K6XMVREEPR5YGZQ9KXBZ9","scroll-animation",null,"Use when building scroll-driven animations — GSAP ScrollTrigger, CSS scroll-timeline, frame sequences, parallax, pin\u002Fscrub effects. Covers Apple-style scroll playback, progress-linked animations, and smooth scroll integration.","KeiSeiLab\u002FKeiSeiKit","KeiSeiLab","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F283315582?v=4","01M71K2EW81JRFHSGF0T844B32","KeiSei Lab","01M71K2EWXTB52KWC65E55S6M2",7,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fscroll-animation\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"scroll animation","scroll","Animation","sequence","sequences","next","native","progress","astro","apple","react","gsap scrolltrigger","scrub","when","effects","false","svelte","auto","auto-detect","css","2026-11-10 10:12:30",false,"---\nname: scroll-animation\ndescription: Use when building scroll-driven animations — GSAP ScrollTrigger, CSS scroll-timeline, frame sequences, parallax, pin\u002Fscrub effects. Covers Apple-style scroll playback, progress-linked animations, and smooth scroll integration.\narguments:\n  - name: technique\n    description: \"Technique: gsap, css-native, frame-sequence, parallax, hybrid (auto-detect if omitted)\"\n    required: false\n  - name: framework\n    description: \"Framework: react, next, astro, vue, svelte, vanilla (auto-detect if omitted)\"\n    required: false\n---\n\n# Scroll Animation Skill\n\n## Decision Matrix — Pick Technique\n\n| Need | Technique | Why |\n|------|-----------|-----|\n| Pin + scrub + snap | GSAP ScrollTrigger | Most mature, free since Webflow acquisition |\n| Simple fade\u002Fslide on scroll | CSS `animation-timeline` | Zero JS, native performance |\n| Apple-style frame playback | Canvas frame sequence | Smoothest result for product reveals |\n| Parallax layers | CSS or GSAP | CSS for simple, GSAP for complex |\n| Smooth scroll feel | Lenis + GSAP | Industry standard combo |\n\n---\n\n## 1. GSAP ScrollTrigger\n\n**License:** 100% FREE including all plugins\n**Install:** `npm i gsap`\n\n### Core API\n\n```js\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\ngsap.registerPlugin(ScrollTrigger);\n\n\u002F\u002F Pin + Scrub\ngsap.to(\".hero-content\", {\n  y: -100,\n  opacity: 0,\n  scrollTrigger: {\n    trigger: \".hero\",\n    start: \"top top\",\n    end: \"bottom top\",\n    pin: true,\n    scrub: 1,\n    snap: { snapTo: 1 \u002F 4, duration: 0.3, ease: \"power1.inOut\" }\n  }\n});\n\n\u002F\u002F Batch — stagger elements entering viewport\nScrollTrigger.batch(\".card\", {\n  onEnter: (elements) => {\n    gsap.to(elements, { opacity: 1, y: 0, stagger: 0.1 });\n  },\n  start: \"top 85%\"\n});\n```\n\n### React Integration (useGSAP hook)\n\n```jsx\nimport { useGSAP } from \"@gsap\u002Freact\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nfunction Section({ children }) {\n  const container = useRef(null);\n\n  useGSAP(() => {\n    gsap.from(\".animate-in\", {\n      y: 50,\n      opacity: 0,\n      stagger: 0.2,\n      scrollTrigger: { trigger: container.current, start: \"top 80%\" }\n    });\n  }, { scope: container });\n\n  return \u003Csection ref={container}>{children}\u003C\u002Fsection>;\n}\n```\n\n**Key:** `useGSAP` = drop-in for `useEffect`, auto-cleanup via `gsap.context()`.\n\n### Astro Integration\n\n```astro\n\u003Csection id=\"scroll-section\">\n  \u003Cdiv class=\"pin-target\">Content\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cscript>\n  import gsap from \"gsap\";\n  import { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\n  gsap.registerPlugin(ScrollTrigger);\n\n  gsap.to(\".pin-target\", {\n    x: 500,\n    scrollTrigger: { trigger: \"#scroll-section\", pin: true, scrub: true }\n  });\n\u003C\u002Fscript>\n```\n\n### Performance Best Practices\n\n- Use `will-change: transform` on pinned elements\n- Prefer `transform` and `opacity` — GPU-composited, no layout recalc\n- `scrub: 1` (or higher) smooths jank vs `scrub: true` (instant)\n- `invalidateOnRefresh: true` for responsive layouts\n- Call `ScrollTrigger.refresh()` after dynamic content loads\n- Avoid animating `width`, `height`, `top`, `left` — triggers reflow\n\n---\n\n## 2. CSS Scroll-Driven Animations (Native)\n\n### Scroll Progress Timeline\n\n```css\n@keyframes fade-in {\n  from { opacity: 0; transform: translateY(30px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.animate-on-scroll {\n  animation: fade-in linear both;\n  animation-timeline: scroll();\n  animation-range: entry 0% entry 100%;\n}\n```\n\n### View Progress Timeline\n\n```css\n.reveal {\n  animation: fade-in linear both;\n  animation-timeline: view();\n  animation-range: entry 25% cover 50%;\n}\n```\n\n### Progressive Enhancement\n\n```css\n@supports (animation-timeline: scroll()) {\n  .animate { animation-timeline: scroll(); }\n}\n\u002F* Fallback: use IntersectionObserver + classList toggle *\u002F\n```\n\n### What CSS Can Replace from GSAP\n\n| Feature | CSS Native | Still Need GSAP |\n|---------|-----------|-----------------|\n| Fade\u002Fslide on scroll | Yes | No |\n| Progress-linked animation | Yes | No |\n| View-enter\u002Fexit triggers | Yes | No |\n| Pin element | No | Yes |\n| Snap to sections | No (scroll-snap is separate) | Yes (integrated) |\n| Batch stagger | No | Yes |\n| Timeline sequencing | Limited | Yes |\n| Complex easing curves | Limited | Yes |\n| JS callbacks on progress | No | Yes |\n\n**Rule of thumb:** CSS for simple reveal animations. GSAP for anything with pin, snap, stagger, or JS logic.\n\n---\n\n## 3. Lenis Smooth Scroll\n\n**Install:** `npm i lenis`\n**Bundle:** ~14KB min+gzip (no dependencies)\n\n```js\nimport Lenis from \"lenis\";\n\nconst lenis = new Lenis({\n  duration: 1.2,\n  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n  orientation: \"vertical\",\n  smoothWheel: true,\n});\n\n\u002F\u002F Connect to GSAP ticker for sync\ngsap.ticker.add((time) => { lenis.raf(time * 1000); });\ngsap.ticker.lagSmoothing(0);\n\n\u002F\u002F Connect to ScrollTrigger\nlenis.on(\"scroll\", ScrollTrigger.update);\n```\n\n**When to use:** Agency-style smooth scroll feel. Pairs with GSAP ScrollTrigger.\n**When NOT to use:** Content-heavy sites, accessibility-first projects.\n\n---\n\n## 4. Frame Sequence on Scroll (Apple-Style)\n\n### Pipeline\n\n```\nVideo (MP4\u002FMOV)\n  → FFmpeg frame extraction (PNG)\n  → Convert to WebP (90% size reduction vs PNG)\n  → Canvas playback synced to scroll\n```\n\n### FFmpeg Extraction\n\n```bash\nffmpeg -i source.mp4 -vf \"fps=30,scale=1280:720\" frames\u002Fframe_%04d.png\nfor f in frames\u002F*.png; do cwebp -q 80 \"$f\" -o \"${f%.png}.webp\"; done\n```\n\n### Optimal Parameters\n\n| Parameter | Desktop | Mobile |\n|-----------|---------|--------|\n| Frame count | 120-180 | 60-90 |\n| Resolution | 1920x1080 | 960x540 |\n| Format | WebP q80 | WebP q75 |\n| Total budget | 2-4 MB | 1-2 MB |\n\n### Canvas Implementation\n\n```js\nconst canvas = document.getElementById(\"sequence-canvas\");\nconst ctx = canvas.getContext(\"2d\");\nconst frameCount = 150;\nconst frames = [];\n\nfunction preloadFrames() {\n  for (let i = 1; i \u003C= frameCount; i++) {\n    const img = new Image();\n    img.src = `\u002Fframes\u002Fframe_${String(i).padStart(4, \"0\")}.webp`;\n    frames.push(img);\n  }\n}\n\ngsap.to({ frame: 0 }, {\n  frame: frameCount - 1,\n  snap: \"frame\",\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \"#sequence-section\", start: \"top top\", end: \"+=3000\", pin: true, scrub: 0.5,\n  },\n  onUpdate: function() {\n    const index = Math.round(this.targets()[0].frame);\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    if (frames[index]?.complete) {\n      ctx.drawImage(frames[index], 0, 0, canvas.width, canvas.height);\n    }\n  }\n});\n```\n\n### Alternative: Video Scrub\n\n```js\nconst video = document.getElementById(\"scrub-video\");\n\ngsap.to(video, {\n  currentTime: video.duration,\n  ease: \"none\",\n  scrollTrigger: { trigger: \"#video-section\", start: \"top top\", end: \"+=4000\", pin: true, scrub: true }\n});\n```\n\n**Tradeoff:** Video scrub = smaller payload, less smooth on mobile. Frame sequence = more bytes, smoother everywhere.\n\n---\n\n## Accessibility\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n```js\nconst prefersReduced = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\nif (prefersReduced) { ScrollTrigger.getAll().forEach(st => st.kill()); }\n```\n\n---\n\n## Workflow\n\n1. **Define scroll sections** — wireframe which content pins, reveals, or plays\n2. **Pick technique** — use Decision Matrix above\n3. **Implement with GSAP** — pin\u002Fscrub\u002Fsnap for complex, CSS for simple reveals\n4. **Add Lenis** — only if smooth scroll feel is required\n5. **Test performance** — Chrome DevTools Performance panel, aim for \u003C16.6ms\u002Fframe\n6. **Add a11y** — `prefers-reduced-motion`, keyboard nav still works\n7. **Test mobile** — reduce frame counts, disable heavy effects on low-end\n","# Scroll Animation Skill\n\n## Decision Matrix — Pick Technique\n\n| Need | Technique | Why |\n|------|-----------|-----|\n| Pin + scrub + snap | GSAP ScrollTrigger | Most mature, free since Webflow acquisition |\n| Simple fade\u002Fslide on scroll | CSS `animation-timeline` | Zero JS, native performance |\n| Apple-style frame playback | Canvas frame sequence | Smoothest result for product reveals |\n| Parallax layers | CSS or GSAP | CSS for simple, GSAP for complex |\n| Smooth scroll feel | Lenis + GSAP | Industry standard combo |\n\n---\n\n## 1. GSAP ScrollTrigger\n\n**License:** 100% FREE including all plugins\n**Install:** `npm i gsap`\n\n### Core API\n\n```js\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\ngsap.registerPlugin(ScrollTrigger);\n\n\u002F\u002F Pin + Scrub\ngsap.to(\".hero-content\", {\n  y: -100,\n  opacity: 0,\n  scrollTrigger: {\n    trigger: \".hero\",\n    start: \"top top\",\n    end: \"bottom top\",\n    pin: true,\n    scrub: 1,\n    snap: { snapTo: 1 \u002F 4, duration: 0.3, ease: \"power1.inOut\" }\n  }\n});\n\n\u002F\u002F Batch — stagger elements entering viewport\nScrollTrigger.batch(\".card\", {\n  onEnter: (elements) => {\n    gsap.to(elements, { opacity: 1, y: 0, stagger: 0.1 });\n  },\n  start: \"top 85%\"\n});\n```\n\n### React Integration (useGSAP hook)\n\n```jsx\nimport { useGSAP } from \"@gsap\u002Freact\";\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\n\ngsap.registerPlugin(ScrollTrigger);\n\nfunction Section({ children }) {\n  const container = useRef(null);\n\n  useGSAP(() => {\n    gsap.from(\".animate-in\", {\n      y: 50,\n      opacity: 0,\n      stagger: 0.2,\n      scrollTrigger: { trigger: container.current, start: \"top 80%\" }\n    });\n  }, { scope: container });\n\n  return \u003Csection ref={container}>{children}\u003C\u002Fsection>;\n}\n```\n\n**Key:** `useGSAP` = drop-in for `useEffect`, auto-cleanup via `gsap.context()`.\n\n### Astro Integration\n\n```astro\n\u003Csection id=\"scroll-section\">\n  \u003Cdiv class=\"pin-target\">Content\u003C\u002Fdiv>\n\u003C\u002Fsection>\n\n\u003Cscript>\n  import gsap from \"gsap\";\n  import { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\n  gsap.registerPlugin(ScrollTrigger);\n\n  gsap.to(\".pin-target\", {\n    x: 500,\n    scrollTrigger: { trigger: \"#scroll-section\", pin: true, scrub: true }\n  });\n\u003C\u002Fscript>\n```\n\n### Performance Best Practices\n\n- Use `will-change: transform` on pinned elements\n- Prefer `transform` and `opacity` — GPU-composited, no layout recalc\n- `scrub: 1` (or higher) smooths jank vs `scrub: true` (instant)\n- `invalidateOnRefresh: true` for responsive layouts\n- Call `ScrollTrigger.refresh()` after dynamic content loads\n- Avoid animating `width`, `height`, `top`, `left` — triggers reflow\n\n---\n\n## 2. CSS Scroll-Driven Animations (Native)\n\n### Scroll Progress Timeline\n\n```css\n@keyframes fade-in {\n  from { opacity: 0; transform: translateY(30px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.animate-on-scroll {\n  animation: fade-in linear both;\n  animation-timeline: scroll();\n  animation-range: entry 0% entry 100%;\n}\n```\n\n### View Progress Timeline\n\n```css\n.reveal {\n  animation: fade-in linear both;\n  animation-timeline: view();\n  animation-range: entry 25% cover 50%;\n}\n```\n\n### Progressive Enhancement\n\n```css\n@supports (animation-timeline: scroll()) {\n  .animate { animation-timeline: scroll(); }\n}\n\u002F* Fallback: use IntersectionObserver + classList toggle *\u002F\n```\n\n### What CSS Can Replace from GSAP\n\n| Feature | CSS Native | Still Need GSAP |\n|---------|-----------|-----------------|\n| Fade\u002Fslide on scroll | Yes | No |\n| Progress-linked animation | Yes | No |\n| View-enter\u002Fexit triggers | Yes | No |\n| Pin element | No | Yes |\n| Snap to sections | No (scroll-snap is separate) | Yes (integrated) |\n| Batch stagger | No | Yes |\n| Timeline sequencing | Limited | Yes |\n| Complex easing curves | Limited | Yes |\n| JS callbacks on progress | No | Yes |\n\n**Rule of thumb:** CSS for simple reveal animations. GSAP for anything with pin, snap, stagger, or JS logic.\n\n---\n\n## 3. Lenis Smooth Scroll\n\n**Install:** `npm i lenis`\n**Bundle:** ~14KB min+gzip (no dependencies)\n\n```js\nimport Lenis from \"lenis\";\n\nconst lenis = new Lenis({\n  duration: 1.2,\n  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n  orientation: \"vertical\",\n  smoothWheel: true,\n});\n\n\u002F\u002F Connect to GSAP ticker for sync\ngsap.ticker.add((time) => { lenis.raf(time * 1000); });\ngsap.ticker.lagSmoothing(0);\n\n\u002F\u002F Connect to ScrollTrigger\nlenis.on(\"scroll\", ScrollTrigger.update);\n```\n\n**When to use:** Agency-style smooth scroll feel. Pairs with GSAP ScrollTrigger.\n**When NOT to use:** Content-heavy sites, accessibility-first projects.\n\n---\n\n## 4. Frame Sequence on Scroll (Apple-Style)\n\n### Pipeline\n\n```\nVideo (MP4\u002FMOV)\n  → FFmpeg frame extraction (PNG)\n  → Convert to WebP (90% size reduction vs PNG)\n  → Canvas playback synced to scroll\n```\n\n### FFmpeg Extraction\n\n```bash\nffmpeg -i source.mp4 -vf \"fps=30,scale=1280:720\" frames\u002Fframe_%04d.png\nfor f in frames\u002F*.png; do cwebp -q 80 \"$f\" -o \"${f%.png}.webp\"; done\n```\n\n### Optimal Parameters\n\n| Parameter | Desktop | Mobile |\n|-----------|---------|--------|\n| Frame count | 120-180 | 60-90 |\n| Resolution | 1920x1080 | 960x540 |\n| Format | WebP q80 | WebP q75 |\n| Total budget | 2-4 MB | 1-2 MB |\n\n### Canvas Implementation\n\n```js\nconst canvas = document.getElementById(\"sequence-canvas\");\nconst ctx = canvas.getContext(\"2d\");\nconst frameCount = 150;\nconst frames = [];\n\nfunction preloadFrames() {\n  for (let i = 1; i \u003C= frameCount; i++) {\n    const img = new Image();\n    img.src = `\u002Fframes\u002Fframe_${String(i).padStart(4, \"0\")}.webp`;\n    frames.push(img);\n  }\n}\n\ngsap.to({ frame: 0 }, {\n  frame: frameCount - 1,\n  snap: \"frame\",\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \"#sequence-section\", start: \"top top\", end: \"+=3000\", pin: true, scrub: 0.5,\n  },\n  onUpdate: function() {\n    const index = Math.round(this.targets()[0].frame);\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    if (frames[index]?.complete) {\n      ctx.drawImage(frames[index], 0, 0, canvas.width, canvas.height);\n    }\n  }\n});\n```\n\n### Alternative: Video Scrub\n\n```js\nconst video = document.getElementById(\"scrub-video\");\n\ngsap.to(video, {\n  currentTime: video.duration,\n  ease: \"none\",\n  scrollTrigger: { trigger: \"#video-section\", start: \"top top\", end: \"+=4000\", pin: true, scrub: true }\n});\n```\n\n**Tradeoff:** Video scrub = smaller payload, less smooth on mobile. Frame sequence = more bytes, smoother everywhere.\n\n---\n\n## Accessibility\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n```js\nconst prefersReduced = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\nif (prefersReduced) { ScrollTrigger.getAll().forEach(st => st.kill()); }\n```\n\n---\n\n## Workflow\n\n1. **Define scroll sections** — wireframe which content pins, reveals, or plays\n2. **Pick technique** — use Decision Matrix above\n3. **Implement with GSAP** — pin\u002Fscrub\u002Fsnap for complex, CSS for simple reveals\n4. **Add Lenis** — only if smooth scroll feel is required\n5. **Test performance** — Chrome DevTools Performance panel, aim for \u003C16.6ms\u002Fframe\n6. **Add a11y** — `prefers-reduced-motion`, keyboard nav still works\n7. **Test mobile** — reduce frame counts, disable heavy effects on low-end\n",{"name":5,"arguments":49,"description":7},[50,53],{"name":51,"required":45,"description":52},"technique","Technique: gsap, css-native, frame-sequence, parallax, hybrid (auto-detect if omitted)",{"name":54,"required":45,"description":55},"framework","Framework: react, next, astro, vue, svelte, vanilla (auto-detect if omitted)","main","32e85218a997294f68da27ff3dfd638196186ae5","skills\u002Fscroll-animation",8,"https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit","https:\u002F\u002Fgithub.com\u002FKeiSeiLab","2026-10-11 11:17:46",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add KeiSeiLab\u002FKeiSeiKit --skill scroll-animation",{"tool":69,"command":70},"bunx","bunx skills add KeiSeiLab\u002FKeiSeiKit --skill scroll-animation",{"tool":72,"command":73},"pnpm","pnpm dlx skills add KeiSeiLab\u002FKeiSeiKit --skill scroll-animation","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fscroll-animation\u002FSKILL.md",true,[],[78,108,132,165,190,216],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":87,"publishedAt":44},"01M71K887N78V089XR5BWT0JAV","wave-audit","3-wave parallel audit — Wave 1 discovery (4 agents), Wave 2 verification (4 agents), Wave 3 cross-optimization (1 synthesizer). Each wave runs agents in parallel. Combines security review, runtime analysis, quality check, and constructor pattern into one unified workflow with evidence grading and Go\u002FNo-Go verdict.","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fwave-audit\u002FSKILL.md",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107],"wave audit","audit","unified workflow","workflow","analysis","review","verification","security review","pattern","grading","go","security","parallel","evidence","runtime","quality check","discovery","Optimization","one","check",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":44},"01M71K85100JQS4Y10EGCTWQXW","vm-provision","End-to-end VPS provisioning — select provider → plan → provision → harden → verify (ssh-check + firewall-diff hard-gate) → handoff. 6 phases, ≥6 AskUserQuestion calls, defensive-only. Stops if either verification primitive fails.","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fvm-provision\u002FSKILL.md",[],[115,116,117,118,119,120,121,122,123,124,106,125,126,107,94,127,128,129,130,131],"vm","vm provision","firewall","diff","provider","select","end","calls","only","either","api","hetzner","plan","defensive","verify","intent","line",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":136,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":145,"publishedAt":44},"01M71K80ZRH2H5ES83QS97BB91","visual-explainer","Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.","MIT","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-explainer\u002FSKILL.md",[139,140],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":141,"categoryName":142,"taxonomyType":143,"taxonomyTypeDesc":144},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[146,147,148,149,150,151,152,153,127,154,155,156,157,158,159,160,161,162,163,164],"visual","visual explainer","explainer","project","files","image","you","architecture","generate","present","concepts","table","as","view","for","ascii table","ascii","surf","use",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":169,"categories":170,"keywords":174,"publishedAt":44},"01M71K7VSD5ZWN26QJEC4T0770","video-gen","Use when generating video from frame sequences — FFmpeg extraction, WebP\u002FAVIF conversion, sprite sheets, scroll-synced playback, video encoding\u002Ftranscoding. Covers the full pipeline from video source to web-ready frame sequence or optimized video.","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Fvideo-gen\u002FSKILL.md",[171],{"categoryNo":172,"categoryName":173,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[175,176,177,178,179,180,181,182,39,37,151,183,184,28,27,185,186,187,188,189],"Video","gen","video gen","ready","pipeline","default","generated","synced","conversion","directory","source","full","path","webp","target",{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":199,"publishedAt":44},"01M71K7R88RM8ENVCRZHZSMM5T","test-matrix","Use when a project needs testing BEYOND unit tests — fuzzing, property-based, load, E2E, or mutation. Five-phase hub-and-spoke pipeline composes the right mix per language × critical path × CI target, scaffolds configs + corpus + fixtures, wires CI jobs, and defines the crash\u002Fregression triage workflow. Pure-click: every decision except intake is an AskUserQuestion.","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Ftest-matrix\u002FSKILL.md",[196],{"categoryNo":197,"categoryName":198,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[200,201,202,203,189,204,149,205,179,206,207,208,209,210,211,212,213,164,214,215],"test","matrix","test matrix","unit","click","regression","mix","intake","testing","decision","ci","tests","e2e","mutation","load","fuzzing",{"skillNo":217,"name":218,"nameZh":6,"description":219,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":220,"categories":221,"keywords":223,"publishedAt":44},"01M71K7N3ZY9FMMH3CSE1H8K5J","test-gen","Use when generating tests for untested code — happy path, edge cases, error handling","https:\u002F\u002Fgithub.com\u002FKeiSeiLab\u002FKeiSeiKit\u002Fblob\u002Fmain\u002Fskills\u002Ftest-gen\u002FSKILL.md",[222],{"categoryNo":197,"categoryName":198,"taxonomyType":21,"taxonomyTypeDesc":22},[224,176,200,225,189,160,226,211,227,164,37,228,229,230,231,187],"test gen","error","true","edge","file","code","error handling","name"]