opencode-skills-collection 3.1.7 → 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 (37) hide show
  1. package/bundled-skills/.antigravity-install-manifest.json +6 -1
  2. package/bundled-skills/arrowspace/SKILL.md +116 -0
  3. package/bundled-skills/docs/contributors/quality-bar.md +1 -0
  4. package/bundled-skills/docs/contributors/skill-anatomy.md +19 -3
  5. package/bundled-skills/docs/integrations/jetski-cortex.md +3 -3
  6. package/bundled-skills/docs/integrations/jetski-gemini-loader/README.md +1 -1
  7. package/bundled-skills/docs/maintainers/categorization-implementation.md +14 -24
  8. package/bundled-skills/docs/maintainers/repo-growth-seo.md +3 -3
  9. package/bundled-skills/docs/maintainers/skills-update-guide.md +1 -1
  10. package/bundled-skills/docs/maintainers/smart-auto-categorization.md +24 -25
  11. package/bundled-skills/docs/users/bundles.md +1 -1
  12. package/bundled-skills/docs/users/claude-code-skills.md +1 -1
  13. package/bundled-skills/docs/users/faq.md +5 -5
  14. package/bundled-skills/docs/users/gemini-cli-skills.md +1 -1
  15. package/bundled-skills/docs/users/getting-started.md +1 -1
  16. package/bundled-skills/docs/users/kiro-integration.md +1 -1
  17. package/bundled-skills/docs/users/local-config.md +11 -11
  18. package/bundled-skills/docs/users/specialized-plugin-roadmap.md +3 -3
  19. package/bundled-skills/docs/users/usage.md +4 -4
  20. package/bundled-skills/docs/users/visual-guide.md +4 -4
  21. package/bundled-skills/docs/vietnamese/BUNDLES.vi.md +1 -1
  22. package/bundled-skills/docs/vietnamese/CONTRIBUTING.vi.md +15 -9
  23. package/bundled-skills/docs/vietnamese/FAQ.vi.md +30 -20
  24. package/bundled-skills/docs/vietnamese/GETTING_STARTED.vi.md +22 -14
  25. package/bundled-skills/docs/vietnamese/QUALITY_BAR.vi.md +9 -4
  26. package/bundled-skills/docs/vietnamese/README.vi.md +29 -30
  27. package/bundled-skills/docs/vietnamese/SKILLS_README.vi.md +3 -3
  28. package/bundled-skills/docs/vietnamese/SKILL_ANATOMY.vi.md +33 -5
  29. package/bundled-skills/docs/vietnamese/TRANSLATION_PLAN.vi.md +1 -1
  30. package/bundled-skills/docs/vietnamese/VISUAL_GUIDE.vi.md +17 -18
  31. package/bundled-skills/gh-image/SKILL.md +122 -0
  32. package/bundled-skills/github-actions-debugger/SKILL.md +99 -0
  33. package/bundled-skills/loki-mode/examples/todo-app-generated/frontend/package-lock.json +9 -9
  34. package/bundled-skills/loki-mode/examples/todo-app-generated/frontend/package.json +2 -2
  35. package/bundled-skills/premium-3d-website/SKILL.md +133 -0
  36. package/package.json +1 -1
  37. package/skills_index.json +88 -0
@@ -33,7 +33,7 @@ antigravity-awesome-skills/
33
33
  ├── 📄 README.md ← Tổng quan & danh sách skill
34
34
  ├── 📄 CONTRIBUTING.md ← Cách thức đóng góp
35
35
 
36
- ├── 📁 skills/ ← Nơi chứa tất cả hơn 250 skills
36
+ ├── 📁 skills/ ← Nguồn canonical cho 1,684+ skills
37
37
  │ │
38
38
  │ ├── 📁 brainstorming/
39
39
  │ │ └── 📄 SKILL.md ← Định nghĩa skill
@@ -42,11 +42,12 @@ antigravity-awesome-skills/
42
42
  │ │ ├── 📄 SKILL.md
43
43
  │ │ └── 📁 examples/ ← Các phần bổ sung tùy chọn
44
44
  │ │
45
- │ └── ... (Hơn 250 skills khác)
45
+ │ └── ... (1,684+ skills khác)
46
46
 
47
- ├── 📁 scripts/ ← Quản lý & Xác thực
48
- │ ├── validate_skills.py Công cụ kiểm soát chất lượng
49
- └── generate_index.py Công cụ tạo danh mục (registry)
47
+ ├── 📁 tools/
48
+ │ ├── 📁 scripts/ Quản lý, xác thực tạo catalog
49
+ ├── 📁 lib/ Logic installer dùng chung
50
+ │ └── 📁 bin/ ← CLI entrypoint
50
51
 
