Visual storytelling skill chain for DSH; use for narrative motion, scroll-driven UX, and stack-aware implementation rails.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
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.
日本語の概要は準備中です。原文の説明を表示しています。