@skilly-hand/skilly-hand 0.26.0 → 0.26.2

package/catalog/skills/motion-animation/references/react-patterns.md

@@ -0,0 +1,86 @@
+# Motion React Patterns
+
+Extracted: 2026-05-03
+
+Sources:
+
+- https://motion.dev/docs/react
+- https://motion.dev/docs/react-motion-component
+- https://motion.dev/docs/react-animate-presence
+- https://motion.dev/docs/react-use-scroll
+- https://motion.dev/docs/react-use-reduced-motion
+
+## Selection
+
+Use Motion for React when a React project already uses Motion/Framer Motion, when animation should be expressed through component props, or when the desired behavior is gestures, exit animation, layout animation, scroll animation, or SVG animation in React.
+
+Use JavaScript patterns from [js-patterns.md](js-patterns.md) for framework-agnostic utilities. Use `gsap-animation` when the project requires GSAP-specific timelines, ScrollTrigger behavior, plugins, or existing GSAP conventions.
+
+## Installation and Imports
+
+Motion for React uses the same package:
+
+```bash
+npm install motion
+```
+
+Import React APIs from `"motion/react"`:
+
+```tsx
+import { motion } from "motion/react";
+```
+
+Ask before adding `motion` when it is not already present.
+
+## motion Components
+
+Use `motion` components for animating HTML and SVG elements with props:
+
+- `initial` defines the starting visual state.
+- `animate` defines the current target visual state.
+- `transition` defines duration, easing, spring, and related transition behavior.
+- Variants can coordinate named states across parent/child component trees.
+
+Use `motion.create()` for custom components only when the official component integration pattern is needed.
+
+## Gestures
+
+Use React gesture props for interaction feedback:
+
+- `whileHover` for hover targets.
+- `whileTap` for press/tap targets.
+- Hover, tap, focus, and drag are supported gesture categories in the React quick start.
+
+Keep gesture motion brief and meaningful, and pair it with accessible non-motion feedback when needed.
+
+## Scroll Animation
+
+Use `whileInView` for scroll-triggered animation when an element should animate as it enters or leaves the viewport.
+
+Use `useScroll()` when a MotionValue should be linked directly to scroll progress, such as a progress bar scale.
+
+## Layout Animation
+
+Use `layout` when React layout changes in size, position, or reorder should animate smoothly.
+
+Use `layoutId` for shared layout transitions between different elements.
+
+When mixing layout animation with exits, consider official `AnimatePresence` mode guidance and `LayoutGroup` guidance if surrounding components need coordinated layout updates.
+
+## Exit Animation
+
+Use `AnimatePresence` when removed React elements should animate out before leaving the DOM:
+
+- Place the conditional child inside `AnimatePresence`; do not unmount `AnimatePresence` at the same time as the child.
+- Give every direct child a stable unique `key`.
+- Use the `exit` prop on `motion` components.
+- Use `mode="wait"` only for one child at a time.
+- Use `mode="popLayout"` carefully with positioned parents and forwarded refs for custom immediate children.
+
+## SVG Animation
+
+Motion for React supports SVG animation. Use `motion` SVG elements and official SVG props such as `pathLength` for path drawing effects where appropriate.
+
+## React Server Components
+
+In React Server Component projects, components that use Motion runtime behavior must be client components. Keep Motion imports and animated components in client-side files.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/skilly-hand",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "repository": {

package/packages/catalog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/catalog",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "private": true,
   "type": "module"
 }

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/cli",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "private": true,
   "type": "module",
   "bin": {

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/core",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "private": true,
   "type": "module"
 }

package/packages/core/src/index.js

@@ -269,6 +269,26 @@ function parseSkillIds(input) {
   return uniq((input || []).flatMap((value) => String(value).split(",")).map((value) => value.trim()).filter(Boolean));
 }
 
+function expandSkillDependencies({ catalog, skillIds }) {
+  const byId = new Map(catalog.filter((skill) => skill.portable).map((skill) => [skill.id, skill]));
+  const expanded = new Set(skillIds);
+  const pending = [...skillIds];
+
+  while (pending.length > 0) {
+    const skillId = pending.pop();
+    const skill = byId.get(skillId);
+    if (!skill || !Array.isArray(skill.dependencies)) continue;
+
+    for (const dependencyId of skill.dependencies) {
+      if (!byId.has(dependencyId) || expanded.has(dependencyId)) continue;
+      expanded.add(dependencyId);
+      pending.push(dependencyId);
+    }
+  }
+
+  return expanded;
+}
+
 export function resolveSkillSelectionByIds({ catalog, selectedSkillIds = [] }) {
   const ids = parseSkillIds(selectedSkillIds);
   const portableById = new Map(
@@ -293,7 +313,9 @@ export function resolveSkillSelectionByIds({ catalog, selectedSkillIds = [] }) {
     throw new Error(invalid.join("; "));
   }
 
-  return ids.map((id) => portableById.get(id)).sort((a, b) => a.id.localeCompare(b.id));
+  const expanded = expandSkillDependencies({ catalog, skillIds: ids });
+
+  return [...expanded].map((id) => portableById.get(id)).sort((a, b) => a.id.localeCompare(b.id));
 }
 
 export function resolveSkillSelection({ catalog, detections, includeTags = [], excludeTags = [] }) {
@@ -306,7 +328,8 @@ export function resolveSkillSelection({ catalog, detections, includeTags = [], e
     }
   }
 
-  let selected = catalog.filter((skill) => requested.has(skill.id) && skill.portable);
+  const expanded = expandSkillDependencies({ catalog, skillIds: [...requested] });
+  let selected = catalog.filter((skill) => expanded.has(skill.id) && skill.portable);
 
   if (includeTags.length > 0) {
     selected = selected.filter((skill) => includeTags.every((tag) => skill.tags.includes(tag)));

package/packages/detectors/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skilly-hand/detectors",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "private": true,
   "type": "module"
 }

package/packages/detectors/src/index.js

@@ -187,6 +187,15 @@ export async function detectProject(cwd) {
     });
   }
 
+  if ("gsap" in deps || "@gsap/react" in deps) {
+    addDetection(results, {
+      technology: "gsap",
+      confidence: 0.95,
+      reasons: ['Dependency "gsap" or "@gsap/react" found in package.json'],
+      recommendedSkillIds: ["gsap-animation"]
+    });
+  }
+
   return results.sort((a, b) => b.confidence - a.confidence || a.technology.localeCompare(b.technology));
 }