51
52
  ├── 📁 .github/
52
53
  │ └── 📄 MAINTENANCE.md ← Hướng dẫn cho người duy trì
@@ -66,7 +67,7 @@ antigravity-awesome-skills/
66
67
 
67
68
  ```
68
69
  ┌──────────────┐
69
- │ 1. CÀI ĐẶT │ Sao chép skills vào .agent/skills/
70
+ │ 1. CÀI ĐẶT │ npx antigravity-awesome-skills
70
71
  1 └──────┬───────┘
71
72
 
72
73
 
@@ -96,7 +97,7 @@ antigravity-awesome-skills/
96
97
 
97
98
  ```
98
99
  ┌─────────────────────────┐
99
- 250+ AWESOME SKILLS
100
+ 1,684+ AWESOME SKILLS
100
101
  └────────────┬────────────┘
101
102
 
102
103
  ┌────────────────────────┼────────────────────────┐
@@ -174,17 +175,15 @@ antigravity-awesome-skills/
174
175
 
175
176
  ## Cài đặt (Các bước Trực quan)
176
177
 
177
- ### Bước 1: Sao chép Repository
178
+ ### Bước 1: Cài đặt bằng installer
178
179
 
179
180
  ```
180
181
  ┌─────────────────────────────────────────┐
181
182
  │ Terminal │
182
183
  ├─────────────────────────────────────────┤
183
- │ $ git clone https://github.com/
184
- │ sickn33/antigravity-awesome-skills │
185
- │ .agent/skills │
184
+ │ $ npx antigravity-awesome-skills
186
185
  │ │
187
- │ ✓ Đang sao chép vào '.agent/skills'...
186
+ │ ✓ Cài vào '~/.agents/skills'...
188
187
  │ ✓ Hoàn tất! │
189
188
  └─────────────────────────────────────────┘
190
189
  ```
@@ -195,12 +194,12 @@ antigravity-awesome-skills/
195
194
  ┌─────────────────────────────────────────┐
196
195
  │ File Explorer │
197
196
  ├─────────────────────────────────────────┤
198
- │ 📁 .agent/
197
+ │ 📁 ~/.agents/
199
198
  │ └── 📁 skills/ │
200
199
  │ ├── 📁 brainstorming/ │
201
200
  │ ├── 📁 stripe-integration/ │
202
201
  │ ├── 📁 react-best-practices/ │
203
- │ └── ... (Thêm 176 mục nữa)
202
+ │ └── ... (1,684+ skills)
204
203
  └─────────────────────────────────────────┘
