opencode-skills-collection 3.1.5 → 3.1.7

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.
Files changed (36) hide show
  1. package/bundled-skills/.antigravity-install-manifest.json +4 -1
  2. package/bundled-skills/007/scripts/scanners/dependency_scanner.py +2 -2
  3. package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
  4. package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
  5. package/bundled-skills/docs/maintainers/repo-growth-seo.md +3 -3
  6. package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
  7. package/bundled-skills/docs/users/bundles.md +1 -1
  8. package/bundled-skills/docs/users/claude-code-skills.md +1 -1
  9. package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
  10. package/bundled-skills/docs/users/getting-started.md +1 -1
  11. package/bundled-skills/docs/users/kiro-integration.md +1 -1
  12. package/bundled-skills/docs/users/usage.md +4 -4
  13. package/bundled-skills/docs/users/visual-guide.md +4 -4
  14. package/bundled-skills/docx-official/ooxml/scripts/pack.py +12 -0
  15. package/bundled-skills/docx-official/ooxml/scripts/unpack.py +28 -7
  16. package/bundled-skills/docx-official/ooxml/scripts/validation/base.py +18 -13
  17. package/bundled-skills/docx-official/ooxml/scripts/validation/docx.py +6 -6
  18. package/bundled-skills/docx-official/ooxml/scripts/validation/pptx.py +6 -6
  19. package/bundled-skills/emil-design-eng/SKILL.md +702 -0
  20. package/bundled-skills/hugging-face-model-trainer/scripts/convert_to_gguf.py +3 -2
  21. package/bundled-skills/infinity/SKILL.md +173 -0
  22. package/bundled-skills/loki-mode/autonomy/run.sh +17 -8
  23. package/bundled-skills/loki-mode/examples/todo-app-generated/backend/package-lock.json +17 -13
  24. package/bundled-skills/loki-mode/examples/todo-app-generated/backend/package.json +3 -3
  25. package/bundled-skills/macos-spm-app-packaging/assets/templates/setup_dev_signing.sh +11 -8
  26. package/bundled-skills/macos-spm-app-packaging/assets/templates/sign-and-notarize.sh +10 -5
  27. package/bundled-skills/pptx-official/ooxml/scripts/pack.py +12 -0
  28. package/bundled-skills/pptx-official/ooxml/scripts/unpack.py +28 -7
  29. package/bundled-skills/pptx-official/ooxml/scripts/validation/base.py +18 -13
  30. package/bundled-skills/pptx-official/ooxml/scripts/validation/docx.py +6 -6
  31. package/bundled-skills/pptx-official/ooxml/scripts/validation/pptx.py +6 -6
  32. package/bundled-skills/review-animations/SKILL.md +139 -0
  33. package/bundled-skills/review-animations/STANDARDS.md +188 -0
  34. package/bundled-skills/skill-creator/scripts/package_skill.py +11 -1
  35. package/package.json +2 -2
  36. package/skills_index.json +66 -0
@@ -4,7 +4,7 @@ Validator for PowerPoint presentation XML files against XSD schemas.
4
4
 
5
5
  import re
6
6
 
7
- from .base import BaseSchemaValidator
7
+ from .base import BaseSchemaValidator, parse_xml
8
8
 
9
9
 
10
10
  class PPTXSchemaValidator(BaseSchemaValidator):
@@ -86,7 +86,7 @@ class PPTXSchemaValidator(BaseSchemaValidator):
86
86
 
87
87
  for xml_file in self.xml_files:
88
88
  try:
89
- root = lxml.etree.parse(str(xml_file)).getroot()
89
+ root = parse_xml(str(xml_file)).getroot()
90
90
 
91
91
  # Check all elements for ID attributes
92
92
  for elem in root.iter():
@@ -142,7 +142,7 @@ class PPTXSchemaValidator(BaseSchemaValidator):
142
142
  for slide_master in slide_masters:
143
143
  try:
144
144
  # Parse the slide master file
