무료GitHub에 공개

visual-storytelling

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

garochee33/DSH

설치 방법 보기

포함된 파일(1)

SKILL.md3.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬

ai-sdk

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

garochee33/DSH42026년 10월 19일 업데이트

algorithms

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

garochee33/DSH42026년 10월 19일 업데이트

api-gateway-designer

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

garochee33/DSH42026년 10월 19일 업데이트

best-of-n

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

garochee33/DSH42026년 10월 19일 업데이트

check

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

garochee33/DSH42026년 10월 19일 업데이트

ci-cd-architect

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

garochee33/DSH42026년 10월 19일 업데이트

garochee33의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

npx skills add https://github.com/garochee33/DSH --skill visual-storytelling

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/garochee33/DSH/tree/main/agents/Codex/skills/dome-hub/visual-storytelling

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/visual-storytelling/, Codex는 ~/.agents/skills/visual-storytelling/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: garochee33/DSH
스타: 4
포크: 0
카테고리: 글쓰기·창작
원문 언어: 영어
최종 업데이트: 2026년 10월 19일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.