205
204
  ```
206
205
 
@@ -313,12 +312,12 @@ Mở file skills_index.json → Tìm từ khóa → Tìm đường dẫn đến
313
312
 
314
313
 
315
314
  ┌──────────────┐
316
- │ 4. KIỂM THỬ │ Sao chép vào .agent/skills/
315
+ │ 4. KIỂM THỬ │ Cài bằng npx hoặc --path thử nghiệm
317
316
  └──────┬───────┘ Thử: @docker-mastery
318
317
 
319
318
 
320
319
  ┌──────────────┐
321
- │ 5. XÁC THỰC │ python3 scripts/validate_skills.py
320
+ │ 5. XÁC THỰC │ npm run validate
322
321
  └──────┬───────┘
323
322
 
324
323
 
@@ -437,7 +436,7 @@ BẮT ĐẦU TẠI ĐÂY
437
436
  ├─────────────────────────────────────────────────────────────┤
438
437
  │ │
439
438
  │ 📥 CÀI ĐẶT │
440
- git clone [repo] .agent/skills │
439
+ npx antigravity-awesome-skills │
441
440
  │ │
442
441
  │ 🎯 SỬ DỤNG │
443
442
  │ @ten-skill [yêu cầu của bạn] │
@@ -446,7 +445,7 @@ BẮT ĐẦU TẠI ĐÂY
446
445
  │ ls skills/ | grep "từ-khóa" │
447
446
  │ │
448
447
  │ ✅ XÁC THỰC │
449
- python3 scripts/validate_skills.py
448
+ npm run validate
450
449
  │ │
451
450
  │ 📝 TẠO SKILL │
452
451
  │ 1. mkdir skills/ten-skill-cua-ban │
@@ -0,0 +1,122 @@
1
+ ---
2
+ name: gh-image
3
+ description: "Upload local images to GitHub and get canonical user-attachments embed URLs; use when asked to attach a screenshot to a PR, issue, or comment, or to embed before/after images in a README."
4
+ category: developer-tools
5
+ risk: safe
6
+ source: community
7
+ source_type: community
8
+ source_repo: drogers0/gh-image
9
+ date_added: "2026-06-25"
10
+ author: drogers0
11
+ license: MIT
12
+ license_source: "https://github.com/drogers0/gh-image/blob/main/LICENSE"
13
+ tags:
14
+ - github
15
+ - images
16
+ - screenshots
17
+ - gh-extension
18
+ - cli
19
+ tools:
20
+ - claude-code
21
+ - codex-cli
22
+ - cursor
23
+ - gemini-cli
24
+ ---
25
+
26
+ # Upload images to GitHub (gh-image)
27
+
28
+ GitHub has **no public API** for image uploads — the web UI uses an internal
29
+ endpoint that mints `user-attachments` URLs scoped to the repo's visibility.
30
+ [`gh-image`](https://github.com/drogers0/gh-image) (MIT, © drogers0) replicates
31
+ that flow as a `gh` CLI extension, so an agent can upload a local image from the
32
+ terminal and get a ready-to-embed Markdown image line back.
33
+
34
+ ## Overview
35
+
36
+ This skill drives `gh-image` to turn a local image file into a hosted GitHub
37
+ `user-attachments` URL, then embeds that URL into a pull request, issue, or
38
+ comment. It is the missing "attach a screenshot" capability for terminal agents.
39
+
40
+ ## When to Use This Skill
41
+
42
+ Use this skill when asked to:
43
+
44
+ - "Attach a screenshot to the PR" or "add an image to the PR description"
45
+ - "Put this image in the issue" / "comment with these screenshots"
46
+ - "Show the test results / before-and-after in the PR"
47
+ - Embed any local image into GitHub Markdown without leaving the terminal
48
+
49
+ ## How It Works
50
+
51
+ ### Step 1: Verify prerequisites
52
+
53
+ ```bash
54
+ gh auth status # gh installed & authenticated
55
+ gh extension list | grep -q 'drogers0/gh-image' \
56
+ || gh extension install drogers0/gh-image # idempotent install
57
+ ```
58
+
59
+ `gh-image` does **not** use the `gh` token for the upload (that endpoint rejects
60
+ tokens). It needs a GitHub `user_session` cookie, resolved in this order:
61
+ `--token <value>` flag → `GH_SESSION_TOKEN` env var (use in CI/headless) → a
62
+ logged-in browser's cookie store (default for local use).
63
+
64
+ ### Step 2: Upload
65
+
66
+ ```bash
67
+ # Use an absolute path; --repo is optional inside a repo working dir.
68
+ gh image "/abs/path/screenshot.png" --repo <owner>/<repo>
69
+ ```
70
+
71
+ `gh image` prints Markdown to **stdout**, one line per image:
72
+
73
+ ```
74
+ ![screenshot.png](https://github.com/user-attachments/assets/<uuid>)
75
+ ```
76
+
77
+ Capture that output — it is the embeddable reference.
78
+
79
+ ### Step 3: Embed into the PR / issue / comment
80
+
81
+ ```bash
82
+ MD="$(gh image "/abs/path/shot.png" --repo owner/repo)"
83
+ BODY="$(gh pr view <pr> --repo owner/repo --json body -q .body)"
84
+ printf '%s\n\n## Screenshots\n\n%s\n' "$BODY" "$MD" \
85
+ | gh pr edit <pr> --repo owner/repo --body-file -
86
+ ```
87
+
88
+ Use `gh pr comment`, `gh issue edit`, or `gh issue comment` with `--body-file -`
89
+ for other targets. Always pass `--body-file -` (not inline `--body`) so multi-line
90
+ bodies and special characters can't break shell quoting.
91
+
92
+ ### Step 4: Verify
93
+
94
+ ```bash
95
+ gh pr view <pr> --repo owner/repo --json body -q .body # confirm URL present
96
+ ```
97
+
98
+ ## Examples
99
+
100
+ - **Attach a CleanShot screenshot to PR #42:** upload the file, append it under a
101
+ `## Screenshots` heading in the PR body.
102
+ - **Embed before/after images in a README:** upload both, paste the two Markdown
103
+ lines into the README at the relevant section.
104
+
105
+ ## Best Practices
106
+
107
+ - Resolve globs to absolute paths first; quote paths with spaces/Unicode.
108
+ - For display sizing, embed an HTML tag instead of bare Markdown:
109
+ `<img width="800" src="https://github.com/user-attachments/assets/<uuid>" />`.
110
+ - In CI, set `GH_SESSION_TOKEN` from a dedicated bot account.
111
+
112
+ ## Limitations
113
+
114
+ - **Session cookie required.** A `user_session` cookie grants full account access
115
+ (not scoped like a PAT) — treat it like a password; use a bot account in CI.
116
+ - **Write access to the target repo is required**; orgs that enforce SAML SSO need
117
+ the session authorized at `https://github.com/orgs/<org>/sso` first.
118
+ - **Private-repo images stay private:** the `user-attachments` URL inherits repo
119
+ visibility, so an anonymous fetch on a private repo returns 404/403 by design.
120
+ - **Windows + Chrome 127+** cannot read cookies (library limitation) — use another
121
+ browser or `GH_SESSION_TOKEN`.
122
+ - The skill embeds the Markdown itself; `gh-image` only prints the URL.
@@ -0,0 +1,99 @@
1
+ ---
2
+ name: github-actions-debugger
3
+ description: "Specialized skill for diagnosing, analyzing, and fixing failing GitHub Actions workflows by parsing run logs and pipeline definitions."
4
+ category: devops
5
+ risk: safe
6
+ source: community
7
+ source_type: community
8
+ date_added: "2026-06-25"
9
+ author: Owais
10
+ tags: [github-actions, ci-cd, devops, debugging, workflows]
11
+ tools: [claude, cursor, gemini, antigravity]
12
+ ---
13
+
14
+ # GitHub Actions Pipeline Debugger
15
+
16
+ ## Overview
17
+
18
+ This skill is designed to act as an expert CI/CD diagnostician. It focuses specifically on reading raw logs from failed GitHub Actions, identifying the root cause of the crash or failure, and outputting the precise YAML or code changes required to fix the pipeline.
19
+
20
+ ## When to Use
21
+
22
+ - Use when a GitHub Actions workflow fails unexpectedly and the error log is long, obscure, or misleading.
23
+ - Use when debugging dependency mismatch errors, missing secrets, caching issues, or runner environment problems in CI.
24
+ - Use to optimize slow pipelines by identifying bottlenecks in workflow steps.
25
+ - Use to update and modernize deprecated actions or workflow syntax.
26
+
27
+ ## How It Works
28
+
29
+ 1. **Log Ingestion & Redaction:** Analyze the provided GitHub Actions workflow log (often exported as a raw text file or pasted directly). **CRITICAL SAFETY REQUIREMENT:** The user/agent must redact all sensitive credentials, secrets, tokens, private keys, and internal system paths from the logs before pasting or uploading them.
30
+ 2. **Context Mapping:** Cross-reference the failure point with the specific step and job in the `.github/workflows/*.yml` definition.
31
+ 3. **Root Cause Analysis:** Identify if the failure is due to:
32
+ - Missing or misconfigured secrets (`${{ secrets.API_KEY }}`).
33
+ - Node/Python/OS environment version mismatches.
34
+ - Flaky tests or timeout limits.
35
+ - Syntax errors in bash scripts run within the `run:` block.
36
+ - Invalid action versions or deprecated actions.
37
+ 4. **Resolution Proposal:** Provide a direct `diff` of the `.yml` file or the underlying script that needs to be modified.
38
+
39
+ ## Best Practices
40
+
41
+ - **Provide Full Context:** Always review both the workflow definition (`.yml` file) and the failure log simultaneously to ensure accurate diagnosis.
42
+ - **Check Action Versions:** Many failures are caused by deprecated runtime versions (e.g., Node.js 16) in older third-party actions (e.g., `actions/checkout@v2`). Always recommend upgrading to the latest major versions (e.g., `v4`).
43
+ - **Permissions Audit:** Ensure the workflow has the correct `permissions:` block if it's attempting to write to the repository, packages, or deploy environments.
44
+ - **Reproducibility:** If a test fails in CI but passes locally, investigate environment differences such as timezone, headless browser state, memory limits, or parallel execution race conditions.
45
+
46
+ ## Examples
47
+
48
+ ### Example 1: Fixing a Deprecated Node.js Action Version Error
49
+ **Failing Log:**
50
+ ```text
51
+ Warning: The Go/Node.js/Python version used by this action is deprecated.
52
+ Error: Node.js 16 actions are deprecated. Please update to use Node.js 20.
53
+ ```
54
+
55
+ **Proposed Fix Diff:**
56
+ ```diff
57
+ - name: Checkout Code
58
+ - uses: actions/checkout@v2
59
+ + uses: actions/checkout@v4
60
+ ```
61
+
62
+ ### Example 2: Diagnosing and Fixing a Missing Repository Secret
63
+ **Failing Log:**
64
+ ```text
65
+ Run npm run deploy
66
+ npm run deploy
67
+ shell: /usr/bin/bash -e {0}
68
+ Error: API Key is required for deployment. Process exited with code 1.
69
+ ```
70
+
71
+ **Proposed Fix Diff:**
72
+ ```diff
73
+ - name: Deploy App
74
+ run: npm run deploy
75
+ + env:
76
+ + DEPLOY_API_KEY: ${{ secrets.DEPLOY_API_KEY }}
77
+ ```
78
+
79
+ ## Security & Safety Notes
80
+
81
+ - **Credential Exposure & Raw Log Redaction**: Under no circumstances should raw logs containing unmasked secrets, private URLs, deployment targets, or tokens be processed without prior redaction. Always ensure the user or agent redacts all sensitive info before ingestion.
82
+ - **Dry-Run Mode**: When recommending modifications to bash script steps inside workflows, ensure you suggest adding flags like `--dry-run` or staging execution where possible to prevent unintended side effects in downstream environments during debugging.
83
+
84
+ ## Limitations
85
+
86
+ - The skill cannot securely read repository secrets. It can only infer missing or malformed secrets if the log complains about undefined environment variables or authentication failures.
87
+ - It cannot execute the GitHub action itself to test the fix; validation requires pushing the proposed fix to the repository and triggering a workflow run.
88
+ - Network-related transient failures (e.g., a package registry being down temporarily) might be incorrectly diagnosed as structural workflow issues if not carefully analyzed.
89
+
90
+ ## Common Pitfalls
91
+
92
+ - **Ignoring Transient Failures**: Mistaking temporary network dropouts or registry downtime (e.g., npm or pip install errors) for actual code or configuration bugs. Always check if a rerun succeeds before attempting heavy changes.
93
+ - **Hardcoding Tokens**: Fixing authentication errors by hardcoding secrets or API tokens directly into the YAML files instead of utilizing GitHub Secrets (`${{ secrets.SECRET_NAME }}`).
94
+ - **Overlooking Caching Side Effects**: Forgetting that outdated cache keys can keep corrupt dependencies loaded. If dependency installation is failing, try running a job with actions caching bypassed.
95
+
96
+ ## Related Skills
97
+
98
+ - `@devops-troubleshooter` - General DevOps and infrastructure issue resolution.
99
+ - `@cicd-automation-workflow-automate` - For creating new CI/CD pipelines from scratch.
@@ -9,8 +9,8 @@
9
9
  "version": "1.0.0",
10
10
  "license": "ISC",
11
11
  "dependencies": {
12
- "react": "^19.2.3",
13
- "react-dom": "^19.2.3"
12
+ "react": "^19.2.7",
13
+ "react-dom": "^19.2.7"
14
14
  },
15
15
  "devDependencies": {
16
16
  "@types/react": "^19.2.7",
@@ -814,24 +814,24 @@
814
814
  }
815
815
  },
