Visual storytelling skill chain for DSH; use for narrative motion, scroll-driven UX, and stack-aware implementation rails.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
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 ProtocolNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.
The English summary is being prepared. Showing the original description.
Algorithm design and analysis skill for DSH; use when working on optimization, data structures, or computational procedures.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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".
The English summary is being prepared. Showing the original description.
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".
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.