원클릭으로 Manus에서 모든 스킬 실행

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 저장소 열기 Creator 저장소 보기

다운로드

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