816
816
  "node_modules/react": {
817
- "version": "19.2.3",
818
- "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
819
- "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
817
+ "version": "19.2.7",
818
+ "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
819
+ "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
820
820
  "license": "MIT",
821
821
  "engines": {
822
822
  "node": ">=0.10.0"
823
823
  }
824
824
  },
825
825
  "node_modules/react-dom": {
826
- "version": "19.2.3",
827
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
828
- "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
826
+ "version": "19.2.7",
827
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
828
+ "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
829
829
  "license": "MIT",
830
830
  "dependencies": {
831
831
  "scheduler": "^0.27.0"
832
832
  },
833
833
  "peerDependencies": {
834
- "react": "^19.2.3"
834
+ "react": "^19.2.7"
835
835
  }
836
836
  },
837
837
  "node_modules/rolldown": {
@@ -19,8 +19,8 @@
19
19
  "vite": "^8.0.16"
20
20
  },
21
21
  "dependencies": {
22
- "react": "^19.2.3",
23
- "react-dom": "^19.2.3"
22
+ "react": "^19.2.7",
23
+ "react-dom": "^19.2.7"
24
24
  },
25
25
  "overrides": {
26
26
  "picomatch": "4.0.4",
@@ -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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "opencode-skills-collection",
3
- "version": "3.1.7",
3
+ "version": "3.1.8",
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",
package/skills_index.json CHANGED
@@ -2702,6 +2702,28 @@
2702
2702
  "reasons": []
2703
2703
  }
