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.
- package/bundled-skills/.antigravity-install-manifest.json +9 -1
- package/bundled-skills/007/scripts/scanners/dependency_scanner.py +2 -2
- package/bundled-skills/arrowspace/SKILL.md +116 -0
- package/bundled-skills/docs/contributors/quality-bar.md +1 -0
- package/bundled-skills/docs/contributors/skill-anatomy.md +19 -3
- package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
- package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
- package/bundled-skills/docs/maintainers/categorization-implementation.md +14 -24
- package/bundled-skills/docs/maintainers/repo-growth-seo.md +3 -3
- package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
- package/bundled-skills/docs/maintainers/smart-auto-categorization.md +24 -25
- package/bundled-skills/docs/users/bundles.md +1 -1
- package/bundled-skills/docs/users/claude-code-skills.md +1 -1
- package/bundled-skills/docs/users/faq.md +5 -5
- package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
- package/bundled-skills/docs/users/getting-started.md +1 -1
- package/bundled-skills/docs/users/kiro-integration.md +1 -1
- package/bundled-skills/docs/users/local-config.md +11 -11
- package/bundled-skills/docs/users/specialized-plugin-roadmap.md +3 -3
- package/bundled-skills/docs/users/usage.md +4 -4
- package/bundled-skills/docs/users/visual-guide.md +4 -4
- package/bundled-skills/docs/vietnamese/BUNDLES.vi.md +1 -1
- package/bundled-skills/docs/vietnamese/CONTRIBUTING.vi.md +15 -9
- package/bundled-skills/docs/vietnamese/FAQ.vi.md +30 -20
- package/bundled-skills/docs/vietnamese/GETTING_STARTED.vi.md +22 -14
- package/bundled-skills/docs/vietnamese/QUALITY_BAR.vi.md +9 -4
- package/bundled-skills/docs/vietnamese/README.vi.md +29 -30
- package/bundled-skills/docs/vietnamese/SKILLS_README.vi.md +3 -3
- package/bundled-skills/docs/vietnamese/SKILL_ANATOMY.vi.md +33 -5
- package/bundled-skills/docs/vietnamese/TRANSLATION_PLAN.vi.md +1 -1
- package/bundled-skills/docs/vietnamese/VISUAL_GUIDE.vi.md +17 -18
- package/bundled-skills/docx-official/ooxml/scripts/pack.py +12 -0
- package/bundled-skills/docx-official/ooxml/scripts/unpack.py +28 -7
- package/bundled-skills/docx-official/ooxml/scripts/validation/base.py +18 -13
- package/bundled-skills/docx-official/ooxml/scripts/validation/docx.py +6 -6
- package/bundled-skills/docx-official/ooxml/scripts/validation/pptx.py +6 -6
- package/bundled-skills/emil-design-eng/SKILL.md +702 -0
- package/bundled-skills/gh-image/SKILL.md +122 -0
- package/bundled-skills/github-actions-debugger/SKILL.md +99 -0
- package/bundled-skills/hugging-face-model-trainer/scripts/convert_to_gguf.py +3 -2
- package/bundled-skills/infinity/SKILL.md +173 -0
- package/bundled-skills/loki-mode/autonomy/run.sh +17 -8
- package/bundled-skills/loki-mode/examples/todo-app-generated/backend/package-lock.json +17 -13
- package/bundled-skills/loki-mode/examples/todo-app-generated/backend/package.json +3 -3
- package/bundled-skills/loki-mode/examples/todo-app-generated/frontend/package-lock.json +9 -9
- package/bundled-skills/loki-mode/examples/todo-app-generated/frontend/package.json +2 -2
- package/bundled-skills/macos-spm-app-packaging/assets/templates/setup_dev_signing.sh +11 -8
- package/bundled-skills/macos-spm-app-packaging/assets/templates/sign-and-notarize.sh +10 -5
- package/bundled-skills/pptx-official/ooxml/scripts/pack.py +12 -0
- package/bundled-skills/pptx-official/ooxml/scripts/unpack.py +28 -7
- package/bundled-skills/pptx-official/ooxml/scripts/validation/base.py +18 -13
- package/bundled-skills/pptx-official/ooxml/scripts/validation/docx.py +6 -6
- package/bundled-skills/pptx-official/ooxml/scripts/validation/pptx.py +6 -6
- package/bundled-skills/premium-3d-website/SKILL.md +133 -0
- package/bundled-skills/review-animations/SKILL.md +139 -0
- package/bundled-skills/review-animations/STANDARDS.md +188 -0
- package/bundled-skills/skill-creator/scripts/package_skill.py +11 -1
- package/package.json +1 -1
- 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
|
-
|
|
17
|
-
|
|
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" "
|
|
39
|
+
"$DITTO_BIN" --norsrc -c -k --keepParent "$APP_BUNDLE" "$NOTARY_ZIP"
|
|
35
40
|
|
|
36
|
-
xcrun notarytool submit "
|
|
37
|
-
--key
|
|
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
|
|
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
|
-
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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
|
-
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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 =
|
|
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.
|