@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 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-creator` |
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-creator
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-creator/SKILL.md](../skill-creator/SKILL.md)
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-creator` |
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-creator (if workflow guidance changes)
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-creator
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-creator"
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 Creator Guide
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-creator`, `commit-writer`, `pr-writer` |
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-creator",
3
- "title": "Skill Creator",
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-03"
6
+ last-edit: "2026-05-23"
7
7
  license: "Apache-2.0"
8
- version: "1.0.0"
9
- changelog: "Added aggregate GSAP animation guidance backed by official GSAP docs and official GSAP AI skills; improves frontend motion implementation with verified timelines, ScrollTrigger, React cleanup, plugin, performance, and accessibility patterns; affects frontend animation routing and catalog discovery"
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, or React `useGSAP()`.
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
- | Flip, Draggable, SplitText, SVG, ScrollSmoother, utility plugins | [references/plugin-selection.md](references/plugin-selection.md) |
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-03",
13
+ "last-edit": "2026-05-23",
14
14
  "license": "Apache-2.0",
15
- "version": "1.0.0",
16
- "changelog": "Added aggregate GSAP animation guidance backed by official GSAP docs and official GSAP AI skills; improves frontend motion implementation with verified timelines, ScrollTrigger, React cleanup, plugin, performance, and accessibility patterns; affects frontend animation routing and catalog discovery",
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-03
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-03
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-03
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-creator (if reusable workflow docs changed)
56
+ -> forge-me-a-skill (if reusable workflow docs changed)
57
57
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skilly-hand/skilly-hand",
3
- "version": "0.28.0",
3
+ "version": "0.29.0",
4
4
  "license": "CC-BY-NC-4.0",
5
5
  "type": "module",
6
6
  "repository": {
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skilly-hand/catalog",
3
- "version": "0.28.0",
3
+ "version": "0.29.0",
4
4
  "private": true,
5
5
  "type": "module"
6
6
  }
@@ -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-creator` |",
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-creator (if reusable workflow docs changed)",
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-creator",
608
+ " -> forge-me-a-skill",
609
609
  " -> spec-driven-development",
610
610
  " -> agents-root-orchestrator",
611
611
  "```",
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skilly-hand/cli",
3
- "version": "0.28.0",
3
+ "version": "0.29.0",
4
4
  "private": true,
5
5
  "type": "module",
6
6
  "bin": {
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skilly-hand/core",
3
- "version": "0.28.0",
3
+ "version": "0.29.0",
4
4
  "private": true,
5
5
  "type": "module"
6
6
  }
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skilly-hand/detectors",
3
- "version": "0.28.0",
3
+ "version": "0.29.0",
4
4
  "private": true,
5
5
  "type": "module"
6
6
  }