2704
2704
  },
2705
+ {
2706
+ "id": "arrowspace",
2707
+ "path": "skills/arrowspace",
2708
+ "category": "data",
2709
+ "name": "arrowspace",
2710
+ "description": "Spectral vector search using graph Laplacian eigenstructure. Use when cosine/L2 similarity misses latent structure in your embeddings.",
2711
+ "risk": "safe",
2712
+ "source": "community",
2713
+ "date_added": "2026-06-25",
2714
+ "plugin": {
2715
+ "targets": {
2716
+ "codex": "supported",
2717
+ "claude": "supported"
2718
+ },
2719
+ "setup": {
2720
+ "type": "none",
2721
+ "summary": "",
2722
+ "docs": null
2723
+ },
2724
+ "reasons": []
2725
+ }
2726
+ },
2705
2727
  {
2706
2728
  "id": "article-illustrations",
2707
2729
  "path": "skills/article-illustrations",
@@ -15648,6 +15670,28 @@
15648
15670
  "reasons": []
15649
15671
  }
15650
15672
  },
15673
+ {
15674
+ "id": "gh-image",
15675
+ "path": "skills/gh-image",
15676
+ "category": "developer-tools",
15677
+ "name": "gh-image",
15678
+ "description": "Upload local images to GitHub and get canonical user-attachments embed URLs; use when asked to attach a screenshot to a PR, issue, or comment, or to embed before/after images in a README.",
15679
+ "risk": "safe",
15680
+ "source": "community",
15681
+ "date_added": "2026-06-25",
15682
+ "plugin": {
15683
+ "targets": {
15684
+ "codex": "supported",
15685
+ "claude": "supported"
15686
+ },
15687
+ "setup": {
15688
+ "type": "none",
15689
+ "summary": "",
15690
+ "docs": null
15691
+ },
15692
+ "reasons": []
15693
+ }
15694
+ },
15651
15695
  {
15652
15696
  "id": "gh-review-requests",
15653
15697
  "path": "skills/gh-review-requests",
@@ -15890,6 +15934,28 @@
15890
15934
  "reasons": []
15891
15935
  }
