メニュー
Visual storytelling skill chain for DSH; use for narrative motion, scroll-driven UX, and stack-aware implementation rails.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | visual-storytelling |
| description | 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 ProtocolAlgorithm design and analysis skill for DSH; use when working on optimization, data structures, or computational procedures.
Cognitive systems skill for reasoning, memory, and agent behavior; use when designing agent workflows or mental-model tooling.
High-performance numerical and quantum compute skill for scientific workloads; use when working on numeric algorithms, simulation, or acceleration.
Fractal geometry and self-similarity skill; use when working on recursive geometric or visual systems.
Frequency-domain and signal-processing skill; use when working on Fourier, spectral, or resonance analysis.
Financial advisor for GreenEnergyFL — tracks job finances, bills, vendor payments, cash flow, and overdue invoices. Use this skill whenever the user asks about money, payments, invoices, bills, job costs, what's owed, what's coming in, cash flow, overdue accounts, financial summaries, or anything related to GreenEnergyFL's finances. Trigger even if the user just says "check the bills", "what do we owe", "who hasn't paid", "how are we doing financially", or "show me the jobs".