一键在 Manus 中运行任何 Skill

visual-storytelling

星标3

分支0

更新时间2026年7月8日 00:25

Visual storytelling skill chain for DSH; use for narrative motion, scroll-driven UX, and stack-aware implementation rails.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

garochee33

garochee33/DSH

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Visual Storytelling Skill — KB Reference

Canonical source: This document. Last updated: 2026-05-13 Status: Active, production-wired.

Purpose

Skill chain

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)
DB table skill_registry (auto-synced at boot via bootstrap/registry.ts)

Stack files (BM25-searchable)

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>

Hard rails

One ease curve: 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.
Glass-morphism — never "holographic".
No new Google Font without same-PR update to BRAND.md §4.
Tap targets ≥ 44 px, focus ring red #E31937.
Captions for every video with spoken content (WCAG 1.2.2).
Audio toggle in nav with localStorage persistence if any sound layer.
No third-party social embeds on trust-critical paths.

5-act web narrative

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

3 rules of motion intent

Every animation must answer:

Reveal — bring information into view.
Direct — move the eye toward what matters next.
Mark — make the user feel they crossed a threshold.

If it answers none, cut it.

Trinity-specific surfaces

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)

Next.js 16.2.5
React 19.2.4
Tailwind v4
Framer Motion 12.38
R3F 9 + Drei 10 + Three.js 0.172
Lenis 1.3.23 (shipped 2026-05-13)
Wired at src/app/layout.tsx via SmoothScroll.tsx client wrapper, useReducedMotion-gated.

Cross-references

Competitor intel: ~/DSH/logs/competitor-intel/2026-05-13/
Protocol: ~/DSH/PROTOCOLS.md § Visual Storytelling Protocol

同仓库更多 Skills

同仓库

algorithms

garochee33/DSH

Algorithm design and analysis skill for DSH; use when working on optimization, data structures, or computational procedures.

2026-07-083

cognitive

garochee33/DSH

Cognitive systems skill for reasoning, memory, and agent behavior; use when designing agent workflows or mental-model tooling.

2026-07-083

compute

garochee33/DSH

High-performance numerical and quantum compute skill for scientific workloads; use when working on numeric algorithms, simulation, or acceleration.

2026-07-083

fractals

garochee33/DSH

Fractal geometry and self-similarity skill; use when working on recursive geometric or visual systems.

2026-07-083

frequency

garochee33/DSH

Frequency-domain and signal-processing skill; use when working on Fourier, spectral, or resonance analysis.

2026-07-083

greenergyfl-finance

garochee33/DSH

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".

2026-07-083

name	visual-storytelling
description	Visual storytelling skill chain for DSH; use for narrative motion, scroll-driven UX, and stack-aware implementation rails.

Visual Storytelling Skill — KB Reference

Canonical source: This document. Last updated: 2026-05-13 Status: Active, production-wired.

Purpose

Skill chain

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)
DB table skill_registry (auto-synced at boot via bootstrap/registry.ts)

Stack files (BM25-searchable)

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>

Hard rails

One ease curve: 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.
Glass-morphism — never "holographic".
No new Google Font without same-PR update to BRAND.md §4.
Tap targets ≥ 44 px, focus ring red #E31937.
Captions for every video with spoken content (WCAG 1.2.2).
Audio toggle in nav with localStorage persistence if any sound layer.
No third-party social embeds on trust-critical paths.

5-act web narrative

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

3 rules of motion intent

Every animation must answer:

Reveal — bring information into view.
Direct — move the eye toward what matters next.
Mark — make the user feel they crossed a threshold.

If it answers none, cut it.

Trinity-specific surfaces

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)

Next.js 16.2.5
React 19.2.4
Tailwind v4
Framer Motion 12.38
R3F 9 + Drei 10 + Three.js 0.172
Lenis 1.3.23 (shipped 2026-05-13)
Wired at src/app/layout.tsx via SmoothScroll.tsx client wrapper, useReducedMotion-gated.

Cross-references

Competitor intel: ~/DSH/logs/competitor-intel/2026-05-13/
Protocol: ~/DSH/PROTOCOLS.md § Visual Storytelling Protocol