15892
15936
  },
15937
+ {
15938
+ "id": "github-actions-debugger",
15939
+ "path": "skills/github-actions-debugger",
15940
+ "category": "devops",
15941
+ "name": "github-actions-debugger",
15942
+ "description": "Specialized skill for diagnosing, analyzing, and fixing failing GitHub Actions workflows by parsing run logs and pipeline definitions.",
15943
+ "risk": "safe",
15944
+ "source": "community",
15945
+ "date_added": "2026-06-25",
15946
+ "plugin": {
15947
+ "targets": {
15948
+ "codex": "supported",
15949
+ "claude": "supported"
15950
+ },
15951
+ "setup": {
15952
+ "type": "none",
15953
+ "summary": "",
15954
+ "docs": null
15955
+ },
15956
+ "reasons": []
15957
+ }
15958
+ },
15893
15959
  {
15894
15960
  "id": "github-actions-templates",
15895
15961
  "path": "skills/github-actions-templates",
@@ -25689,6 +25755,28 @@
25689
25755
  "reasons": []
25690
25756
  }
25691
25757
  },
25758
+ {
25759
+ "id": "premium-3d-website",
25760
+ "path": "skills/premium-3d-website",
25761
+ "category": "frontend",
25762
+ "name": "premium-3d-website",
25763
+ "description": "Guidelines for building premium 3D websites, focusing on custom WebGL shaders, post-processing, physics-based interactions, smooth animations, preloaders, and device optimization.",
25764
+ "risk": "safe",
25765
+ "source": "self",
25766
+ "date_added": "2026-06-25",
25767
+ "plugin": {
25768
+ "targets": {
25769
+ "codex": "supported",
25770
+ "claude": "supported"
25771
+ },
25772
+ "setup": {
25773
+ "type": "none",
25774
+ "summary": "",
25775
+ "docs": null
25776
+ },
25777
+ "reasons": []
25778
+ }
25779
+ },
25692
25780
  {
25693
25781
  "id": "price-psychology-strategist",
25694
25782
  "path": "skills/price-psychology-strategist",