145
- root = lxml.etree.parse(str(slide_master)).getroot()
145
+ root = parse_xml(str(slide_master)).getroot()
146
146
 
147
147
  # Find the corresponding _rels file for this slide master
148
148
  rels_file = slide_master.parent / "_rels" / f"{slide_master.name}.rels"
@@ -155,7 +155,7 @@ class PPTXSchemaValidator(BaseSchemaValidator):
155
155
  continue
156
156
 
157
157
  # Parse the relationships file
158
- rels_root = lxml.etree.parse(str(rels_file)).getroot()
158
+ rels_root = parse_xml(str(rels_file)).getroot()
159
159
 
160
160
  # Build a set of valid relationship IDs that point to slide layouts
161
161
  valid_layout_rids = set()
@@ -209,7 +209,7 @@ class PPTXSchemaValidator(BaseSchemaValidator):
209
209
 
210
210
  for rels_file in slide_rels_files:
211
211
  try:
212
- root = lxml.etree.parse(str(rels_file)).getroot()
212
+ root = parse_xml(str(rels_file)).getroot()
213
213
 
214
214
  # Find all slideLayout relationships
215
215
  layout_rels = [
@@ -258,7 +258,7 @@ class PPTXSchemaValidator(BaseSchemaValidator):
258
258
  for rels_file in slide_rels_files:
259
259
  try:
260
260
  # Parse the relationships file
261
- root = lxml.etree.parse(str(rels_file)).getroot()
261
+ root = parse_xml(str(rels_file)).getroot()
262
262
 
263
263
  # Find all notesSlide relationships
264
264
  for rel in root.findall(
@@ -0,0 +1,139 @@
1
+ ---
2
+ name: review-animations
3
+ description: "Use when reviewing animation and motion code against a strict craft, performance, accessibility, and interaction-quality bar."
4
+ category: frontend
5
+ risk: safe
6
+ source: community
7
+ source_repo: emilkowalski/skills
8
+ source_type: community
9
+ date_added: "2026-06-25"
10
+ author: Emil Kowalski
11
+ license: MIT
12
+ license_source: "https://github.com/emilkowalski/skills/blob/main/LICENSE.txt"
13
+ tags: [frontend, animation, motion, review, accessibility]
14
+ tools: [claude, cursor, codex, antigravity]
15
+ disable-model-invocation: true
16
+ ---
17
+
18
+ # Reviewing Animations
19
+
20
+ ## When to Use
21
+
22
+ - Use when the user asks for an animation, motion, or interaction review.
23
+ - Use when a frontend diff changes CSS transitions, keyframes, Framer Motion, WAAPI, hover effects, gestures, toasts, modals, drawers, popovers, or loaders.
24
+ - Use when motion quality, perceived performance, interruptibility, reduced-motion behavior, or animation origin needs a strict review verdict.
25
+
26
+ ## Limitations
27
+
28
+ - This skill reviews motion and animation only; it should not replace a general code review, accessibility audit, or product design critique.
29
+ - It does not implement fixes unless the user separately asks for code changes.
30
+ - Final approval may still require browser, slow-motion, and real-device testing for gestures and highly visual interactions.
31
+
32
+ ## Examples
33
+
34
+ Ask for this skill when you need a table of concrete motion findings, suggested fixes, and an explicit Block or Approve verdict for changed animation code.
35
+
36
+ A specialized review skill. It does ONE thing: review animation and motion code against a high craft bar. It does not write features, fix unrelated bugs, or review non-motion code. If asked to review general code, decline and point to a general review skill.
37
+
38
+ ## Operating Posture
39
+
40
+ You are a senior motion-design reviewer with a brutal eye for craft. Your bias is toward **motion that feels right**, not motion that merely runs. A transition that "works" but feels sluggish, lands from the wrong origin, fires too often, or drops frames is a regression, not a pass. Default to flagging. Approval is earned, not assumed.
41
+
42
+ The substantive bar comes from Emil Kowalski's animation philosophy (animations.dev). The review *method* — non-negotiable standards, escalation triggers, a remedial hierarchy, tiered output, and explicit approval criteria — is adapted from aggressive code-quality review.
43
+
44
+ For the full rule catalog (easing curves, duration tables, spring config, gestures, clip-path, performance, a11y), see [STANDARDS.md](STANDARDS.md). Load it whenever a finding needs a precise value or citation.
45
+
46
+ ## The Ten Non-Negotiable Standards
47
+
48
+ Every animation in the diff is measured against these. A violation is a finding.
49
+
50
+ 1. **Justified motion.** Every animation must answer "why does this animate?" — spatial consistency, state indication, feedback, explanation, or preventing a jarring change. "It looks cool" on a frequently-seen element is a block.
51
+
52
+ 2. **Frequency-appropriate.** Match motion to how often it's seen. Keyboard-initiated and 100+/day actions get **no** animation. Tens/day gets reduced motion. Occasional gets standard. Rare/first-time can have delight.
53
+
54
+ 3. **Responsive easing.** Entering/exiting elements use `ease-out` or a strong custom curve. `ease-in` on UI is a block — it delays the moment the user watches most. Built-in CSS easings are too weak; expect custom cubic-beziers.
55
+
56
+ 4. **Sub-300ms UI.** UI animations stay under 300ms; anything slower on a UI element needs justification or it's a finding. Per-element budgets live in [STANDARDS.md](STANDARDS.md).
57
+
58
+ 5. **Origin & physical correctness.** Popovers/dropdowns/tooltips scale from their trigger (`transform-origin`), not center. Never animate from `scale(0)` — start from `scale(0.9–0.97)` + opacity (Modals are exempt — they stay centered.)
59
+
60
+ 6. **Interruptibility.** Rapidly-triggered or gesture-driven motion (toasts, toggles, drags) must be interruptible — CSS transitions or springs that retarget from current state, not keyframes that restart from zero.
61
+
62
+ 7. **GPU-only properties.** Animate `transform` and `opacity` only. Animating `width`/`height`/`margin`/`padding`/`top`/`left` (or Framer Motion `x`/`y`/`scale` shorthands under load) is a performance finding.
63
+
64
+ 8. **Accessibility.** `prefers-reduced-motion` is honored (gentler, not zero — keep opacity/color, drop movement). Hover animations are gated behind `@media (hover: hover) and (pointer: fine)`.
65
+
66
+ 9. **Asymmetric enter/exit.** Deliberate actions (a press, a hold, a destructive confirm) animate slower; system responses snap. Symmetric timing on a press-and-release or hold interaction is a finding.
67
+
68
+ 10. **Cohesion.** Motion matches the component's personality and the rest of the product — playful can be bouncier, a dashboard stays crisp. Mismatched personality, or a jarring crossfade where a subtle blur would bridge two states, is a finding. When unsure whether motion feels right, the strongest move is often to delete it.
69
+
70
+ ## Aggressive Escalation Triggers
71
+
72
+ Flag these on sight, hard:
73
+
74
+ - `transition: all` (unbounded property animation)
75
+ - `scale(0)` or pure-fade entrances with no initial transform
76
+ - `ease-in` on any UI interaction; weak built-in easing on a deliberate animation
77
+ - Animation on a keyboard shortcut, command-palette toggle, or 100+/day action
78
+ - UI duration > 300ms with no stated reason
79
+ - `transform-origin: center` on a trigger-anchored popover/dropdown/tooltip
80
+ - Keyframes on toasts, toggles, or anything added/triggered rapidly
81
+ - Animating layout properties (`width`/`height`/`margin`/`padding`/`top`/`left`)
82
+ - Framer Motion `x`/`y`/`scale` props on motion that runs while the page is busy
83
+ - Updating a CSS variable on a parent to drive a child transform (style recalc storm)
84
+ - Missing `prefers-reduced-motion` handling on movement
85
+ - Ungated `:hover` motion
86
+ - Symmetric enter/exit timing on a press-and-release or hold interaction
87
+ - Everything-at-once entrance where a 30–80ms stagger belongs
88
+
89
+ ## Remedial Preference Hierarchy
90
+
91
+ When proposing fixes, prefer earlier moves over later ones:
92
+
93
+ 1. **Delete the animation** (high-frequency / no purpose / keyboard-triggered).
94
+ 2. **Reduce it** — shorter duration, smaller transform, fewer animated properties.
95
+ 3. **Fix the easing** — swap `ease-in`→`ease-out`/custom curve; use a strong cubic-bezier.
96
+ 4. **Fix the origin/physicality** — correct `transform-origin`; replace `scale(0)` with `scale(0.95)`+opacity.
97
+ 5. **Make it interruptible** — keyframes → transitions, or a spring for gesture-driven motion.
98
+ 6. **Move it to the GPU** — layout props → `transform`/`opacity`; shorthand → full `transform` string; WAAPI for programmatic CSS.
99
+ 7. **Asymmetric timing** — slow the deliberate phase, snap the response.
100
+ 8. **Polish** — blur to mask crossfades, stagger for groups, `@starting-style` for entry, spring for "alive" elements.
101
+ 9. **Accessibility & cohesion** — add reduced-motion + hover gating; tune to match the component's personality.
102
+
103
+ ## Required Output Format
104
+
105
+ Two parts, in this order.
106
+
107
+ ### Part 1 — Findings table (REQUIRED)
108
+
109
+ A single markdown table. One row per issue. Never a "Before:/After:" list.
110
+
111
+ | Before | After | Why |
112
+ | --- | --- | --- |
113
+ | `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; `all` animates unintended properties off-GPU |
114
+ | `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Nothing appears from nothing — `scale(0)` looks like it came from nowhere |
115
+ | `ease-in` on dropdown | `ease-out` + custom curve | `ease-in` delays the moment the user watches most; feels sluggish |
116
+ | `transform-origin: center` on popover | `var(--radix-popover-content-transform-origin)` | Popovers scale from their trigger, not center (modals are exempt) |
117
+
118
+ ### Part 2 — Verdict (REQUIRED)
119
+
120
+ Group remaining commentary by impact tier, highest first. Omit empty tiers.
121
+
122
+ 1. **Feel-breaking regressions** — sluggish easing, comes-from-nowhere, fires on high-frequency/keyboard actions.
123
+ 2. **Missed simplifications** — animations that should be removed or drastically reduced.
124
+ 3. **Performance** — non-GPU properties, dropped-frame risks, recalc storms.
125
+ 4. **Interruptibility & timing** — keyframes where transitions/springs belong; symmetric timing that should be asymmetric.
126
+ 5. **Origin, physicality & cohesion** — wrong origin, mismatched personality, jarring crossfades.
127
+ 6. **Accessibility** — reduced-motion and pointer/hover gating.
128
+
129
+ Close with an explicit decision:
130
+
131
+ - **Block** — any feel-breaking regression, animation on a keyboard/high-frequency action, `scale(0)`/`ease-in` on UI, or a non-GPU animation with an easy GPU fix.
132
+ - **Approve** — no feel-breaking regressions, no obvious motion that should be deleted, durations and easing within bounds, interruptibility handled where needed, reduced-motion respected.
133
+
134
+ Be specific and cite `file:line`. When a value is needed (a curve, a duration, a spring config), pull the exact one from [STANDARDS.md](STANDARDS.md) rather than approximating.
135
+
136
+ ## Guidelines
137
+
138
+ - Prefer CSS transitions/`@starting-style`/WAAPI for predetermined motion; JS/springs for dynamic, interruptible, gesture-driven motion.
139
+ - When unsure whether motion feels right, recommend reviewing it in slow motion / frame-by-frame and with fresh eyes the next day rather than guessing.
@@ -0,0 +1,188 @@
1
+ # Animation Standards Reference
2
+
3
+ The precise values, curves, and rules behind the review. Cite these in findings instead of approximating. Distilled from Emil Kowalski's design engineering philosophy ([animations.dev](https://animations.dev/)).
4
+
5
+ ## Should it animate? (frequency table)
6
+
7
+ | Frequency | Decision |
8
+ | --- | --- |
9
+ | 100+ times/day (keyboard shortcuts, command palette toggle) | No animation. Ever. |
10
+ | Tens of times/day (hover effects, list navigation) | Remove or drastically reduce |
11
+ | Occasional (modals, drawers, toasts) | Standard animation |
12
+ | Rare / first-time (onboarding, feedback, celebrations) | Can add delight |
13
+
14
+ **Never animate keyboard-initiated actions** — they repeat hundreds of times daily; animation makes them feel slow and disconnected. (Raycast has no open/close animation — correct for something used hundreds of times a day.)
15
+
16
+ Valid purposes for motion: spatial consistency, state indication, explanation, feedback, preventing jarring change. "It looks cool" on a frequently-seen element is not valid.
17
+
18
+ ## Easing
19
+
20
+ Decision order:
21
+ - Entering or exiting → **`ease-out`** (starts fast, feels responsive)
22
+ - Moving / morphing on screen → **`ease-in-out`**
23
+ - Hover / color change → **`ease`**
24
+ - Constant motion (marquee, progress) → **`linear`**
25
+ - Default → **`ease-out`**
26
+
27
+ **Never `ease-in` on UI.** It starts slow, delaying the exact moment the user is watching. `ease-out` at 200ms *feels* faster than `ease-in` at 200ms.
28
+
29
+ Built-in CSS easings are too weak. Use strong custom curves:
30
+
31
+ ```css
32
+ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */
33
+ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* strong ease-in-out for on-screen movement */
34
+ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve (Ionic) */
35
+ ```
36
+
37
+ Find curves at [easing.dev](https://easing.dev/) or [easings.co](https://easings.co/) — don't hand-roll from scratch.
38
+
39
+ ## Duration
40
+
41
+ | Element | Duration |
42
+ | --- | --- |
43
+ | Button press feedback | 100–160ms |
44
+ | Tooltips, small popovers | 125–200ms |
45
+ | Dropdowns, selects | 150–250ms |
46
+ | Modals, drawers | 200–500ms |
47
+ | Marketing / explanatory | Can be longer |
48
+
49
+ **Rule: UI animations stay under 300ms.** A 180ms dropdown feels more responsive than a 400ms one. Faster spinners make load feel faster (same actual time). Instant tooltips after the first (skip delay + animation) make a toolbar feel faster.
50
+
51
+ ## Physicality
52
+
53
+ - **Never `scale(0)`.** Start from `scale(0.9–0.97)` + `opacity: 0`. Nothing in the real world appears from nothing.
54
+ - **Origin-aware popovers.** Scale from the trigger, not center:
55
+ ```css
56
+ .popover { transform-origin: var(--radix-popover-content-transform-origin); } /* Radix */
57
+ .popover { transform-origin: var(--transform-origin); } /* Base UI */
58
+ ```
59
+ **Modals are exempt** — they appear centered in the viewport, keep `transform-origin: center`.
60
+ - **Button press feedback.** `transform: scale(0.97)` on `:active`, `transition: transform 160ms ease-out`. Subtle (0.95–0.98). Applies to any pressable element.
61
+
62
+ ## Springs
63
+
64
+ Feel natural because they simulate physics; no fixed duration — they settle on parameters. Use for: drag with momentum, "alive" elements (Dynamic Island), interruptible gestures, decorative mouse-tracking.
65
+
66
+ ```js
67
+ // Apple-style (easier to reason about) — recommended
68
+ { type: "spring", duration: 0.5, bounce: 0.2 }
69
+
70
+ // Traditional physics (more control)
71
+ { type: "spring", mass: 1, stiffness: 100, damping: 10 }
72
+ ```
73
+
74
+ Keep bounce subtle (0.1–0.3); avoid bounce in most UI — reserve for drag-to-dismiss and playful interactions. Springs maintain velocity when interrupted (keyframes restart from zero), so they're ideal for gestures users may reverse mid-motion.
75
+
76
+ Mouse interactions: interpolate with `useSpring` rather than tying value directly to mouse position (direct = artificial, no momentum). Only do this when the motion is decorative.
77
+
78
+ ## Interruptibility
79
+
80
+ CSS **transitions** can be interrupted and retargeted mid-animation; **keyframes** restart from zero. For anything triggered rapidly (toasts being added, toggles), transitions are smoother.
81
+
82
+ ```css
83
+ /* Interruptible — good for dynamic UI */
84
+ .toast { transition: transform 400ms ease; }
85
+
86
+ /* Not interruptible — avoid for dynamic UI */
87
+ @keyframes slideIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
88
+ ```
89
+
90
+ Use `@starting-style` for entry without JS:
91
+
92
+ ```css
93
+ .toast {
94
+ opacity: 1; transform: translateY(0);
95
+ transition: opacity 400ms ease, transform 400ms ease;
96
+ @starting-style { opacity: 0; transform: translateY(100%); }
97
+ }
98
+ ```
99
+
100
+ Legacy fallback: `useEffect(() => setMounted(true), [])` + `data-mounted` attribute.
101
+
102
+ ## Asymmetric timing
103
+
104
+ Slow where the user is deciding, fast where the system responds.
105
+
106
+ ```css
107
+ .overlay { transition: clip-path 200ms ease-out; } /* release: fast */
108
+ .button:active .overlay { transition: clip-path 2s linear; } /* press: slow, deliberate */
109
+ ```
110
+
111
+ ## Performance
112
+
113
+ - **Only animate `transform` and `opacity`** — they skip layout/paint and run on the GPU. `padding`/`margin`/`height`/`width`/`top`/`left` trigger all three rendering steps.
114
+ - **Don't drive child transforms via a CSS variable on the parent** — it recalcs styles for all children. Set `transform` directly on the element.
115
+ ```js
116
+ element.style.setProperty('--swipe-amount', `${d}px`); // bad: recalc on all children
117
+ element.style.transform = `translateY(${d}px)`; // good: only this element
118
+ ```
119
+ - **Framer Motion shorthands are NOT hardware-accelerated.** `x`/`y`/`scale` run on the main thread via rAF and drop frames under load. Use the full transform string:
120
+ ```jsx
121
+ <motion.div animate={{ x: 100 }} /> // drops frames under load
122
+ <motion.div animate={{ transform: "translateX(100px)" }} /> // hardware accelerated
123
+ ```
124
+ - **CSS animations beat JS under load** — they run off the main thread; rAF-based animations stutter while the browser loads/scripts/paints. Use CSS for predetermined motion, JS for dynamic/interruptible.
125
+ - **WAAPI** gives JS control with CSS performance (hardware-accelerated, interruptible, no library):
126
+ ```js
127
+ element.animate([{ clipPath: 'inset(0 0 100% 0)' }, { clipPath: 'inset(0 0 0 0)' }],
128
+ { duration: 1000, fill: 'forwards', easing: 'cubic-bezier(0.77, 0, 0.175, 1)' });
129
+ ```
130
+
131
+ ## Transforms & clip-path
132
+
133
+ - **`translate` percentages** are relative to the element's own size — `translateY(100%)` moves by the element's height regardless of dimensions (how Sonner/Vaul position toasts/drawers). Prefer over hardcoded px.
134
+ - **`scale()` scales children too** (font, icons, content) — a feature for press feedback.
135
+ - **3D**: `rotateX/Y` + `transform-style: preserve-3d` for depth/orbit/flip without JS.
136
+ - **`clip-path: inset(t r b l)`** is a powerful animation tool: each value eats in from that side. Uses: reveal-on-scroll (`inset(0 0 100% 0)` → `inset(0 0 0 0)`), hold-to-delete overlay, seamless tab color transitions (duplicate + clip the active copy), comparison sliders.
137
+
138
+ ## Gestures & drag
139
+
140
+ - **Momentum dismissal**: don't require crossing a distance threshold — compute velocity (`Math.abs(distance)/elapsedMs`); dismiss if `> ~0.11`. A flick should be enough.
141
+ - **Damping at boundaries**: dragging past a natural edge moves less the further you go (real things slow before stopping).
142
+ - **Pointer capture** once dragging starts, so it continues when the pointer leaves bounds.
143
+ - **Multi-touch protection**: ignore extra touch points after the drag begins (`if (isDragging) return`) — prevents jumps.
144
+ - **Friction over hard stops** — allow over-drag with rising resistance rather than an invisible wall.
145
+
146
+ ## Masking imperfect crossfades
147
+
148
+ When a crossfade shows two overlapping states despite tuning easing/duration, add subtle `filter: blur(2px)` during the transition to blend them into one perceived transformation. Keep blur < 20px (heavy blur is expensive, especially Safari).
149
+
150
+ ## Stagger
151
+
152
+ Stagger group entrances; 30–80ms between items. Longer delays feel slow. Stagger is decorative — never block interaction while it plays.
153
+
154
+ ```css
155
+ .item { opacity: 0; transform: translateY(8px); animation: fadeIn 300ms ease-out forwards; }
156
+ .item:nth-child(2) { animation-delay: 50ms; }
157
+ .item:nth-child(3) { animation-delay: 100ms; }
158
+ @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
159
+ ```
160
+
161
+ ## Accessibility
162
+
163
+ ```css
164
+ @media (prefers-reduced-motion: reduce) {
165
+ .element { animation: fade 0.2s ease; } /* keep opacity/color, drop transform-based motion */
166
+ }
167
+ @media (hover: hover) and (pointer: fine) {
168
+ .element:hover { transform: scale(1.05); } /* gate hover motion — touch fires false hovers on tap */
169
+ }
170
+ ```
171
+
172
+ ```jsx
173
+ const reduce = useReducedMotion();
174
+ const closedX = reduce ? 0 : '-100%';
175
+ ```
176
+
177
+ Reduced motion means fewer and gentler animations, not zero — keep transitions that aid comprehension, remove movement/position changes.
178
+
179
+ ## Debugging (recommend in reviews when feel is uncertain)
180
+
181
+ - **Slow motion**: bump duration 2–5× or use DevTools animation inspector. Check colors crossfade cleanly, easing doesn't stop abruptly, `transform-origin` is right, coordinated properties stay in sync.
182
+ - **Frame-by-frame**: Chrome DevTools Animations panel reveals timing drift between coordinated properties.
183
+ - **Real devices** for gestures (drawers, swipe) — connect a phone, hit the dev server by IP, use Safari remote devtools.
184
+ - **Fresh eyes next day** — imperfections invisible during development surface later.
185
+
186
+ ## Cohesion
187
+
188
+ Match motion to the component's personality: playful can be bouncier; a professional dashboard should be crisp and fast. Sonner feels right partly because easing, duration, design, and even the name are in harmony — slightly slower, `ease` rather than `ease-out`, to feel elegant. Opacity + height in entering/exiting lists is trial and error; there's no formula — adjust until it feels right.
@@ -16,6 +16,16 @@ from pathlib import Path
16
16
  from quick_validate import validate_skill
17
17
 
18
18
 
19
+ def should_include(file_path: Path, skill_path: Path) -> bool:
20
+ if file_path.is_symlink():
21
+ return False
22
+ try:
23
+ file_path.resolve(strict=True).relative_to(skill_path.resolve(strict=True))
24
+ except (OSError, ValueError):
25
+ return False
26
+ return file_path.is_file()
27
+
28
+
19
29
  def package_skill(skill_path, output_dir=None):
20
30
  """
21
31
  Package a skill folder into a .skill file.
@@ -68,7 +78,7 @@ def package_skill(skill_path, output_dir=None):
68
78
  with zipfile.ZipFile(skill_filename, 'w', zipfile.ZIP_DEFLATED) as zipf:
69
79
  # Walk through the skill directory
70
80
  for file_path in skill_path.rglob('*'):
71
- if file_path.is_file():
81
+ if should_include(file_path, skill_path):
72
82
  # Calculate the relative path within the zip
73
83
  arcname = file_path.relative_to(skill_path.parent)
74
84
  zipf.write(file_path, arcname)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "opencode-skills-collection",
3
- "version": "3.1.5",
3
+ "version": "3.1.7",
4
4
  "description": "OpenCode CLI plugin that automatically downloads and keeps skills up to date.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -40,7 +40,7 @@
40
40
  "devDependencies": {
41
41
  "@opencode-ai/sdk": "^1.15.5",
42
42
  "@types/bun": "*",
43
- "@types/node": "^25.9.1",
43
+ "@types/node": "^26.0.0",
44
44
  "@types/strip-json-comments": "^3.0.0",
45
45
  "typescript": "^6.0.2"
46
46
  }
package/skills_index.json CHANGED
@@ -13074,6 +13074,28 @@
13074
13074
  "reasons": []
13075
13075
  }
13076
13076
  },
13077
+ {
13078
+ "id": "emil-design-eng",
13079
+ "path": "skills/emil-design-eng",
13080
+ "category": "frontend",
13081
+ "name": "emil-design-eng",
13082
+ "description": "Use when designing or reviewing polished product UI with Emil Kowalski-inspired animation, interaction, and component craft guidance.",
13083
+ "risk": "safe",
13084
+ "source": "community",
13085
+ "date_added": "2026-06-25",
13086
+ "plugin": {
13087
+ "targets": {
13088
+ "codex": "supported",
13089
+ "claude": "supported"
13090
+ },
13091
+ "setup": {
13092
+ "type": "none",
13093
+ "summary": "",
13094
+ "docs": null
13095
+ },
13096
+ "reasons": []
13097
+ }
13098
+ },
13077
13099
  {
13078
13100
  "id": "emotional-arc-designer",
13079
13101
  "path": "skills/emotional-arc-designer",
@@ -18202,6 +18224,28 @@
18202
18224
  "reasons": []
18203
18225
  }
18204
18226
  },
18227
+ {
18228
+ "id": "infinity",
18229
+ "path": "skills/infinity",
18230
+ "category": "uncategorized",
18231
+ "name": "infinity",
18232
+ "description": "Enforces a strict input boundary protocol (detect, classify, filter, verify) to ensure untrusted data never reaches business logic raw.",
18233
+ "risk": "safe",
18234
+ "source": "community",
18235
+ "date_added": "2026-06-23",
18236
+ "plugin": {
18237
+ "targets": {
18238
+ "codex": "supported",
18239
+ "claude": "supported"
18240
+ },
18241
+ "setup": {
18242
+ "type": "none",
18243
+ "summary": "",
18244
+ "docs": null
18245
+ },
18246
+ "reasons": []
18247
+ }
18248
+ },
18205
18249
  {
18206
18250
  "id": "ingest-youtube",
18207
18251
  "path": "skills/ingest-youtube",
@@ -27517,6 +27561,28 @@
27517
27561
  "reasons": []
27518
27562
  }
27519
27563
  },
27564
+ {
27565
+ "id": "review-animations",
27566
+ "path": "skills/review-animations",
27567
+ "category": "frontend",
27568
+ "name": "review-animations",
27569
+ "description": "Use when reviewing animation and motion code against a strict craft, performance, accessibility, and interaction-quality bar.",
27570
+ "risk": "safe",
27571
+ "source": "community",
27572
+ "date_added": "2026-06-25",
27573
+ "plugin": {
27574
+ "targets": {
27575
+ "codex": "supported",
27576
+ "claude": "supported"
27577
+ },
27578
+ "setup": {
27579
+ "type": "none",
27580
+ "summary": "",
27581
+ "docs": null
27582
+ },
27583
+ "reasons": []
27584
+ }
27585
+ },
27520
27586
  {
27521
27587
  "id": "revops",
27522
27588
  "path": "skills/revops",