opencode-skills-collection 3.1.6 → 3.1.8

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 (59) hide show
  1. package/bundled-skills/.antigravity-install-manifest.json +9 -1
  2. package/bundled-skills/007/scripts/scanners/dependency_scanner.py +2 -2
  3. package/bundled-skills/arrowspace/SKILL.md +116 -0
  4. package/bundled-skills/docs/contributors/quality-bar.md +1 -0
  5. package/bundled-skills/docs/contributors/skill-anatomy.md +19 -3
  6. package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
  7. package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
  8. package/bundled-skills/docs/maintainers/categorization-implementation.md +14 -24
  9. package/bundled-skills/docs/maintainers/repo-growth-seo.md +3 -3
  10. package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
  11. package/bundled-skills/docs/maintainers/smart-auto-categorization.md +24 -25
  12. package/bundled-skills/docs/users/bundles.md +1 -1
  13. package/bundled-skills/docs/users/claude-code-skills.md +1 -1
  14. package/bundled-skills/docs/users/faq.md +5 -5
  15. package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
  16. package/bundled-skills/docs/users/getting-started.md +1 -1
  17. package/bundled-skills/docs/users/kiro-integration.md +1 -1
  18. package/bundled-skills/docs/users/local-config.md +11 -11
  19. package/bundled-skills/docs/users/specialized-plugin-roadmap.md +3 -3
  20. package/bundled-skills/docs/users/usage.md +4 -4
  21. package/bundled-skills/docs/users/visual-guide.md +4 -4
  22. package/bundled-skills/docs/vietnamese/BUNDLES.vi.md +1 -1
  23. package/bundled-skills/docs/vietnamese/CONTRIBUTING.vi.md +15 -9
  24. package/bundled-skills/docs/vietnamese/FAQ.vi.md +30 -20
  25. package/bundled-skills/docs/vietnamese/GETTING_STARTED.vi.md +22 -14
  26. package/bundled-skills/docs/vietnamese/QUALITY_BAR.vi.md +9 -4
  27. package/bundled-skills/docs/vietnamese/README.vi.md +29 -30
  28. package/bundled-skills/docs/vietnamese/SKILLS_README.vi.md +3 -3
  29. package/bundled-skills/docs/vietnamese/SKILL_ANATOMY.vi.md +33 -5
  30. package/bundled-skills/docs/vietnamese/TRANSLATION_PLAN.vi.md +1 -1
  31. package/bundled-skills/docs/vietnamese/VISUAL_GUIDE.vi.md +17 -18
  32. package/bundled-skills/docx-official/ooxml/scripts/pack.py +12 -0
  33. package/bundled-skills/docx-official/ooxml/scripts/unpack.py +28 -7
  34. package/bundled-skills/docx-official/ooxml/scripts/validation/base.py +18 -13
  35. package/bundled-skills/docx-official/ooxml/scripts/validation/docx.py +6 -6
  36. package/bundled-skills/docx-official/ooxml/scripts/validation/pptx.py +6 -6
  37. package/bundled-skills/emil-design-eng/SKILL.md +702 -0
  38. package/bundled-skills/gh-image/SKILL.md +122 -0
  39. package/bundled-skills/github-actions-debugger/SKILL.md +99 -0
  40. package/bundled-skills/hugging-face-model-trainer/scripts/convert_to_gguf.py +3 -2
  41. package/bundled-skills/infinity/SKILL.md +173 -0
  42. package/bundled-skills/loki-mode/autonomy/run.sh +17 -8
  43. package/bundled-skills/loki-mode/examples/todo-app-generated/backend/package-lock.json +17 -13
  44. package/bundled-skills/loki-mode/examples/todo-app-generated/backend/package.json +3 -3
  45. package/bundled-skills/loki-mode/examples/todo-app-generated/frontend/package-lock.json +9 -9
  46. package/bundled-skills/loki-mode/examples/todo-app-generated/frontend/package.json +2 -2
  47. package/bundled-skills/macos-spm-app-packaging/assets/templates/setup_dev_signing.sh +11 -8
  48. package/bundled-skills/macos-spm-app-packaging/assets/templates/sign-and-notarize.sh +10 -5
  49. package/bundled-skills/pptx-official/ooxml/scripts/pack.py +12 -0
  50. package/bundled-skills/pptx-official/ooxml/scripts/unpack.py +28 -7
  51. package/bundled-skills/pptx-official/ooxml/scripts/validation/base.py +18 -13
  52. package/bundled-skills/pptx-official/ooxml/scripts/validation/docx.py +6 -6
  53. package/bundled-skills/pptx-official/ooxml/scripts/validation/pptx.py +6 -6
  54. package/bundled-skills/premium-3d-website/SKILL.md +133 -0
  55. package/bundled-skills/review-animations/SKILL.md +139 -0
  56. package/bundled-skills/review-animations/STANDARDS.md +188 -0
  57. package/bundled-skills/skill-creator/scripts/package_skill.py +11 -1
  58. package/package.json +1 -1
  59. package/skills_index.json +132 -0
