scroll-storyteller
✓在通過鼠標跟隨聚光燈效果、動畫 SVG 藝術和人性化設計語言創建基於滾動的交互式故事講述體驗時使用。加載解釋頁面、產品展示、視覺敘事或任何需要具有有機形狀和流暢動畫的沉浸式滾動故事講述的內容。支持 GSAP 驅動的動畫或輕量級純 CSS 動畫。
SKILL.md
Create immersive, interactive storytelling experiences using Anthropic's authentic design language: strict duotone palette, organic Bézier SVG paths, custom cursors, and chapter-based narratives.
| 1 | Animation? | GSAP (rich) vs CSS-only (lightweight) | | 2 | Mood? | Warm vs Cool vs Creative | | 3 | Palette? | (show 3-4 based on mood) | | 4 | Topic? | Biblical/Tech/Business/Personal/Custom | | 5 | Chapters? | 3, 4, or 5 | | 6 | Content per chapter | Title, description, keywords |
Post-generation: Customize content, create SVGs (see references/structure-templates.md)
在通過鼠標跟隨聚光燈效果、動畫 SVG 藝術和人性化設計語言創建基於滾動的交互式故事講述體驗時使用。加載解釋頁面、產品展示、視覺敘事或任何需要具有有機形狀和流暢動畫的沉浸式滾動故事講述的內容。支持 GSAP 驅動的動畫或輕量級純 CSS 動畫。 來源:ingpoc/skills。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/ingpoc/skills --skill scroll-storyteller- 分類
- </>開發工具
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 scroll-storyteller?
在通過鼠標跟隨聚光燈效果、動畫 SVG 藝術和人性化設計語言創建基於滾動的交互式故事講述體驗時使用。加載解釋頁面、產品展示、視覺敘事或任何需要具有有機形狀和流暢動畫的沉浸式滾動故事講述的內容。支持 GSAP 驅動的動畫或輕量級純 CSS 動畫。 來源:ingpoc/skills。
如何安裝 scroll-storyteller?
開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等) 複製並執行以下指令:npx skills add https://github.com/ingpoc/skills --skill scroll-storyteller 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪?
https://github.com/ingpoc/skills
詳情
- 分類
- </>開發工具
- 來源
- skills.sh
- 收錄時間
- 2026-02-01