Visual storytelling skill chain for DSH; use for narrative motion, scroll-driven UX, and stack-aware implementation rails.
中文简介正在准备中。当前显示原文说明。
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Canonical source: This document. Last updated: 2026-05-13 Status: Active, production-wired.
Three skills, layered top-down:
| Skill | Role | Lives at |
|---|
All three are registered in:
server/ai/swarm/skills-library.ts (production runtime registry)server/ai/swarm/skill-specs.json (auto-generated specs)skill_registry (auto-synced at boot via bootstrap/registry.ts)Located in agents/skills/ui-ux-pro-max/data/stacks/ (mirrored across agent tiers):
| Stack | Rows | Domain |
|---|---|---|
framer-motion.csv | 60 | Framer Motion 12 + Lenis smooth-scroll integration |
gsap.csv | 50 | GSAP + ScrollTrigger + SplitText + Flip + MorphSVG + Draggable |
r3f.csv | 54 | React Three Fiber + Drei + Draco/KTX2 + reduced-motion |
spline.csv | 30 | Spline → React, GLB export → R3F, variables |
video.csv | 50 | HTML5 video + codec ladder + captions + Lottie + autoplay |
web-audio.csv | 34 | Web Audio API + Tone.js + Howler + foley/ASMR + ducking |
typography-motion.csv | 40 | Variable fonts + SplitText + kinetic reveals + scroll-coupled type |
threejs.csv | 54 | Raw Three.js (cameras, lighting, materials, particles, GSAP, raycasting) |
Query:
python3 scripts/ui-ux-search.py "<query>" --stack <name>
cubic-bezier(0.16, 1, 0.3, 1) = --ease-out-expo / GSAP expo.out.prefers-reduced-motion — global gate at globals.css:285–290. Non-negotiable.#E31937.localStorage persistence if any sound layer.| Act | Beat | Goal | Stack |
|---|---|---|---|
| 1 | Promise / Hero | Visceral one-line claim | typography-motion + framer-motion |
| 2 | Proof / Why-it-matters | Recognizable problem | framer-motion useScroll or gsap ScrollTrigger |
| 3 | Mechanism / How-it-works | The artifact | r3f or spline + framer-motion layoutId |
| 4 | Texture / Detail | Secondary proof | framer-motion counter + stagger |
| 5 | Resolve / CTA | One decisive ask | gsap magnetic cursor + sticky glow |
Every animation must answer:
If it answers none, cut it.
| Surface | Stack lean |
|---|---|
| Trinity dev-portal / command-center | framer-motion + typography-motion |
| AMMA-resonant content | Custom Mandelbulb + Sephirot shaders + web-audio (Tone.js for harmonic-frequency layers) |
src/app/layout.tsx via SmoothScroll.tsx client wrapper, useReducedMotion-gated.~/DSH/logs/competitor-intel/2026-05-13/~/DSH/PROTOCOLS.md § Visual Storytelling Protocol还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Vercel AI SDK expert guidance. Use when building AI-powered features — chat interfaces, text generation, structured output, tool calling, agents, MCP integration, streaming, embeddings, reranking, image generation, or working with any LLM provider.
中文简介正在准备中。当前显示原文说明。
Algorithm design and analysis skill for DSH; use when working on optimization, data structures, or computational procedures.
中文简介正在准备中。当前显示原文说明。
Design and implement scalable API gateways, RESTful APIs, GraphQL endpoints, WebSocket handlers, and microservice communication patterns. Use when creating API routes, designing endpoints, implementing middleware, or setting up service mesh architectures.
中文简介正在准备中。当前显示原文说明。
Implement a task N ways in parallel and pick the best. Spawns multiple subagents in isolated worktrees, evaluates all candidates, and applies the winner. Use when asked to "best of n", "try multiple approaches", "parallel implementations", "/best-of-n", or "/bon".
中文简介正在准备中。当前显示原文说明。
Check your work with a verification subagent. Spawns a verifier that reviews diffs, runs builds and tests, and evaluates correctness. Use when asked to "check work", "verify changes", "self-verify", "/check", "/verify", "/check-work", or "/self-verify".
中文简介正在准备中。当前显示原文说明。
CI/CD pipeline design, GitHub Actions workflows, deployment automation, infrastructure as code, and release management. Use when setting up CI/CD, automating deployments, configuring build pipelines, or managing releases.
中文简介正在准备中。当前显示原文说明。