@skilly-hand/skilly-hand 0.28.0 → 0.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/README.md +1 -1
- package/catalog/README.md +2 -2
- package/catalog/skills/agents-root-orchestrator/SKILL.md +3 -3
- package/catalog/skills/agents-root-orchestrator/assets/AGENTS-ROOT-TEMPLATE.md +3 -3
- package/catalog/skills/{skill-creator → forge-me-a-skill}/SKILL.md +7 -4
- package/catalog/skills/{skill-creator → forge-me-a-skill}/manifest.json +2 -2
- package/catalog/skills/gsap-animation/SKILL.md +20 -14
- package/catalog/skills/gsap-animation/manifest.json +8 -6
- package/catalog/skills/gsap-animation/references/core-patterns.md +21 -1
- package/catalog/skills/gsap-animation/references/framework-patterns.md +79 -0
- package/catalog/skills/gsap-animation/references/official-source-map.md +6 -1
- package/catalog/skills/gsap-animation/references/plugin-selection.md +3 -1
- package/catalog/skills/gsap-animation/references/utils-patterns.md +68 -0
- package/catalog/templates/AGENTS.template.md +1 -1
- package/package.json +1 -1
- package/packages/catalog/package.json +1 -1
- package/packages/catalog/src/index.js +3 -3
- package/packages/cli/package.json +1 -1
- package/packages/core/package.json +1 -1
- package/packages/detectors/package.json +1 -1
- /package/catalog/skills/{skill-creator → forge-me-a-skill}/assets/SKILL-TEMPLATE.md +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -16,6 +16,21 @@ All notable changes to this project are documented in this file.
|
|
|
16
16
|
### Removed
|
|
17
17
|
- _None._
|
|
18
18
|
|
|
19
|
+
## [0.29.0] - 2026-05-23
|
|
20
|
+
[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.29.0)
|
|
21
|
+
|
|
22
|
+
### Added
|
|
23
|
+
- Added `forge-me-a-skill` as the portable catalog workflow for creating and standardizing reusable skills.
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
- Expanded `gsap-animation` guidance with utilities, Vue/Svelte/Nuxt framework patterns, and official GSAP plugin coverage.
|
|
27
|
+
|
|
28
|
+
### Fixed
|
|
29
|
+
- _None._
|
|
30
|
+
|
|
31
|
+
### Removed
|
|
32
|
+
- Removed the old `skill-creator` catalog ID in favor of `forge-me-a-skill`.
|
|
33
|
+
|
|
19
34
|
## [0.28.0] - 2026-05-16
|
|
20
35
|
[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.28.0)
|
|
21
36
|
|
package/README.md
CHANGED
|
@@ -86,6 +86,7 @@ The catalog currently includes:
|
|
|
86
86
|
- `agents-root-orchestrator`
|
|
87
87
|
- `angular-guidelines`
|
|
88
88
|
- `figma-mcp-0to1`
|
|
89
|
+
- `forge-me-a-skill`
|
|
89
90
|
- `frontend-design`
|
|
90
91
|
- `gsap-animation`
|
|
91
92
|
- `motion-animation`
|
|
@@ -96,7 +97,6 @@ The catalog currently includes:
|
|
|
96
97
|
- `react-guidelines`
|
|
97
98
|
- `review-rangers`
|
|
98
99
|
- `roaster`
|
|
99
|
-
- `skill-creator`
|
|
100
100
|
- `spec-driven-development`
|
|
101
101
|
- `test-driven-development`
|
|
102
102
|
- `token-optimizer`
|
package/catalog/README.md
CHANGED
|
@@ -8,8 +8,9 @@ Published portable skills consumed by the `skilly-hand` CLI.
|
|
|
8
8
|
| `agents-root-orchestrator` | Author root AGENTS.md as a Where/What/When orchestrator that routes tasks and skill invocation clearly. | core, workflow, orchestration | all |
|
|
9
9
|
| `angular-guidelines` | Guide Angular code generation, review, and performance tuning using latest stable Angular verification, official Angular skill guidance, and modern framework best practices. Trigger: generating, reviewing, refactoring, or optimizing Angular code artifacts in Angular projects. | angular, frontend, workflow, best-practices | all |
|
|
10
10
|
| `figma-mcp-0to1` | Guide users from Figma MCP installation and authentication through first canvas creation, with function-level tool coverage and operational recovery patterns. | figma, mcp, workflow, design | all |
|
|
11
|
+
| `forge-me-a-skill` | Create and standardize AI skills with reusable structure, metadata rules, and templates. | core, workflow, authoring | all |
|
|
11
12
|
| `frontend-design` | Project-aware frontend design skill that detects the existing tech stack, UI libraries, CSS variables, and design tokens before proposing any UI work. Supports greenfield projects via DESIGN.md context setup, taste-reference extraction, post-generation critique, visual refinement, and Motion/GSAP-aware motion polish. | frontend, design, workflow, ui, motion, greenfield | all |
|
|
12
|
-
| `gsap-animation` | Guide GSAP animation implementation using only official GSAP documentation and the official greensock/gsap-skills source material. Trigger: implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, JavaScript animation libraries, or advanced UI animation. | frontend, animation, motion, gsap, workflow | all |
|
|
13
|
+
| `gsap-animation` | Guide GSAP animation implementation using only official GSAP documentation and the official greensock/gsap-skills source material. Trigger: implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, gsap.utils, Vue/Svelte/Nuxt animation, GSAP plugins, JavaScript animation libraries, or advanced UI animation. | frontend, animation, motion, gsap, workflow | all |
|
|
13
14
|
| `motion-animation` | Guide Motion, formerly Framer Motion, animation implementation using only official Motion documentation. Trigger: implementing, reviewing, or choosing Motion for JavaScript animation, React motion components, gestures, scroll animation, layout animation, exit animation, or framework-agnostic UI motion. | frontend, animation, motion, framer-motion, workflow | all |
|
|
14
15
|
| `output-optimizer` | Optimize output token consumption through compact interpreter modes with controlled expansion when complexity, ambiguity, or risk requires more detail. Trigger: minimizing response verbosity while preserving clarity and correctness. | core, workflow, efficiency, communication | all |
|
|
15
16
|
| `project-security` | Scan project configuration and release surfaces for leak and security risks, and enforce security gates on commit, push, and publish workflows across GitHub, GitLab, npm, pnpm, yarn, and generic CI. Trigger: validating repository security posture, preventing secret leaks, or hardening delivery pipelines. | security, workflow, quality, core | all |
|
|
@@ -18,7 +19,6 @@ Published portable skills consumed by the `skilly-hand` CLI.
|
|
|
18
19
|
| `react-guidelines` | Guide React and Next.js code generation, review, and performance tuning using latest stable React verification and modern framework best practices. Trigger: generating, reviewing, refactoring, or optimizing React code artifacts in React projects. | react, frontend, workflow, best-practices | all |
|
|
19
20
|
| `review-rangers` | Review code, decisions, and artifacts through a multi-perspective committee and a domain expert safety guard, then synthesize a structured verdict. | core, workflow, review, quality | all |
|
|
20
21
|
| `roaster` | Challenge plans with constructive roast-style critique that exposes weak assumptions, missing angles, shallow sequencing, and unclear success criteria. Trigger: when the user proposes, requests, or evaluates a plan of any kind. | core, workflow, planning, quality | all |
|
|
21
|
-
| `skill-creator` | Create and standardize AI skills with reusable structure, metadata rules, and templates. | core, workflow, authoring | all |
|
|
22
22
|
| `spec-driven-development` | Plan, execute, and verify multi-step work through versioned specs with small, testable tasks. | core, workflow, planning | all |
|
|
23
23
|
| `test-driven-development` | Guide implementation using the RED → GREEN → REFACTOR TDD cycle: write a failing test first, write the minimum code to pass, then refactor while tests stay green. | testing, workflow, quality, core | all |
|
|
24
24
|
| `token-optimizer` | Classify task complexity and right-size reasoning depth, context gathering, and response detail to reduce wasted tokens. | core, workflow, efficiency | all |
|
|
@@ -112,7 +112,7 @@ Are trigger conditions currently implicit or ambiguous?
|
|
|
112
112
|
| Action | Skill |
|
|
113
113
|
| ------ | ----- |
|
|
114
114
|
| Planning multi-step feature work | `spec-driven-development` |
|
|
115
|
-
| Creating new reusable skill instructions | `skill
|
|
115
|
+
| Creating new reusable skill instructions | `forge-me-a-skill` |
|
|
116
116
|
| Updating root AGENTS orchestration map | `agents-root-orchestrator` |
|
|
117
117
|
```
|
|
118
118
|
|
|
@@ -127,7 +127,7 @@ Chaining notations document integrated workflows where multiple skills are seque
|
|
|
127
127
|
|
|
128
128
|
```text
|
|
129
129
|
Asking for a new skill
|
|
130
|
-
-> skill
|
|
130
|
+
-> forge-me-a-skill
|
|
131
131
|
-> spec-driven-development
|
|
132
132
|
-> agents-root-orchestrator
|
|
133
133
|
```
|
|
@@ -151,5 +151,5 @@ npx skilly-hand install --dry-run
|
|
|
151
151
|
|
|
152
152
|
- Template: [assets/AGENTS-ROOT-TEMPLATE.md](assets/AGENTS-ROOT-TEMPLATE.md)
|
|
153
153
|
- Companion skills:
|
|
154
|
-
- [../skill
|
|
154
|
+
- [../forge-me-a-skill/SKILL.md](../forge-me-a-skill/SKILL.md)
|
|
155
155
|
- [../spec-driven-development/SKILL.md](../spec-driven-development/SKILL.md)
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
| Task Type | Recommended Skill Chain |
|
|
25
25
|
| --------- | ----------------------- |
|
|
26
26
|
| Multi-step planning | `spec-driven-development` |
|
|
27
|
-
| Creating/updating reusable skills | `skill
|
|
27
|
+
| Creating/updating reusable skills | `forge-me-a-skill` |
|
|
28
28
|
| Root AGENTS orchestration updates | `agents-root-orchestrator` |
|
|
29
29
|
|
|
30
30
|
## When
|
|
@@ -50,7 +50,7 @@ Chaining notations document integrated workflows where multiple skills are seque
|
|
|
50
50
|
```text
|
|
51
51
|
Updating root AGENTS orchestration guidance
|
|
52
52
|
-> agents-root-orchestrator
|
|
53
|
-
-> skill
|
|
53
|
+
-> forge-me-a-skill (if workflow guidance changes)
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
When to use: maintaining repository-level routing, trigger, and escalation guidance.
|
|
@@ -59,7 +59,7 @@ When to use: maintaining repository-level routing, trigger, and escalation guida
|
|
|
59
59
|
|
|
60
60
|
```text
|
|
61
61
|
Asking for a new reusable skill
|
|
62
|
-
-> skill
|
|
62
|
+
-> forge-me-a-skill
|
|
63
63
|
-> spec-driven-development
|
|
64
64
|
-> agents-root-orchestrator
|
|
65
65
|
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: "skill
|
|
2
|
+
name: "forge-me-a-skill"
|
|
3
3
|
description: "Create and standardize AI skills with reusable structure, metadata rules, and templates."
|
|
4
4
|
skillMetadata:
|
|
5
5
|
author: "skilly-hand"
|
|
@@ -20,7 +20,7 @@ skillMetadata:
|
|
|
20
20
|
- "Task"
|
|
21
21
|
- "SubAgent"
|
|
22
22
|
---
|
|
23
|
-
# Skill
|
|
23
|
+
# Forge Me A Skill Guide
|
|
24
24
|
|
|
25
25
|
## When to Create a Skill
|
|
26
26
|
|
|
@@ -52,6 +52,8 @@ skills/{skill-name}/
|
|
|
52
52
|
│ │ └── SKILL.md
|
|
53
53
|
│ └── agent2/
|
|
54
54
|
│ └── SKILL.md
|
|
55
|
+
├── scripts/ # Optional - executable helpers for repeatable tasks
|
|
56
|
+
│ └── helper.sh
|
|
55
57
|
└── references/ # Optional - links to local docs
|
|
56
58
|
└── docs.md
|
|
57
59
|
```
|
|
@@ -65,16 +67,17 @@ skills/{skill-name}/
|
|
|
65
67
|
| Generic skill | `{technology}` | `pytest`, `playwright`, `typescript` |
|
|
66
68
|
| `{product-name}`-specific | `{product-name}-{purpose}` | `{product-name}-best-practices`, `{product-name}-code-connect`, `{product-name}-a11y-checker` |
|
|
67
69
|
| `{product-name}` testing | `{product-name}-{function}-{target}` | `{product-name}-unit-test`, `{product-name}-token-audit` |
|
|
68
|
-
| Workflow skill | `{action}-{target}` | `skill
|
|
70
|
+
| Workflow skill | `{action}-{target}` | `forge-me-a-skill`, `commit-writer`, `pr-writer` |
|
|
69
71
|
|
|
70
72
|
---
|
|
71
73
|
|
|
72
|
-
## Decision: assets/ vs references/ vs agents/
|
|
74
|
+
## Decision: assets/ vs scripts/ vs references/ vs agents/
|
|
73
75
|
|
|
74
76
|
```text
|
|
75
77
|
Need code templates? -> assets/
|
|
76
78
|
Need JSON schemas? -> assets/
|
|
77
79
|
Need example configs? -> assets/
|
|
80
|
+
Need executable helpers? -> scripts/
|
|
78
81
|
Link to existing docs? -> references/
|
|
79
82
|
Link to external guides? -> references/ (with local path)
|
|
80
83
|
Skill needs sub-agents? -> agents/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"id": "skill
|
|
3
|
-
"title": "Skill
|
|
2
|
+
"id": "forge-me-a-skill",
|
|
3
|
+
"title": "Forge Me A Skill",
|
|
4
4
|
"description": "Create and standardize AI skills with reusable structure, metadata rules, and templates.",
|
|
5
5
|
"portable": true,
|
|
6
6
|
"tags": ["core", "workflow", "authoring"],
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: "gsap-animation"
|
|
3
|
-
description: "Guide GSAP animation implementation using only official GSAP documentation and the official greensock/gsap-skills source material. Trigger: implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, JavaScript animation libraries, or advanced UI animation."
|
|
3
|
+
description: "Guide GSAP animation implementation using only official GSAP documentation and the official greensock/gsap-skills source material. Trigger: implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, gsap.utils, Vue/Svelte/Nuxt animation, GSAP plugins, JavaScript animation libraries, or advanced UI animation."
|
|
4
4
|
skillMetadata:
|
|
5
5
|
author: "skilly-hand"
|
|
6
|
-
last-edit: "2026-05-
|
|
6
|
+
last-edit: "2026-05-23"
|
|
7
7
|
license: "Apache-2.0"
|
|
8
|
-
version: "1.
|
|
9
|
-
changelog: "
|
|
10
|
-
auto-invoke: "Implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, JavaScript animation libraries, or advanced UI animation"
|
|
8
|
+
version: "1.1.0"
|
|
9
|
+
changelog: "Expanded GSAP catalog guidance with utilities, non-React framework patterns, official plugin availability, and upstream skill routing; improves official-source coverage and trigger precision; affects GSAP animation skill routing, catalog discovery, and implementation references"
|
|
10
|
+
auto-invoke: "Implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, gsap.utils, Vue/Svelte/Nuxt animation, GSAP plugins, JavaScript animation libraries, or advanced UI animation"
|
|
11
11
|
allowed-tools:
|
|
12
12
|
- "Read"
|
|
13
13
|
- "Edit"
|
|
@@ -26,7 +26,7 @@ skillMetadata:
|
|
|
26
26
|
|
|
27
27
|
Use this skill when:
|
|
28
28
|
|
|
29
|
-
- The user asks for GSAP, GreenSock, JavaScript animation, advanced frontend motion, timelines, scroll-driven animation, pinning, parallax, ScrollTrigger,
|
|
29
|
+
- The user asks for GSAP, GreenSock, JavaScript animation, advanced frontend motion, timelines, scroll-driven animation, pinning, parallax, ScrollTrigger, React `useGSAP()`, `gsap.utils`, Vue, Svelte, Nuxt, or GSAP plugins.
|
|
30
30
|
- Another skill needs a verified GSAP handoff for richer UI motion than CSS transitions can comfortably express.
|
|
31
31
|
- A project needs animation that is sequenced, reversible, controllable at runtime, scroll-linked, SVG-heavy, or framework-agnostic.
|
|
32
32
|
|
|
@@ -46,7 +46,7 @@ Use only:
|
|
|
46
46
|
|
|
47
47
|
- GSAP docs at `https://gsap.com/docs/v3/`.
|
|
48
48
|
- GSAP learning/resources pages linked from the official docs.
|
|
49
|
-
- The official `greensock/gsap-skills` repository linked from the GSAP docs.
|
|
49
|
+
- The official `greensock/gsap-skills` repository linked from the GSAP docs, including its focused AI skill files.
|
|
50
50
|
|
|
51
51
|
Do not use blog posts, snippets, Stack Overflow answers, social posts, or memory-only claims as source material for GSAP API behavior. If a detail is not covered by the reference files, check official docs before using it.
|
|
52
52
|
|
|
@@ -60,7 +60,9 @@ Do not use blog posts, snippets, Stack Overflow answers, social posts, or memory
|
|
|
60
60
|
| Multi-step sequencing or runtime control | GSAP timeline guidance in [references/core-patterns.md](references/core-patterns.md) |
|
|
61
61
|
| Scroll reveals, scrub, pin, snap, parallax | [references/scrolltrigger-patterns.md](references/scrolltrigger-patterns.md) |
|
|
62
62
|
| React or Next.js animation | [references/react-patterns.md](references/react-patterns.md) |
|
|
63
|
-
|
|
|
63
|
+
| Vue, Nuxt, Svelte, SvelteKit, or framework lifecycle cleanup | [references/framework-patterns.md](references/framework-patterns.md) |
|
|
64
|
+
| Value mapping, randomization, snapping, scoped selectors, helper utilities | [references/utils-patterns.md](references/utils-patterns.md) |
|
|
65
|
+
| Flip, Draggable, SplitText, SVG, ScrollSmoother, and other GSAP plugins | [references/plugin-selection.md](references/plugin-selection.md) |
|
|
64
66
|
| Reduced motion, cleanup, transform performance | [references/performance-accessibility.md](references/performance-accessibility.md) |
|
|
65
67
|
|
|
66
68
|
When the user asks for an animation library without naming one, prefer GSAP for timelines, scroll-driven animation, framework-agnostic animation, runtime control, or coordinated multi-element motion. If the project or user has already chosen another library, respect that choice unless they ask to compare or migrate.
|
|
@@ -72,9 +74,9 @@ When the user asks for an animation library without naming one, prefer GSAP for
|
|
|
72
74
|
Always inspect the target project before proposing implementation:
|
|
73
75
|
|
|
74
76
|
```bash
|
|
75
|
-
grep -E '"gsap"|"@gsap/react"|"framer-motion"|"@motionone/dom"|"animejs"|"motion"' package.json
|
|
76
|
-
grep -rn "gsap\\.|ScrollTrigger|useGSAP|registerPlugin" src --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" 2>/dev/null
|
|
77
|
-
grep -rn "prefers-reduced-motion|transition|@keyframes" src --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx" 2>/dev/null
|
|
77
|
+
grep -E '"gsap"|"@gsap/react"|"vue"|"svelte"|"nuxt"|"framer-motion"|"@motionone/dom"|"animejs"|"motion"' package.json
|
|
78
|
+
grep -rn "gsap\\.|ScrollTrigger|useGSAP|registerPlugin|gsap.utils" src --include="*.js" --include="*.jsx" --include="*.ts" --include="*.tsx" --include="*.vue" --include="*.svelte" 2>/dev/null
|
|
79
|
+
grep -rn "prefers-reduced-motion|transition|@keyframes" src --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx" --include="*.vue" --include="*.svelte" 2>/dev/null
|
|
78
80
|
```
|
|
79
81
|
|
|
80
82
|
If `gsap` is not installed, ask before adding it. If React `useGSAP()` is needed and `@gsap/react` is not installed, ask before adding it. This skill teaches target projects how to use GSAP; it does not add GSAP to skilly-hand itself.
|
|
@@ -106,9 +108,10 @@ React and Next.js:
|
|
|
106
108
|
|
|
107
109
|
Other frameworks:
|
|
108
110
|
|
|
109
|
-
- Run GSAP setup after DOM nodes exist
|
|
110
|
-
- Scope selectors to the component root where possible.
|
|
111
|
-
- Revert GSAP contexts, matchMedia instances, ScrollTriggers, and event listeners during component teardown.
|
|
111
|
+
- Run GSAP setup after DOM nodes exist, such as Vue `onMounted()` or Svelte `onMount()`.
|
|
112
|
+
- Scope selectors to the component root with `gsap.context(callback, scope)` where possible.
|
|
113
|
+
- Revert GSAP contexts, matchMedia instances, ScrollTriggers, split text, and event listeners during component teardown.
|
|
114
|
+
- Register plugins once at app/module level instead of inside render paths.
|
|
112
115
|
|
|
113
116
|
---
|
|
114
117
|
|
|
@@ -142,8 +145,11 @@ grep -rn "gsap\\.|ScrollTrigger|useGSAP|registerPlugin" src --include="*.js" --i
|
|
|
142
145
|
## Resources
|
|
143
146
|
|
|
144
147
|
- Source map: [references/official-source-map.md](references/official-source-map.md)
|
|
148
|
+
- Official GSAP AI skills repository: https://github.com/greensock/gsap-skills
|
|
145
149
|
- Core patterns: [references/core-patterns.md](references/core-patterns.md)
|
|
146
150
|
- React patterns: [references/react-patterns.md](references/react-patterns.md)
|
|
151
|
+
- Framework patterns: [references/framework-patterns.md](references/framework-patterns.md)
|
|
147
152
|
- ScrollTrigger patterns: [references/scrolltrigger-patterns.md](references/scrolltrigger-patterns.md)
|
|
153
|
+
- Utility patterns: [references/utils-patterns.md](references/utils-patterns.md)
|
|
148
154
|
- Plugin selection: [references/plugin-selection.md](references/plugin-selection.md)
|
|
149
155
|
- Performance and accessibility: [references/performance-accessibility.md](references/performance-accessibility.md)
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"id": "gsap-animation",
|
|
3
3
|
"title": "GSAP Animation",
|
|
4
|
-
"description": "Guide GSAP animation implementation using only official GSAP documentation and the official greensock/gsap-skills source material. Trigger: implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, JavaScript animation libraries, or advanced UI animation.",
|
|
4
|
+
"description": "Guide GSAP animation implementation using only official GSAP documentation and the official greensock/gsap-skills source material. Trigger: implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, gsap.utils, Vue/Svelte/Nuxt animation, GSAP plugins, JavaScript animation libraries, or advanced UI animation.",
|
|
5
5
|
"portable": true,
|
|
6
6
|
"tags": ["frontend", "animation", "motion", "gsap", "workflow"],
|
|
7
|
-
"detectors": ["react", "nextjs", "angular", "vite", "tailwindcss", "storybook"],
|
|
7
|
+
"detectors": ["react", "nextjs", "angular", "vue", "svelte", "nuxt", "vite", "tailwindcss", "storybook"],
|
|
8
8
|
"detectionTriggers": ["auto"],
|
|
9
9
|
"installsFor": ["all"],
|
|
10
10
|
"agentSupport": ["codex", "claude", "cursor", "gemini", "copilot", "antigravity", "windsurf", "trae"],
|
|
11
11
|
"skillMetadata": {
|
|
12
12
|
"author": "skilly-hand",
|
|
13
|
-
"last-edit": "2026-05-
|
|
13
|
+
"last-edit": "2026-05-23",
|
|
14
14
|
"license": "Apache-2.0",
|
|
15
|
-
"version": "1.
|
|
16
|
-
"changelog": "
|
|
17
|
-
"auto-invoke": "Implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, JavaScript animation libraries, or advanced UI animation",
|
|
15
|
+
"version": "1.1.0",
|
|
16
|
+
"changelog": "Expanded GSAP catalog guidance with utilities, non-React framework patterns, official plugin availability, and upstream skill routing; improves official-source coverage and trigger precision; affects GSAP animation skill routing, catalog discovery, and implementation references",
|
|
17
|
+
"auto-invoke": "Implementing, reviewing, or choosing GSAP for frontend motion, timelines, ScrollTrigger, React useGSAP, gsap.utils, Vue/Svelte/Nuxt animation, GSAP plugins, JavaScript animation libraries, or advanced UI animation",
|
|
18
18
|
"allowed-tools": ["Read", "Edit", "Write", "Glob", "Grep", "Bash", "WebFetch", "WebSearch", "Task", "SubAgent"]
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
|
@@ -22,7 +22,9 @@
|
|
|
22
22
|
{ "path": "references/official-source-map.md", "kind": "reference" },
|
|
23
23
|
{ "path": "references/core-patterns.md", "kind": "reference" },
|
|
24
24
|
{ "path": "references/react-patterns.md", "kind": "reference" },
|
|
25
|
+
{ "path": "references/framework-patterns.md", "kind": "reference" },
|
|
25
26
|
{ "path": "references/scrolltrigger-patterns.md", "kind": "reference" },
|
|
27
|
+
{ "path": "references/utils-patterns.md", "kind": "reference" },
|
|
26
28
|
{ "path": "references/plugin-selection.md", "kind": "reference" },
|
|
27
29
|
{ "path": "references/performance-accessibility.md", "kind": "reference" }
|
|
28
30
|
],
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# GSAP Core Patterns
|
|
2
2
|
|
|
3
|
-
Extracted: 2026-05-
|
|
3
|
+
Extracted: 2026-05-23
|
|
4
4
|
|
|
5
5
|
Sources:
|
|
6
6
|
|
|
@@ -48,6 +48,26 @@ Use timelines for sequences, overlap, labels, modular choreography, or playback
|
|
|
48
48
|
|
|
49
49
|
Prefer a timeline over stacking multiple `delay` values. Use the position parameter for offsets and overlaps, and labels when named positions make later control easier.
|
|
50
50
|
|
|
51
|
+
Use timeline defaults when child tweens share duration, ease, or other common vars:
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
|
|
55
|
+
tl.to(".a", { x: 100 })
|
|
56
|
+
.to(".b", { y: 50 }, "<0.15");
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Common position parameters:
|
|
60
|
+
|
|
61
|
+
- `0`: absolute start time.
|
|
62
|
+
- `"+=0.5"` or `"-=0.2"`: relative offset from the previous insertion point.
|
|
63
|
+
- `"<"`: start with the most recently added animation.
|
|
64
|
+
- `">"`: start after the most recently added animation.
|
|
65
|
+
- `"label"` or `"label+=0.2"`: start at or near a named label.
|
|
66
|
+
|
|
67
|
+
Use playback methods such as `play()`, `pause()`, `reverse()`, `restart()`, `time()`, and `progress()` only when runtime control is required.
|
|
68
|
+
|
|
69
|
+
When using ScrollTrigger with a sequence, attach ScrollTrigger to the top-level tween or timeline rather than nested child tweens.
|
|
70
|
+
|
|
51
71
|
## Properties and Values
|
|
52
72
|
|
|
53
73
|
- Use camelCase property names in GSAP vars.
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# GSAP Framework Patterns
|
|
2
|
+
|
|
3
|
+
Extracted: 2026-05-23
|
|
4
|
+
|
|
5
|
+
Sources:
|
|
6
|
+
|
|
7
|
+
- https://gsap.com/docs/v3/GSAP/gsap.context()/
|
|
8
|
+
- https://gsap.com/docs/v3/Plugins/ScrollTrigger/
|
|
9
|
+
- https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-frameworks/SKILL.md
|
|
10
|
+
|
|
11
|
+
## When to Use
|
|
12
|
+
|
|
13
|
+
Use this reference for Vue, Nuxt, Svelte, SvelteKit, and other component frameworks that are not React. For React and Next.js, prefer [react-patterns.md](react-patterns.md).
|
|
14
|
+
|
|
15
|
+
## Principles
|
|
16
|
+
|
|
17
|
+
- Create tweens, timelines, and ScrollTriggers only after the component DOM exists.
|
|
18
|
+
- Scope selector text to a component root with `gsap.context(callback, scope)`.
|
|
19
|
+
- Revert the context during unmount/destroy so animations, inline styles, and ScrollTriggers are cleaned up.
|
|
20
|
+
- Register plugins once at app/module level, not inside render paths or repeatedly called component bodies.
|
|
21
|
+
- Call `ScrollTrigger.refresh()` after async content, route transitions, font loading, or layout changes that affect trigger positions.
|
|
22
|
+
|
|
23
|
+
## Vue and Nuxt
|
|
24
|
+
|
|
25
|
+
In Vue 3, create GSAP work in `onMounted()` and clean it up in `onUnmounted()`:
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import { onMounted, onUnmounted, ref } from "vue";
|
|
29
|
+
import { gsap } from "gsap";
|
|
30
|
+
|
|
31
|
+
const container = ref(null);
|
|
32
|
+
let ctx;
|
|
33
|
+
|
|
34
|
+
onMounted(() => {
|
|
35
|
+
ctx = gsap.context(() => {
|
|
36
|
+
gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.08 });
|
|
37
|
+
}, container.value);
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
onUnmounted(() => {
|
|
41
|
+
ctx?.revert();
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
For Nuxt, keep browser-only GSAP work in client-safe lifecycle and lazy-load less common plugins when bundle size matters.
|
|
46
|
+
|
|
47
|
+
## Svelte and SvelteKit
|
|
48
|
+
|
|
49
|
+
In Svelte, create GSAP work in `onMount()` and return cleanup:
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
import { onMount } from "svelte";
|
|
53
|
+
import { gsap } from "gsap";
|
|
54
|
+
|
|
55
|
+
let container;
|
|
56
|
+
|
|
57
|
+
onMount(() => {
|
|
58
|
+
const ctx = gsap.context(() => {
|
|
59
|
+
gsap.to(".box", { x: 100, duration: 0.6 });
|
|
60
|
+
}, container);
|
|
61
|
+
|
|
62
|
+
return () => ctx.revert();
|
|
63
|
+
});
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
For SvelteKit, keep DOM-dependent GSAP setup on the client and avoid running it during server rendering.
|
|
67
|
+
|
|
68
|
+
## ScrollTrigger Cleanup
|
|
69
|
+
|
|
70
|
+
ScrollTriggers created inside `gsap.context()` are reverted with the context. Place `scrollTrigger` configs and `ScrollTrigger.create()` calls inside the same context as related tweens or timelines.
|
|
71
|
+
|
|
72
|
+
When trigger positions depend on data, images, fonts, or route transitions, refresh after the DOM has settled.
|
|
73
|
+
|
|
74
|
+
## Guardrails
|
|
75
|
+
|
|
76
|
+
- Do not create GSAP animations before component DOM refs are available.
|
|
77
|
+
- Do not use unscoped selector strings in reusable component instances.
|
|
78
|
+
- Do not skip teardown; detached DOM nodes with live animations or ScrollTriggers cause leaks and stale callbacks.
|
|
79
|
+
- Do not register plugins in reactive code that runs frequently.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Official GSAP Source Map
|
|
2
2
|
|
|
3
|
-
Extracted: 2026-05-
|
|
3
|
+
Extracted: 2026-05-23
|
|
4
4
|
|
|
5
5
|
This skill may only use official GSAP sources. The official GSAP docs page links the official `greensock/gsap-skills` repository as "AI Skills", so that repository is accepted as source material for agent-oriented guidance.
|
|
6
6
|
|
|
@@ -22,9 +22,14 @@ This skill may only use official GSAP sources. The official GSAP docs page links
|
|
|
22
22
|
| Source | Use |
|
|
23
23
|
| --- | --- |
|
|
24
24
|
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-core/SKILL.md | Agent-oriented core tween, transform, easing, `matchMedia()`, and recommendation guidance |
|
|
25
|
+
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-timeline/SKILL.md | Agent-oriented timeline sequencing, position parameters, labels, nesting, playback, and ScrollTrigger placement guidance |
|
|
26
|
+
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-plugins/SKILL.md | Agent-oriented plugin selection, registration, install/licensing, SplitText, MorphSVG, DrawSVG, Draggable, Flip, and related plugin guidance |
|
|
27
|
+
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-utils/SKILL.md | Agent-oriented `gsap.utils` guidance for mapping, clamping, snapping, randomization, selectors, arrays, wrapping, and piping |
|
|
25
28
|
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-react/SKILL.md | Agent-oriented React, `useGSAP()`, context, cleanup, SSR, and callback guidance |
|
|
26
29
|
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-scrolltrigger/SKILL.md | Agent-oriented ScrollTrigger registration, scroll-linked animation, pin, scrub, and cleanup guidance |
|
|
27
30
|
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-performance/SKILL.md | Agent-oriented transform/performance cautions |
|
|
31
|
+
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-frameworks/SKILL.md | Agent-oriented Vue, Nuxt, Svelte, SvelteKit, lifecycle, scoping, and cleanup guidance |
|
|
32
|
+
| https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/llms.txt | Official AI agent skill index, trigger terms, plugin availability note, and upstream routing map |
|
|
28
33
|
|
|
29
34
|
## Verification Rule
|
|
30
35
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# GSAP Plugin Selection
|
|
2
2
|
|
|
3
|
-
Extracted: 2026-05-
|
|
3
|
+
Extracted: 2026-05-23
|
|
4
4
|
|
|
5
5
|
Sources:
|
|
6
6
|
|
|
@@ -15,6 +15,8 @@ Use the smallest GSAP surface that solves the motion problem. Core tweens and ti
|
|
|
15
15
|
|
|
16
16
|
Register every plugin used with `gsap.registerPlugin(...)`. Official installation guidance recommends registration in module environments so build tools do not drop plugins during tree shaking.
|
|
17
17
|
|
|
18
|
+
All GSAP plugins are available from the public `gsap` package, including formerly Club GSAP plugins such as `SplitText`, `MorphSVGPlugin`, and `DrawSVGPlugin`. Do not suggest a private GreenSock registry, `.npmrc` auth token, license key, or paid Club GSAP membership for plugin access.
|
|
19
|
+
|
|
18
20
|
## Selection Matrix
|
|
19
21
|
|
|
20
22
|
| Need | Official GSAP Tool |
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# GSAP Utility Patterns
|
|
2
|
+
|
|
3
|
+
Extracted: 2026-05-23
|
|
4
|
+
|
|
5
|
+
Sources:
|
|
6
|
+
|
|
7
|
+
- https://gsap.com/docs/v3/GSAP/UtilityMethods/
|
|
8
|
+
- https://raw.githubusercontent.com/greensock/gsap-skills/main/skills/gsap-utils/SKILL.md
|
|
9
|
+
|
|
10
|
+
## When to Use
|
|
11
|
+
|
|
12
|
+
Use `gsap.utils` when animation logic needs value mapping, clamping, snapping, randomization, reusable helper functions, scoped selectors, or array normalization. Utilities do not need plugin registration.
|
|
13
|
+
|
|
14
|
+
Use utility functions inside tween vars, ScrollTrigger callbacks, pointer handlers, or plain JavaScript that drives GSAP state.
|
|
15
|
+
|
|
16
|
+
## Function Form
|
|
17
|
+
|
|
18
|
+
Many utilities accept the value to transform as the final argument. When that value is omitted, the utility returns a reusable function that accepts the value later. Use this form when the same range or rule is applied repeatedly.
|
|
19
|
+
|
|
20
|
+
`random()` is the notable exception: pass `true` as the final argument when you need a reusable random function.
|
|
21
|
+
|
|
22
|
+
## Selection Matrix
|
|
23
|
+
|
|
24
|
+
| Need | Utility |
|
|
25
|
+
| --- | --- |
|
|
26
|
+
| Keep a number inside a range | `gsap.utils.clamp(min, max, value?)` |
|
|
27
|
+
| Convert a number from one range to another | `gsap.utils.mapRange(inMin, inMax, outMin, outMax, value?)` |
|
|
28
|
+
| Convert a range value to progress from `0` to `1` | `gsap.utils.normalize(min, max, value?)` |
|
|
29
|
+
| Blend numbers, colors, arrays, or matching objects by progress | `gsap.utils.interpolate(start, end, progress?)` |
|
|
30
|
+
| Pick random numbers or array items | `gsap.utils.random(...)` |
|
|
31
|
+
| Align values to increments or allowed values | `gsap.utils.snap(snapTo, value?)` |
|
|
32
|
+
| Convert selectors, NodeLists, or single elements into arrays | `gsap.utils.toArray(value, scope?)` |
|
|
33
|
+
| Create a selector scoped to a component/container | `gsap.utils.selector(scope)` |
|
|
34
|
+
| Cycle a value through a range | `gsap.utils.wrap(min, max, value?)` |
|
|
35
|
+
| Compose multiple transforms into one function | `gsap.utils.pipe(...functions)` |
|
|
36
|
+
|
|
37
|
+
## Patterns
|
|
38
|
+
|
|
39
|
+
Use function-form utilities for repeated callback work:
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
const toDegrees = gsap.utils.mapRange(0, 1, 0, 360);
|
|
43
|
+
const snapProgress = gsap.utils.snap(0.1);
|
|
44
|
+
|
|
45
|
+
function onUpdate(progress) {
|
|
46
|
+
return snapProgress(toDegrees(progress));
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Use scoped selectors in components when direct refs are too verbose:
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
const q = gsap.utils.selector(container);
|
|
54
|
+
gsap.to(q(".item"), { y: 24, stagger: 0.05 });
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Use string random values inside tween vars when each target should receive its own value:
|
|
58
|
+
|
|
59
|
+
```js
|
|
60
|
+
gsap.to(".particle", { x: "random(-100, 100, 5)", y: "random(-60, 60, 5)" });
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Guardrails
|
|
64
|
+
|
|
65
|
+
- Do not use numeric range utilities for unit conversion; use documented unit helpers when units matter.
|
|
66
|
+
- Prefer `toArray()` when downstream logic expects a real array instead of a NodeList.
|
|
67
|
+
- Prefer `selector(scope)` or `toArray(value, scope)` for framework components so selectors do not leak outside the component.
|
|
68
|
+
- Check official utility docs before using helpers not listed here.
|
|
@@ -53,5 +53,5 @@ Chaining notations document integrated workflows where multiple skills are seque
|
|
|
53
53
|
```text
|
|
54
54
|
Updating root AGENTS.md guidance
|
|
55
55
|
-> agents-root-orchestrator
|
|
56
|
-
-> skill
|
|
56
|
+
-> forge-me-a-skill (if reusable workflow docs changed)
|
|
57
57
|
```
|
package/package.json
CHANGED
|
@@ -562,7 +562,7 @@ export function renderAgentsMarkdown({ skills, detections, generatedAt, projectN
|
|
|
562
562
|
"| --------- | ----------------------- |",
|
|
563
563
|
"| Planning feature work, bug fixes, and multi-phase implementation | `spec-driven-development` |",
|
|
564
564
|
"| Executing approved implementation plans | `spec-driven-development` -> task-specific skills |",
|
|
565
|
-
"| Creating or updating reusable skills | `skill
|
|
565
|
+
"| Creating or updating reusable skills | `forge-me-a-skill` |",
|
|
566
566
|
"| Creating or updating root AGENTS orchestration guidance | `agents-root-orchestrator` |",
|
|
567
567
|
"",
|
|
568
568
|
"## When",
|
|
@@ -598,14 +598,14 @@ export function renderAgentsMarkdown({ skills, detections, generatedAt, projectN
|
|
|
598
598
|
"```text",
|
|
599
599
|
"Updating root AGENTS.md guidance",
|
|
600
600
|
" -> agents-root-orchestrator",
|
|
601
|
-
" -> skill
|
|
601
|
+
" -> forge-me-a-skill (if reusable workflow docs changed)",
|
|
602
602
|
"```",
|
|
603
603
|
"",
|
|
604
604
|
"### Skill Introduction Workflow",
|
|
605
605
|
"",
|
|
606
606
|
"```text",
|
|
607
607
|
"Asking for a new reusable skill",
|
|
608
|
-
" -> skill
|
|
608
|
+
" -> forge-me-a-skill",
|
|
609
609
|
" -> spec-driven-development",
|
|
610
610
|
" -> agents-root-orchestrator",
|
|
611
611
|
"```",
|
|
File without changes
|