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.
- package/bundled-skills/.antigravity-install-manifest.json +6 -1
- 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/gh-image/SKILL.md +122 -0
- package/bundled-skills/github-actions-debugger/SKILL.md +99 -0
- 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/premium-3d-website/SKILL.md +133 -0
- package/package.json +1 -1
- 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/ ←
|
|
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
|
-
│ └── ... (
|
|
45
|
+
│ └── ... (1,684+ skills khác)
|
|
46
46
|
│
|
|
47
|
-
├── 📁
|
|
48
|
-
│ ├──
|
|
49
|
-
│
|
|
47
|
+
├── 📁 tools/
|
|
48
|
+
│ ├── 📁 scripts/ ← Quản lý, xác thực và 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 │
|
|
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
|
-
│
|
|
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:
|
|
178
|
+
### Bước 1: Cài đặt bằng installer
|
|
178
179
|
|
|
179
180
|
```
|
|
180
181
|
┌─────────────────────────────────────────┐
|
|
181
182
|
│ Terminal │
|
|
182
183
|
├─────────────────────────────────────────┤
|
|
183
|
-
│ $
|
|
184
|
-
│ sickn33/antigravity-awesome-skills │
|
|
185
|
-
│ .agent/skills │
|
|
184
|
+
│ $ npx antigravity-awesome-skills │
|
|
186
185
|
│ │
|
|
187
|
-
│ ✓
|
|
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
|
-
│ 📁
|
|
197
|
+
│ 📁 ~/.agents/ │
|
|
199
198
|
│ └── 📁 skills/ │
|
|
200
199
|
│ ├── 📁 brainstorming/ │
|
|
201
200
|
│ ├── 📁 stripe-integration/ │
|
|
202
201
|
│ ├── 📁 react-best-practices/ │
|
|
203
|
-
│ └── ... (
|
|
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Ử │
|
|
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 │
|
|
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
|
-
│
|
|
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
|
-
│
|
|
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
|
+

|
|
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.
|
|
13
|
-
"react-dom": "^19.2.
|
|
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.
|
|
818
|
-
"resolved": "https://registry.npmjs.org/react/-/react-19.2.
|
|
819
|
-
"integrity": "sha512-
|
|
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.
|
|
827
|
-
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.
|
|
828
|
-
"integrity": "sha512-
|
|
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.
|
|
834
|
+
"react": "^19.2.7"
|
|
835
835
|
}
|
|
836
836
|
},
|
|
837
837
|
"node_modules/rolldown": {
|
|
@@ -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
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",
|