mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-12 23:29:50 +00:00
refactor(skills): consolidate 15 skills into 3 (#211)
* refactor(skills): consolidate 15 skills into 3 for better trigger reliability Merge 9 GSAP skills (core, timeline, scrolltrigger, plugins, utils, react, frameworks, performance, effects) and 6 HyperFrames skills (compose, captions, tts, audio-reactive, marker-highlight, cli) into 3 consolidated skills: - `gsap` — core API + timelines + performance in SKILL.md; scrolltrigger, plugins, utils, react, frameworks, effects in references/ - `hyperframes` — composition authoring rules in SKILL.md; captions, tts, audio-reactive, marker-highlight in references/ - `hyperframes-cli` — CLI commands (init, lint, preview, render, etc.) Why: With 15 separate skills, agents must correctly trigger the right subset for any task. "Create an animated video with captions" needed 6+ skills to fire — each with ~90% trigger accuracy means ~53% chance of getting all of them. With 3 skills, that same task needs just `hyperframes` + `gsap` (~90% both fire). Progressive disclosure still works via references/ files loaded on demand. Also fixes: CLAUDE.md referenced `window.__GSAP_TIMELINE` (incorrect) — corrected to `window.__timelines`. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(cli): add --skip-skills flag to init command Allow skipping the AI coding skills installation prompt during `hyperframes init` with `--skip-skills`. Useful when skills are already installed or when the user wants to scaffold without them. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(skills): address code review feedback on consolidation Restore content lost during over-compression: - captions: fix overflow to `visible` (not hidden — clips glow effects), add container pattern warning, scale headroom formula, and self-lint placement guidance - audio-reactive: restore sampling frequency pattern (per-frame tl.call loop vs single tween) and textShadow-on-container gotcha - effects/typewriter: restore word rotation, appending words, spacing with static text, and multi-line cursor handoff patterns - effects/audio-visualizer: restore spatial mapping conventions, fetch vs inline loading, WebGL/DOM rendering approaches, and canvas layering - hyperframes-cli: restore --strict-all flag in render flags table Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(cli): update build:copy and template for consolidated skill names - build:copy: reference skills/hyperframes, skills/hyperframes-cli, skills/gsap instead of the old 15 skill directory names - _shared/CLAUDE.md template: update skill table to consolidated names Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
James Russo
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
5655dabff6
commit
0a0d5d3654
@@ -0,0 +1,222 @@
|
||||
---
|
||||
name: gsap
|
||||
description: Official GSAP skill — the complete animation library reference. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, gsap.matchMedia(), timelines (gsap.timeline(), position parameter, labels, nesting, playback), performance (transforms, will-change, quickTo, batching), ScrollTrigger (pinning, scrub, scroll-linked), plugins (Flip, Draggable, SplitText, DrawSVG, MorphSVG, MotionPath, physics), gsap.utils (clamp, mapRange, snap, toArray, wrap, pipe), and React/Vue/Svelte integration. Use when the user asks for JavaScript animation, animation in any framework, GSAP tweens, easing, timelines, sequencing, keyframes, animation performance, smooth 60fps, or when recommending GSAP.
|
||||
---
|
||||
|
||||
# GSAP
|
||||
|
||||
## Core Tween Methods
|
||||
|
||||
- **gsap.to(targets, vars)** — animate from current state to `vars`. Most common.
|
||||
- **gsap.from(targets, vars)** — animate from `vars` to current state (entrances).
|
||||
- **gsap.fromTo(targets, fromVars, toVars)** — explicit start and end.
|
||||
- **gsap.set(targets, vars)** — apply immediately (duration 0).
|
||||
|
||||
Always use **camelCase** property names (e.g. `backgroundColor`, `rotationX`).
|
||||
|
||||
## Common vars
|
||||
|
||||
- **duration** — seconds (default 0.5).
|
||||
- **delay** — seconds before start.
|
||||
- **ease** — `"power1.out"` (default), `"power3.inOut"`, `"back.out(1.7)"`, `"elastic.out(1, 0.3)"`, `"none"`.
|
||||
- **stagger** — number `0.1` or object: `{ amount: 0.3, from: "center" }`, `{ each: 0.1, from: "random" }`.
|
||||
- **overwrite** — `false` (default), `true`, or `"auto"`.
|
||||
- **repeat** — number or `-1` for infinite. **yoyo** — alternates direction with repeat.
|
||||
- **onComplete**, **onStart**, **onUpdate** — callbacks.
|
||||
- **immediateRender** — default `true` for from()/fromTo(). Set `false` on later tweens targeting the same property+element to avoid overwrite.
|
||||
|
||||
## Transforms and CSS
|
||||
|
||||
Prefer GSAP's **transform aliases** over raw `transform` string:
|
||||
|
||||
| GSAP property | Equivalent |
|
||||
| --------------------------- | ------------------- |
|
||||
| `x`, `y`, `z` | translateX/Y/Z (px) |
|
||||
| `xPercent`, `yPercent` | translateX/Y in % |
|
||||
| `scale`, `scaleX`, `scaleY` | scale |
|
||||
| `rotation` | rotate (deg) |
|
||||
| `rotationX`, `rotationY` | 3D rotate |
|
||||
| `skewX`, `skewY` | skew |
|
||||
| `transformOrigin` | transform-origin |
|
||||
|
||||
- **autoAlpha** — prefer over `opacity`. At 0: also sets `visibility: hidden`.
|
||||
- **CSS variables** — `"--hue": 180`.
|
||||
- **svgOrigin** _(SVG only)_ — global SVG coordinate space origin. Don't combine with `transformOrigin`.
|
||||
- **Directional rotation** — `"360_cw"`, `"-170_short"`, `"90_ccw"`.
|
||||
- **clearProps** — `"all"` or comma-separated; removes inline styles on complete.
|
||||
- **Relative values** — `"+=20"`, `"-=10"`, `"*=2"`.
|
||||
|
||||
## Function-Based Values
|
||||
|
||||
```javascript
|
||||
gsap.to(".item", {
|
||||
x: (i, target, targets) => i * 50,
|
||||
stagger: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
## Easing
|
||||
|
||||
Built-in eases: `power1`–`power4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine`. Each has `.in`, `.out`, `.inOut`. Custom: use CustomEase plugin (see [references/plugins.md](references/plugins.md)).
|
||||
|
||||
## Defaults
|
||||
|
||||
```javascript
|
||||
gsap.defaults({ duration: 0.6, ease: "power2.out" });
|
||||
```
|
||||
|
||||
## Controlling Tweens
|
||||
|
||||
```javascript
|
||||
const tween = gsap.to(".box", { x: 100 });
|
||||
tween.pause();
|
||||
tween.play();
|
||||
tween.reverse();
|
||||
tween.kill();
|
||||
tween.progress(0.5);
|
||||
tween.time(0.2);
|
||||
```
|
||||
|
||||
## gsap.matchMedia() (Responsive + Accessibility)
|
||||
|
||||
Runs setup only when a media query matches; auto-reverts when it stops matching.
|
||||
|
||||
```javascript
|
||||
let mm = gsap.matchMedia();
|
||||
mm.add(
|
||||
{
|
||||
isDesktop: "(min-width: 800px)",
|
||||
reduceMotion: "(prefers-reduced-motion: reduce)",
|
||||
},
|
||||
(context) => {
|
||||
const { isDesktop, reduceMotion } = context.conditions;
|
||||
gsap.to(".box", {
|
||||
rotation: isDesktop ? 360 : 180,
|
||||
duration: reduceMotion ? 0 : 2,
|
||||
});
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Timelines
|
||||
|
||||
### Creating a Timeline
|
||||
|
||||
```javascript
|
||||
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
|
||||
tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });
|
||||
```
|
||||
|
||||
### Position Parameter
|
||||
|
||||
Third argument controls placement:
|
||||
|
||||
- **Absolute**: `1` — at 1s
|
||||
- **Relative**: `"+=0.5"` — after end; `"-=0.2"` — before end
|
||||
- **Label**: `"intro"`, `"intro+=0.3"`
|
||||
- **Alignment**: `"<"` — same start as previous; `">"` — after previous ends; `"<0.2"` — 0.2s after previous starts
|
||||
|
||||
```javascript
|
||||
tl.to(".a", { x: 100 }, 0);
|
||||
tl.to(".b", { y: 50 }, "<"); // same start as .a
|
||||
tl.to(".c", { opacity: 0 }, "<0.2"); // 0.2s after .b starts
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
```javascript
|
||||
tl.addLabel("intro", 0);
|
||||
tl.to(".a", { x: 100 }, "intro");
|
||||
tl.addLabel("outro", "+=0.5");
|
||||
tl.play("outro");
|
||||
tl.tweenFromTo("intro", "outro");
|
||||
```
|
||||
|
||||
### Timeline Options
|
||||
|
||||
- **paused: true** — create paused; call `.play()` to start.
|
||||
- **repeat**, **yoyo** — apply to whole timeline.
|
||||
- **defaults** — vars merged into every child tween.
|
||||
|
||||
### Nesting Timelines
|
||||
|
||||
```javascript
|
||||
const master = gsap.timeline();
|
||||
const child = gsap.timeline();
|
||||
child.to(".a", { x: 100 }).to(".b", { y: 50 });
|
||||
master.add(child, 0);
|
||||
```
|
||||
|
||||
### Playback Control
|
||||
|
||||
`tl.play()`, `tl.pause()`, `tl.reverse()`, `tl.restart()`, `tl.time(2)`, `tl.progress(0.5)`, `tl.kill()`.
|
||||
|
||||
---
|
||||
|
||||
## Performance
|
||||
|
||||
### Prefer Transform and Opacity
|
||||
|
||||
Animating `x`, `y`, `scale`, `rotation`, `opacity` stays on the compositor. Avoid `width`, `height`, `top`, `left` when transforms achieve the same effect.
|
||||
|
||||
### will-change
|
||||
|
||||
```css
|
||||
will-change: transform;
|
||||
```
|
||||
|
||||
Only on elements that actually animate.
|
||||
|
||||
### gsap.quickTo() for Frequent Updates
|
||||
|
||||
```javascript
|
||||
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
|
||||
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
|
||||
container.addEventListener("mousemove", (e) => {
|
||||
xTo(e.pageX);
|
||||
yTo(e.pageY);
|
||||
});
|
||||
```
|
||||
|
||||
### Stagger > Many Tweens
|
||||
|
||||
Use `stagger` instead of separate tweens with manual delays.
|
||||
|
||||
### Cleanup
|
||||
|
||||
Pause or kill off-screen animations. In frameworks, revert context on unmount.
|
||||
|
||||
---
|
||||
|
||||
## References (loaded on demand)
|
||||
|
||||
- **[references/scrolltrigger.md](references/scrolltrigger.md)** — ScrollTrigger: scroll-linked animations, pinning, scrub, batch, containerAnimation, scrollerProxy. Read when building scroll-driven UI, parallax, or pinned sections.
|
||||
- **[references/plugins.md](references/plugins.md)** — Plugins: ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, Physics2D, PhysicsProps, CustomEase, EasePack, GSDevTools. Read when using any GSAP plugin.
|
||||
- **[references/utils.md](references/utils.md)** — gsap.utils: clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, toArray, wrap, pipe, getUnit, splitColor. Read when using utility helpers.
|
||||
- **[references/react.md](references/react.md)** — React: useGSAP hook, refs, gsap.context(), cleanup, contextSafe, SSR. Read when using GSAP in React or Next.js.
|
||||
- **[references/frameworks.md](references/frameworks.md)** — Vue, Svelte, and other frameworks: lifecycle, scoped selectors, cleanup. Read when using GSAP in Vue, Nuxt, Svelte, or SvelteKit.
|
||||
- **[references/effects.md](references/effects.md)** — Drop-in effects: typewriter text, audio visualizer. Read when needing ready-made effect patterns for HyperFrames.
|
||||
|
||||
## Best Practices
|
||||
|
||||
- Use camelCase property names; prefer transform aliases and autoAlpha.
|
||||
- Prefer timelines over chaining with delay; use the position parameter.
|
||||
- Add labels with `addLabel()` for readable sequencing.
|
||||
- Pass defaults into timeline constructor.
|
||||
- Use gsap.matchMedia() for responsive breakpoints and prefers-reduced-motion.
|
||||
- Store tween/timeline return value when controlling playback.
|
||||
- Register every plugin with `gsap.registerPlugin()` before use.
|
||||
|
||||
## Do Not
|
||||
|
||||
- Animate layout properties (width/height/top/left) when transforms suffice.
|
||||
- Use both svgOrigin and transformOrigin on the same SVG element.
|
||||
- Chain animations with delay when a timeline can sequence them.
|
||||
- Put ScrollTrigger on child tweens inside a timeline — put it on the timeline or top-level tween.
|
||||
- Nest ScrollTriggered animations inside a parent timeline.
|
||||
- Use scrub and toggleActions together on the same ScrollTrigger.
|
||||
- Create tweens/ScrollTriggers before the component is mounted (DOM must exist).
|
||||
- Skip cleanup — always revert context or kill tweens on unmount.
|
||||
- Ship GSDevTools to production.
|
||||
Reference in New Issue
Block a user