Claude skills and agent skills

LinHao-citySkill

beautiful-mermaid

LinHao-city/StoryMind/.agents/skills/beautiful-mermaid/SKILL.md

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.

LinHao-citySkill

canvas-procedural-animation

LinHao-city/StoryMind/.agents/skills/canvas-procedural-animation/SKILL.md

Use p5.js/canvas for local procedural character effects: particles, weather, squash/stretch, walk cycles, and environmental motion.

LinHao-citySkill

character-animation-qa

LinHao-city/StoryMind/.agents/skills/character-animation-qa/SKILL.md

Review local character animation with schema checks, Playwright browser previews, frame sampling, and FFmpeg/ffprobe final output checks.

LinHao-citySkill

character-rigging

LinHao-city/StoryMind/.agents/skills/character-rigging/SKILL.md

Use this skill when building StoryMind rig_plan artifacts or renderer input for local 2D character animation. - SVG transform-origin behavior is browser-defined and can be sensitive to coordinate space; prefer…

LinHao-citySkill

comfyui

LinHao-city/StoryMind/.agents/skills/comfyui/SKILL.md

Use this skill before calling comfyuiimage or comfyuivideo, and when converting a community ComfyUI workflow into an StoryMind tool call.

Often used withtouchdesigner-mcp·popular-web-designs·github-repo-management

LinHao-citySkill

d3-viz

LinHao-city/StoryMind/.agents/skills/d3-viz/SKILL.md

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

LinHao-citySkill

ffmpeg

LinHao-city/StoryMind/.agents/skills/ffmpeg/SKILL.md

Video and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.

LinHao-citySkill

flux-best-practices

LinHao-city/StoryMind/.agents/skills/flux-best-practices/SKILL.md

Comprehensive guide for BFL FLUX image generation models. Covers prompting, T2I, I2I, structured JSON, hex colors, typography, multi-reference editing, and model-specific best practices for FLUX.2 and FLUX.1 families.

LinHao-citySkill

framer-motion

LinHao-city/StoryMind/.agents/skills/framer-motion/SKILL.md

Use when implementing Disney's 12 animation principles with Framer Motion in React applications

LinHao-citySkill

gsap-core

LinHao-city/StoryMind/.agents/skills/gsap-core/SKILL.md

Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or vanilla JS; powers Webflow Interactions.

LinHao-citySkill

gsap-frameworks

LinHao-city/StoryMind/.agents/skills/gsap-frameworks/SKILL.md

Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is specified. For React use gsap-react.

LinHao-citySkill

gsap-performance

LinHao-city/StoryMind/.agents/skills/gsap-performance/SKILL.md

Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.

LinHao-citySkill

gsap-plugins

LinHao-city/StoryMind/.agents/skills/gsap-plugins/SKILL.md

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.

LinHao-citySkill

gsap-react

LinHao-city/StoryMind/.agents/skills/gsap-react/SKILL.md

Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.

Often used withmotion-design

LinHao-citySkill

gsap-scrolltrigger

LinHao-city/StoryMind/.agents/skills/gsap-scrolltrigger/SKILL.md

Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specified.

Often used withgsap-frameworks·motion-design·gsap-plugins

LinHao-citySkill

gsap-timeline

LinHao-city/StoryMind/.agents/skills/gsap-timeline/SKILL.md

Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).

LinHao-citySkill

gsap-utils

LinHao-city/StoryMind/.agents/skills/gsap-utils/SKILL.md

Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.

Often used withwebsite-to-video·threejs-fundamentals·threejs-interaction

LinHao-citySkill

hyperframes-animation

LinHao-city/StoryMind/.agents/skills/hyperframes-animation/SKILL.md

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). HyperFrames-native: single paused timeline, seek-safe, deterministic.

Often used withhyperframes-studio·talking-head-recut·hyperframes-media

LinHao-citySkill

hyperframes-cli

LinHao-city/StoryMind/.agents/skills/hyperframes-cli/SKILL.md

HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint, validate, inspect, layout, snapshot, preview, play, render, publish, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, tts, or remove-background, or when troubleshooting the HyperFrames build/render environment. Entry point for AWS Lambda cloud rendering (`hyperframes lambda deploy / render / progress / destroy / policies`).

Often used withoversized-cursor·cut-mistakes·hyperframes-creative

LinHao-citySkill

hyperframes-core

LinHao-city/StoryMind/.agents/skills/hyperframes-core/SKILL.md

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Often used withhyperframes-studio·talking-head-recut·product-launch-video