@@ -13,8 +13,13 @@ if [[ -z "${APP_STORE_CONNECT_API_KEY_P8:-}" || -z "${APP_STORE_CONNECT_KEY_ID:-
13
13
  exit 1
14
14
  fi
15
15
 
16
- echo "$APP_STORE_CONNECT_API_KEY_P8" | sed 's/\\n/\n/g' > /tmp/app-store-connect-key.p8
17
- trap 'rm -f /tmp/app-store-connect-key.p8 /tmp/${APP_NAME}Notarize.zip' EXIT
16
+ TEMP_DIR=$(mktemp -d)
17
+ chmod 700 "$TEMP_DIR"
18
+ KEY_PATH="$TEMP_DIR/app-store-connect-key.p8"
19
+ NOTARY_ZIP="$TEMP_DIR/${APP_NAME}Notarize.zip"
20
+ trap 'rm -rf "$TEMP_DIR"' EXIT
21
+
22
+ echo "$APP_STORE_CONNECT_API_KEY_P8" | sed 's/\\n/\n/g' > "$KEY_PATH"
18
23
 
19
24
  ARCHES_VALUE=${ARCHES:-"arm64 x86_64"}
20
25
  ARCH_LIST=( ${ARCHES_VALUE} )
@@ -31,10 +36,10 @@ codesign --force --timestamp --options runtime --sign "$APP_IDENTITY" \
31
36
  "$APP_BUNDLE"
32
37
 
33
38
  DITTO_BIN=${DITTO_BIN:-/usr/bin/ditto}
34
- "$DITTO_BIN" --norsrc -c -k --keepParent "$APP_BUNDLE" "/tmp/${APP_NAME}Notarize.zip"
39
+ "$DITTO_BIN" --norsrc -c -k --keepParent "$APP_BUNDLE" "$NOTARY_ZIP"
35
40
 
36
- xcrun notarytool submit "/tmp/${APP_NAME}Notarize.zip" \
37
- --key /tmp/app-store-connect-key.p8 \
41
+ xcrun notarytool submit "$NOTARY_ZIP" \
42
+ --key "$KEY_PATH" \
38
43
  --key-id "$APP_STORE_CONNECT_KEY_ID" \
39
44
  --issuer "$APP_STORE_CONNECT_ISSUER_ID" \
40
45
  --wait
@@ -16,6 +16,17 @@ import zipfile
16
16
  from pathlib import Path
17
17
 
18
18
 
19
+ def validate_input_tree(input_dir: Path):
20
+ root = input_dir.resolve(strict=True)
21
+ for path in input_dir.rglob("*"):
22
+ if path.is_symlink():
23
+ raise ValueError(f"Refusing to pack symlink: {path}")
24
+ try:
25
+ path.resolve(strict=True).relative_to(root)
26
+ except (OSError, ValueError):
27
+ raise ValueError(f"Refusing to pack path outside input directory: {path}") from None
28
+
29
+
19
30
  def main():
20
31
  parser = argparse.ArgumentParser(description="Pack a directory into an Office file")
21
32
  parser.add_argument("input_directory", help="Unpacked Office document directory")
@@ -60,6 +71,7 @@ def pack_document(input_dir, output_file, validate=False):
60
71
  raise ValueError(f"{input_dir} is not a directory")
61
72
  if output_file.suffix.lower() not in {".docx", ".pptx", ".xlsx"}:
62
73
  raise ValueError(f"{output_file} must be a .docx, .pptx, or .xlsx file")
74
+ validate_input_tree(input_dir)
63
75
 
64
76
  # Work in temporary directory to avoid modifying original
65
77
  with tempfile.TemporaryDirectory() as temp_dir:
@@ -8,6 +8,11 @@ import sys
8
8
  import zipfile
9
9
  from pathlib import Path
10
10
 
11
+ MAX_ARCHIVE_MEMBERS = 5000
12
+ MAX_MEMBER_SIZE = 100 * 1024 * 1024
13
+ MAX_TOTAL_UNCOMPRESSED = 512 * 1024 * 1024
14
+ MAX_COMPRESSION_RATIO = 1000
15
+
11
16
 
12
17
  def _is_zip_symlink(member: zipfile.ZipInfo) -> bool:
13
18
  return stat.S_ISLNK(member.external_attr >> 16)
@@ -29,19 +34,35 @@ def _extract_member(archive: zipfile.ZipFile, member: zipfile.ZipInfo, output_ro
29
34
  shutil.copyfileobj(source, target)
30
35
 
31
36
 
37
+ def _validate_archive_members(archive: zipfile.ZipFile, output_root: Path):
38
+ members = archive.infolist()
39
+ if len(members) > MAX_ARCHIVE_MEMBERS:
40
+ raise ValueError("Archive contains too many entries")
41
+
42
+ total_size = 0
43
+ for member in members:
44
+ if _is_zip_symlink(member):
45
+ raise ValueError(f"Unsafe archive entry: {member.filename}")
46
+ if not _is_safe_destination(output_root, member.filename):
47
+ raise ValueError(f"Unsafe archive entry: {member.filename}")
48
+ if member.file_size > MAX_MEMBER_SIZE:
49
+ raise ValueError(f"Archive entry too large: {member.filename}")
50
+ total_size += member.file_size
51
+ if total_size > MAX_TOTAL_UNCOMPRESSED:
52
+ raise ValueError("Archive uncompressed size is too large")
53
+ if member.compress_size and member.file_size / member.compress_size > MAX_COMPRESSION_RATIO:
54
+ raise ValueError(f"Archive entry compression ratio too high: {member.filename}")
55
+
56
+ return members
57
+
58
+
32
59
  def extract_archive_safely(input_file: str | Path, output_dir: str | Path):
33
60
  output_path = Path(output_dir)
34
61
  output_path.mkdir(parents=True, exist_ok=True)
35
62
  output_root = output_path.resolve()
36
63
 
37
64
  with zipfile.ZipFile(input_file) as archive:
38
- for member in archive.infolist():
39
- if _is_zip_symlink(member):
40
- raise ValueError(f"Unsafe archive entry: {member.filename}")
41
- if not _is_safe_destination(output_root, member.filename):
42
- raise ValueError(f"Unsafe archive entry: {member.filename}")
43
-
44
- for member in archive.infolist():
65
+ for member in _validate_archive_members(archive, output_root):
45
66
  _extract_member(archive, member, output_path)
46
67
 
47
68
 
@@ -9,6 +9,14 @@ from pathlib import Path
9
9
  import lxml.etree
10
10
 
11
11
 
12
+ def hardened_xml_parser():
13
+ return lxml.etree.XMLParser(resolve_entities=False, no_network=True, load_dtd=False, huge_tree=False)
14
+
15
+
16
+ def parse_xml(source, **kwargs):
17
+ return lxml.etree.parse(source, parser=hardened_xml_parser(), **kwargs)
18
+
19
+
12
20
  def safe_extract_all(zip_ref, destination):
13
21
  """Extract a zip archive without allowing members to escape destination."""
14
22
  destination = Path(destination).resolve()
@@ -149,7 +157,7 @@ class BaseSchemaValidator:
149
157
  for xml_file in self.xml_files:
150
158
  try:
151
159
  # Try to parse the XML file
152
- lxml.etree.parse(str(xml_file))
160
+ parse_xml(str(xml_file))
153
161
  except lxml.etree.XMLSyntaxError as e:
154
162
  errors.append(
155
163
  f" {xml_file.relative_to(self.unpacked_dir)}: "
@@ -177,7 +185,7 @@ class BaseSchemaValidator:
177
185
 
178
186
  for xml_file in self.xml_files:
179
187
  try:
180
- root = lxml.etree.parse(str(xml_file)).getroot()
188
+ root = parse_xml(str(xml_file)).getroot()
181
189
  declared = set(root.nsmap.keys()) - {None} # Exclude default namespace
182
190
 
183
191
  for attr_val in [
@@ -208,7 +216,7 @@ class BaseSchemaValidator:
208
216
 
209
217
  for xml_file in self.xml_files:
210
218
  try:
211
- root = lxml.etree.parse(str(xml_file)).getroot()
219
+ root = parse_xml(str(xml_file)).getroot()
212
220
  file_ids = {} # Track IDs that must be unique within this file
213
221
 
214
222
  # Remove all mc:AlternateContent elements from the tree
@@ -328,7 +336,7 @@ class BaseSchemaValidator:
328
336
  for rels_file in rels_files:
329
337
  try:
330
338
  # Parse relationships file
331
- rels_root = lxml.etree.parse(str(rels_file)).getroot()
339
+ rels_root = parse_xml(str(rels_file)).getroot()
332
340
 
333
341
  # Get the directory where this .rels file is located
334
342
  rels_dir = rels_file.parent
@@ -429,7 +437,7 @@ class BaseSchemaValidator:
429
437
 
430
438
  try:
431
439
  # Parse the .rels file to get valid relationship IDs and their types
432
- rels_root = lxml.etree.parse(str(rels_file)).getroot()
440
+ rels_root = parse_xml(str(rels_file)).getroot()
433
441
  rid_to_type = {}
434
442
 
435
443
  for rel in rels_root.findall(
@@ -452,7 +460,7 @@ class BaseSchemaValidator:
452
460
  rid_to_type[rid] = type_name
453
461
 
454
462
  # Parse the XML file to find all r:id references
455
- xml_root = lxml.etree.parse(str(xml_file)).getroot()
463
+ xml_root = parse_xml(str(xml_file)).getroot()
456
464
 
457
465
  # Find all elements with r:id attributes
458
466
  for elem in xml_root.iter():
@@ -549,7 +557,7 @@ class BaseSchemaValidator:
549
557
 
550
558
  try:
551
559
  # Parse and get all declared parts and extensions
552
- root = lxml.etree.parse(str(content_types_file)).getroot()
560
+ root = parse_xml(str(content_types_file)).getroot()
553
561
  declared_parts = set()
554
562
  declared_extensions = set()
555
563
 
@@ -611,7 +619,7 @@ class BaseSchemaValidator:
611
619
  continue
612
620
 
613
621
  try:
614
- root_tag = lxml.etree.parse(str(xml_file)).getroot().tag
622
+ root_tag = parse_xml(str(xml_file)).getroot().tag
615
623
  root_name = root_tag.split("}")[-1] if "}" in root_tag else root_tag
616
624
 
617
625
  if root_name in declarable_roots and path_str not in declared_parts:
@@ -850,15 +858,12 @@ class BaseSchemaValidator:
850
858
  try:
851
859
  # Load schema
852
860
  with open(schema_path, "rb") as xsd_file:
853
- parser = lxml.etree.XMLParser()
854
- xsd_doc = lxml.etree.parse(
855
- xsd_file, parser=parser, base_url=str(schema_path)
856
- )
861
+ xsd_doc = parse_xml(xsd_file, base_url=str(schema_path))
857
862
  schema = lxml.etree.XMLSchema(xsd_doc)
858
863
 
859
864
  # Load and preprocess XML
860
865
  with open(xml_file, "r") as f:
861
- xml_doc = lxml.etree.parse(f)
866
+ xml_doc = parse_xml(f)
862
867
 
863
868
  xml_doc, _ = self._remove_template_tags_from_text_nodes(xml_doc)
864
869
  xml_doc = self._preprocess_for_mc_ignorable(xml_doc)
@@ -10,7 +10,7 @@ from pathlib import Path
10
10
 
11
11
  import lxml.etree
12
12
 
13
- from .base import BaseSchemaValidator
13
+ from .base import BaseSchemaValidator, parse_xml
14
14
 
15
15
 
16
16
  def safe_extract_all(zip_ref, destination):
@@ -100,7 +100,7 @@ class DOCXSchemaValidator(BaseSchemaValidator):
100
100
  continue
101
101
 
102
102
  try:
103
- root = lxml.etree.parse(str(xml_file)).getroot()
103
+ root = parse_xml(str(xml_file)).getroot()
104
104
 
105
105
  # Find all w:t elements
106
106
  for elem in root.iter(f"{{{self.WORD_2006_NAMESPACE}}}t"):
@@ -153,7 +153,7 @@ class DOCXSchemaValidator(BaseSchemaValidator):
153
153
  continue
154
154
 
155
155
  try:
156
- root = lxml.etree.parse(str(xml_file)).getroot()
156
+ root = parse_xml(str(xml_file)).getroot()
157
157
 
158
158
  # Find all w:t elements that are descendants of w:del elements
159
159
  namespaces = {"w": self.WORD_2006_NAMESPACE}
@@ -199,7 +199,7 @@ class DOCXSchemaValidator(BaseSchemaValidator):
199
199
  continue
200
200
 
201
201
  try:
202
- root = lxml.etree.parse(str(xml_file)).getroot()
202
+ root = parse_xml(str(xml_file)).getroot()
203
203
  # Count all w:p elements
204
204
  paragraphs = root.findall(f".//{{{self.WORD_2006_NAMESPACE}}}p")
205
205
  count = len(paragraphs)
@@ -221,7 +221,7 @@ class DOCXSchemaValidator(BaseSchemaValidator):
221
221
 
222
222
  # Parse document.xml
223
223
  doc_xml_path = temp_dir + "/word/document.xml"
224
- root = lxml.etree.parse(doc_xml_path).getroot()
224
+ root = parse_xml(doc_xml_path).getroot()
225
225
 
226
226
  # Count all w:p elements
227
227
  paragraphs = root.findall(f".//{{{self.WORD_2006_NAMESPACE}}}p")
@@ -244,7 +244,7 @@ class DOCXSchemaValidator(BaseSchemaValidator):
244
244
  continue
245
245
 
246
246
  try:
247
- root = lxml.etree.parse(str(xml_file)).getroot()
247
+ root = parse_xml(str(xml_file)).getroot()
248
248
  namespaces = {"w": self.WORD_2006_NAMESPACE}
249
249
 
250
250
  # Find w:delText in w:ins that are NOT within w:del
@@ -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,133 @@
1
+ ---
2
+ name: premium-3d-website
3
+ description: Guidelines for building premium 3D websites, focusing on custom WebGL shaders, post-processing, physics-based interactions, smooth animations, preloaders, and device optimization.
4
+ category: frontend
5
+ risk: safe
6
+ source: self
7
+ source_type: self
8
+ date_added: "2026-06-25"
9
+ author: Rsmiyani
10
+ tags: [threejs, webgl, shaders, post-processing, creative-coding, premium-design]
11
+ tools: [claude, cursor, gemini]
12
+ ---
13
+
14
+ # Premium 3D Website
15
+
16
+ ## Overview
17
+
18
+ This skill provides architectural guidelines and code patterns for developing premium, high-end 3D websites. It targets developers looking to implement advanced WebGL visual effects, custom shader pipelines, interactive physics elements, and immersive page transitions while maintaining high performance.
19
+
20
+ ## When to Use This Skill
21
+
22
+ - Use when designing premium or award-winning creative websites with 3D elements.
23
+ - Use when integrating Three.js, React Three Fiber (R3F), or Spline with custom shaders (GLSL).
24
+ - Use when implementing post-processing effects like bloom, depth-of-field, or custom film grain.
25
+ - Use when designing interactive preloaders and high-performance asset loading strategies.
26
+ - Use when optimizing complex 3D scenes for mobile responsiveness and performance.
27
+
28
+ ## How It Works
29
+
30
+ ### Step 1: Establish the Render Loop and Scene Architecture
31
+ Setting up a robust WebGL context with proper resize handling and performance-friendly pixel ratios is crucial. Keep pixel ratios capped at a maximum of 2 to avoid rendering too many pixels on high-DPI screens.
32
+
33
+ ### Step 2: Implement Shader Effects and Post-Processing
34
+ Incorporate post-processing pipelines (using `EffectComposer` or `@react-three/postprocessing`) to add bloom, chromatic aberration, depth of field, or film grain. Keep pass counts low and combine custom fragment shaders to minimize draw calls.
35
+
36
+ ### Step 3: Integrate Interactive Physics and Motion
37
+ Utilize physics frameworks (such as Cannon.js or Rapier) or procedural spring animations to make 3D objects react to mouse hover, drag, and click inputs with organic feedback.
38
+
39
+ ### Step 4: Asset Pipeline and Preloader
40
+ Optimize 3D models (using Draco compression) and load them using custom loading managers. Render interactive preloaders to entertain users while heavy assets are fetched in the background.
41
+
42
+ ## Examples
43
+
44
+ ### Example 1: Custom Post-processing in React Three Fiber (R3F)
45
+
46
+ ```jsx
47
+ import { Canvas } from '@react-three/fiber';
48
+ import { EffectComposer, Bloom, DepthOfField, Vignette } from '@react-three/postprocessing';
49
+
50
+ export default function PremiumComposer() {
51
+ return (
52
+ <Canvas dpr={[1, 2]} gl={{ powerPreference: "high-performance", antialias: false }}>
53
+ <ambientLight intensity={0.5} />
54
+ <mesh>
55
+ <boxGeometry />
56
+ <meshStandardMaterial emissive="orange" emissiveIntensity={2.0} />
57
+ </mesh>
58
+
59
+ <EffectComposer disableNormalPass>
60
+ <DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
61
+ <Bloom luminanceThreshold={0.3} luminanceSmoothing={0.9} height={300} />
62
+ <Vignette eskil={false} offset={0.1} darkness={1.1} />
63
+ </EffectComposer>
64
+ </Canvas>
65
+ );
66
+ }
67
+ ```
68
+
69
+ ### Example 2: Custom GLSL Shader Material for Liquid/Wavy Effects
70
+
71
+ ```javascript
72
+ import * as THREE from 'three';
73
+
74
+ const CustomWavyMaterial = new THREE.ShaderMaterial({
75
+ vertexShader: `
76
+ varying vec2 vUv;
77
+ uniform float uTime;
78
+ void main() {
79
+ vUv = uv;
80
+ vec3 pos = position;
81
+ pos.z += sin(pos.x * 5.0 + uTime) * 0.1;
82
+ pos.z += cos(pos.y * 5.0 + uTime) * 0.1;
83
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
84
+ }
85
+ `,
86
+ fragmentShader: `
87
+ varying vec2 vUv;
88
+ uniform float uTime;
89
+ uniform vec3 uColor;
90
+ void main() {
91
+ float pulse = 0.5 + 0.5 * sin(uTime + vUv.x * 10.0);
92
+ gl_FragColor = vec4(uColor * pulse, 1.0);
93
+ }
94
+ `,
95
+ uniforms: {
96
+ uTime: { value: 0.0 },
97
+ uColor: { value: new THREE.Color('#3b82f6') }
98
+ }
99
+ });
100
+ ```
101
+
102
+ ## Best Practices
103
+
104
+ - ✅ Set `dpr={[1, 2]}` to restrict the device pixel ratio to a maximum of 2.
105
+ - ✅ Disable antialiasing on the WebGLRenderer when post-processing is active to prevent double-aliasing performance penalties.
106
+ - ✅ Bake ambient occlusion, lighting, and shadows into textures using Blender or other 3D software instead of using dynamic lights and real-time shadows.
107
+ - ✅ Use instance rendering (`THREE.InstancedMesh` or R3F `<Instances>`) for scenes containing multiple identical meshes.
108
+ - ❌ Avoid using uncompressed GLTF/OBJ models. Always compress models using Draco or Meshopt.
109
+ - ❌ Avoid real-time shadow maps (such as `THREE.DirectionalLightShadow`) on mobile or low-end devices due to the heavy performance overhead.
110
+
111
+ ## Limitations
112
+
113
+ - This skill does not replace environment-specific validation, testing, or expert review.
114
+ - Stop and ask for clarification if required inputs, permissions, or safety boundaries are missing.
115
+ - Complex shader mathematics and advanced physics simulation bounds require manual testing across different device chipsets.
116
+
117
+ ## Security & Safety Notes
118
+
119
+ - Verify that external 3D model URLs (loaded via `GLTFLoader`) are hosted on trusted, secure CDNs (HTTPS).
120
+ - Do not execute arbitrary, unvalidated shell scripts or use unpinned NPM packages to optimize assets.
121
+
122
+ ## Common Pitfalls
123
+
124
+ - **Problem**: Severe lag/framerate drop on mobile or high-DPI (Retina) screens.
125
+ **Solution**: Ensure the pixel ratio is limited to 2 (`renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))`) and disable unused post-processing passes.
126
+ - **Problem**: Long loading times and white screens during initialization.
127
+ **Solution**: Use a loading manager (`THREE.LoadingManager`) and display a responsive, interactive preloader to keep the user engaged.
128
+
129
+ ## Related Skills
130
+
131
+ - `@3d-web-experience` - Core WebGL, Three.js, and Spline concepts.
132
+ - `@scroll-experience` - Integrating 3D animation with scroll controllers.
133
+ - `@performance-optimizer` - General code execution performance tuning.
@@ -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.