diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index c110eda1..e11511ee 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "antigravity-awesome-skills", "version": "9.0.0", - "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,315 supported skills.", + "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,317 supported skills.", "author": { "name": "sickn33 and contributors", "url": "https://github.com/sickn33/antigravity-awesome-skills" diff --git a/CATALOG.md b/CATALOG.md index cbc8d83e..a335b50f 100644 --- a/CATALOG.md +++ b/CATALOG.md @@ -2,7 +2,7 @@ Generated at: 2026-02-08T00:00:00.000Z -Total skills: 1329 +Total skills: 1331 ## architecture (88) @@ -614,7 +614,7 @@ Total skills: 1329 | `zod-validation-expert` | Expert in Zod β€” TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js... | zod, validation | zod, validation, typescript, first, schema, covers, parsing, custom, errors, refinements, type, inference | | `zustand-store-ts` | Create Zustand stores following established patterns with proper TypeScript types and middleware. | zustand, store, ts | zustand, store, ts, stores, following, established, proper, typescript, types, middleware | -## general (325) +## general (326) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -844,6 +844,7 @@ Total skills: 1329 | `pentest-checklist` | Provide a comprehensive checklist for planning, executing, and following up on penetration tests. Ensure thorough preparation, proper scoping, and effective ... | pentest, checklist | pentest, checklist, provide, planning, executing, following, up, penetration, tests, thorough, preparation, proper | | `performance-optimizer` | Identifies and fixes performance bottlenecks in code, databases, and APIs. Measures before and after to prove improvements. | performance, optimizer | performance, optimizer, identifies, fixes, bottlenecks, code, databases, apis, measures, before, after, prove | | `performance-profiling` | Performance profiling principles. Measurement, analysis, and optimization techniques. | performance, profiling | performance, profiling, principles, measurement, analysis, optimization, techniques | +| `phase-gated-debugging` | Use when debugging any bug. Enforces a 5-phase protocol where code edits are blocked until root cause is confirmed. Prevents premature fix attempts. | phase, gated, debugging | phase, gated, debugging, any, bug, enforces, protocol, where, code, edits, blocked, until | | `plaid-fintech` | Create a linktoken for Plaid Link, exchange publictoken for accesstoken. Link tokens are short-lived, one-time use. Access tokens don't expire but may need u... | plaid, fintech | plaid, fintech, linktoken, link, exchange, publictoken, accesstoken, tokens, short, lived, one, time | | `plan-writing` | Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work. | plan, writing | plan, writing, structured, task, planning, clear, breakdowns, dependencies, verification, criteria, implementing, features | | `planning-with-files` | Work like Manus: Use persistent markdown files as your "working memory on disk." | planning, with, files | planning, with, files, work, like, manus, persistent, markdown, working, memory, disk | @@ -1068,7 +1069,7 @@ Total skills: 1329 | `whatsapp-cloud-api` | Integracao com WhatsApp Business Cloud API (Meta). Mensagens, templates, webhooks HMAC-SHA256, automacao de atendimento. Boilerplates Node.js e Python. | messaging, whatsapp, meta, webhooks | messaging, whatsapp, meta, webhooks, cloud, api, integracao, com, business, mensagens, hmac, sha256 | | `x-twitter-scraper` | X (Twitter) data platform skill β€” tweet search, user lookup, follower extraction, engagement metrics, giveaway draws, monitoring, webhooks, 19 extraction too... | [twitter, x-api, scraping, mcp, social-media, data-extraction, giveaway, monitoring, webhooks] | [twitter, x-api, scraping, mcp, social-media, data-extraction, giveaway, monitoring, webhooks], twitter, scraper, data | -## security (165) +## security (166) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -1186,6 +1187,7 @@ Total skills: 1329 | `red-team-tools` | Implement proven methodologies and tool workflows from top security researchers for effective reconnaissance, vulnerability discovery, and bug bounty hunting... | red, team | red, team, proven, methodologies, top, security, researchers, effective, reconnaissance, vulnerability, discovery, bug | | `risk-manager` | Monitor portfolio risk, R-multiples, and position limits. Creates hedging strategies, calculates expectancy, and implements stop-losses. | risk, manager | risk, manager, monitor, portfolio, multiples, position, limits, creates, hedging, calculates, expectancy, implements | | `risk-metrics-calculation` | Calculate portfolio risk metrics including VaR, CVaR, Sharpe, Sortino, and drawdown analysis. Use when measuring portfolio risk, implementing risk limits, or... | risk, metrics, calculation | risk, metrics, calculation, calculate, portfolio, including, var, cvar, sharpe, sortino, drawdown, analysis | +| `saas-multi-tenant` | Design and implement multi-tenant SaaS architectures with row-level security, tenant-scoped queries, shared-schema isolation, and safe cross-tenant admin pat... | multi-tenancy, saas, row-level-security, postgresql, tenant-isolation | multi-tenancy, saas, row-level-security, postgresql, tenant-isolation, multi, tenant, architectures, row, level, security, scoped | | `saas-mvp-launcher` | Use when planning or building a SaaS MVP from scratch. Provides a structured roadmap covering tech stack, architecture, auth, payments, and launch checklist. | saas, mvp, launcher | saas, mvp, launcher, planning, building, scratch, provides, structured, roadmap, covering, tech, stack | | `sast-configuration` | Static Application Security Testing (SAST) tool setup, configuration, and custom rule creation for comprehensive security scanning across multiple programmin... | sast, configuration | sast, configuration, static, application, security, testing, setup, custom, rule, creation, scanning, multiple | | `scanning-tools` | Master essential security scanning tools for network discovery, vulnerability assessment, web application testing, wireless security, and compliance validati... | scanning | scanning, essential, security, network, discovery, vulnerability, assessment, web, application, testing, wireless, compliance | diff --git a/README.md b/README.md index 0b12ef46..2dbdedf6 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ - -# 🌌 Antigravity Awesome Skills: 1,329+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More + +# 🌌 Antigravity Awesome Skills: 1,331+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More -> **Installable GitHub library of 1,329+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.** +> **Installable GitHub library of 1,331+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.** Antigravity Awesome Skills is a GitHub repository and installer CLI for reusable `SKILL.md` playbooks. Instead of collecting random prompts, you get a searchable, installable skill library for planning, coding, debugging, testing, security review, infrastructure work, product workflows, and growth tasks across the major AI coding assistants. @@ -26,7 +26,7 @@ Antigravity Awesome Skills is a GitHub repository and installer CLI for reusable - **Installable, not just inspirational**: use `npx antigravity-awesome-skills` to put skills where your tool expects them. - **Built for major agent workflows**: Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, Kiro, OpenCode, Copilot, and more. -- **Broad coverage with real utility**: 1,329+ skills across development, testing, security, infrastructure, product, and marketing. +- **Broad coverage with real utility**: 1,331+ skills across development, testing, security, infrastructure, product, and marketing. - **Faster onboarding**: bundles and workflows reduce the time from "I found this repo" to "I used my first skill". - **Useful whether you want breadth or curation**: browse the full catalog, start with top bundles, or compare alternatives before installing. @@ -47,7 +47,7 @@ Antigravity Awesome Skills is a GitHub repository and installer CLI for reusable - [🧭 Antigravity Workflows](#antigravity-workflows) - [βš–οΈ Alternatives & Comparisons](#alternatives--comparisons) - [πŸ“¦ Features & Categories](#features--categories) -- [πŸ“š Browse 1,329+ Skills](#browse-1329-skills) +- [πŸ“š Browse 1,331+ Skills](#browse-1331-skills) - [🀝 Contributing](#contributing) - [πŸ’¬ Community](#community) - [β˜• Support the Project](#support-the-project) @@ -260,7 +260,7 @@ If you want the full explanation of root plugins, bundle plugins, full-library i ## Best Skills By Tool -If you want a faster answer than "browse all 1,329+ skills", start with a tool-specific guide: +If you want a faster answer than "browse all 1,331+ skills", start with a tool-specific guide: - **[Claude Code skills](docs/users/claude-code-skills.md)**: install paths, starter skills, prompt examples, and plugin marketplace flow. - **[Cursor skills](docs/users/cursor-skills.md)**: best starter skills for `.cursor/skills/`, UI-heavy work, and pair-programming flows. @@ -425,7 +425,7 @@ The repository is organized into specialized domains to transform your AI into a Counts change as new skills are added. For the current full registry, see [CATALOG.md](CATALOG.md). -## Browse 1,329+ Skills +## Browse 1,331+ Skills - Open the interactive browser in [`apps/web-app`](apps/web-app). - Read the full catalog in [`CATALOG.md`](CATALOG.md). diff --git a/apps/web-app/public/sitemap.xml b/apps/web-app/public/sitemap.xml index 75c25d40..3b5e3ba7 100644 --- a/apps/web-app/public/sitemap.xml +++ b/apps/web-app/public/sitemap.xml @@ -6,6 +6,18 @@ daily 1.0 + + http://localhost/skill/phase-gated-debugging + 2026-03-28 + weekly + 0.7 + + + http://localhost/skill/saas-multi-tenant + 2026-03-28 + weekly + 0.7 + http://localhost/skill/akf-trust-metadata 2026-03-28 @@ -234,16 +246,4 @@ weekly 0.7 - - http://localhost/skill/sales-enablement - 2026-03-28 - weekly - 0.7 - - - http://localhost/skill/seo - 2026-03-28 - weekly - 0.7 - diff --git a/apps/web-app/public/skills.json.backup b/apps/web-app/public/skills.json.backup index 16de9bea..e6a55adf 100644 --- a/apps/web-app/public/skills.json.backup +++ b/apps/web-app/public/skills.json.backup @@ -20348,6 +20348,28 @@ "reasons": [] } }, + { + "id": "phase-gated-debugging", + "path": "skills/phase-gated-debugging", + "category": "uncategorized", + "name": "phase-gated-debugging", + "description": "Use when debugging any bug. Enforces a 5-phase protocol where code edits are blocked until root cause is confirmed. Prevents premature fix attempts.", + "risk": "safe", + "source": "community", + "date_added": "2026-03-28", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "php-pro", "path": "skills/php-pro", @@ -22551,6 +22573,28 @@ "reasons": [] } }, + { + "id": "saas-multi-tenant", + "path": "skills/saas-multi-tenant", + "category": "database", + "name": "saas-multi-tenant", + "description": "Design and implement multi-tenant SaaS architectures with row-level security, tenant-scoped queries, shared-schema isolation, and safe cross-tenant admin patterns in PostgreSQL and TypeScript.", + "risk": "safe", + "source": "community", + "date_added": "2026-03-28", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "saas-mvp-launcher", "path": "skills/saas-mvp-launcher", diff --git a/data/bundles.json b/data/bundles.json index aa81a4c0..3503d596 100644 --- a/data/bundles.json +++ b/data/bundles.json @@ -260,6 +260,7 @@ "ruby-pro", "rust-async-patterns", "rust-pro", + "saas-multi-tenant", "sankhya-dashboard-html-jsp-custom-best-pratices", "scanpy", "scikit-learn", @@ -403,6 +404,7 @@ "red-team-tools", "risk-manager", "risk-metrics-calculation", + "saas-multi-tenant", "saas-mvp-launcher", "sast-configuration", "scanning-tools", @@ -1193,6 +1195,7 @@ "postgresql", "prisma-expert", "programmatic-seo", + "saas-multi-tenant", "schema-markup", "seo", "seo-audit", diff --git a/data/catalog.json b/data/catalog.json index c4a34077..0b133723 100644 --- a/data/catalog.json +++ b/data/catalog.json @@ -1,6 +1,6 @@ { "generatedAt": "2026-02-08T00:00:00.000Z", - "total": 1329, + "total": 1331, "skills": [ { "id": "00-andruia-consultant", @@ -22692,6 +22692,32 @@ ], "path": "skills/personal-tool-builder/SKILL.md" }, + { + "id": "phase-gated-debugging", + "name": "phase-gated-debugging", + "description": "Use when debugging any bug. Enforces a 5-phase protocol where code edits are blocked until root cause is confirmed. Prevents premature fix attempts.", + "category": "general", + "tags": [ + "phase", + "gated", + "debugging" + ], + "triggers": [ + "phase", + "gated", + "debugging", + "any", + "bug", + "enforces", + "protocol", + "where", + "code", + "edits", + "blocked", + "until" + ], + "path": "skills/phase-gated-debugging/SKILL.md" + }, { "id": "php-pro", "name": "php-pro", @@ -25127,6 +25153,34 @@ ], "path": "skills/rust-pro/SKILL.md" }, + { + "id": "saas-multi-tenant", + "name": "saas-multi-tenant", + "description": "Design and implement multi-tenant SaaS architectures with row-level security, tenant-scoped queries, shared-schema isolation, and safe cross-tenant admin patterns in PostgreSQL and TypeScript.", + "category": "security", + "tags": [ + "multi-tenancy", + "saas", + "row-level-security", + "postgresql", + "tenant-isolation" + ], + "triggers": [ + "multi-tenancy", + "saas", + "row-level-security", + "postgresql", + "tenant-isolation", + "multi", + "tenant", + "architectures", + "row", + "level", + "security", + "scoped" + ], + "path": "skills/saas-multi-tenant/SKILL.md" + }, { "id": "saas-mvp-launcher", "name": "saas-mvp-launcher", diff --git a/data/plugin-compatibility.json b/data/plugin-compatibility.json index b7efdf22..388f4c37 100644 --- a/data/plugin-compatibility.json +++ b/data/plugin-compatibility.json @@ -17647,6 +17647,25 @@ }, "runtime_files": [] }, + { + "id": "phase-gated-debugging", + "path": "skills/phase-gated-debugging", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, { "id": "php-pro", "path": "skills/php-pro", @@ -19557,6 +19576,25 @@ }, "runtime_files": [] }, + { + "id": "saas-multi-tenant", + "path": "skills/saas-multi-tenant", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, { "id": "saas-mvp-launcher", "path": "skills/saas-mvp-launcher", @@ -25413,10 +25451,10 @@ } ], "summary": { - "total_skills": 1329, + "total_skills": 1331, "supported": { - "codex": 1300, - "claude": 1315 + "codex": 1302, + "claude": 1317 }, "blocked": { "codex": 29, diff --git a/docs/integrations/jetski-cortex.md b/docs/integrations/jetski-cortex.md index e74e2f93..b558e2f3 100644 --- a/docs/integrations/jetski-cortex.md +++ b/docs/integrations/jetski-cortex.md @@ -1,9 +1,9 @@ --- title: Jetski/Cortex + Gemini Integration Guide -description: "Come usare antigravity-awesome-skills con Jetski/Cortex evitando l’overflow di contesto con 1.329+ skill." +description: "Come usare antigravity-awesome-skills con Jetski/Cortex evitando l’overflow di contesto con 1.331+ skill." --- -# Jetski/Cortex + Gemini: integrazione sicura con 1.329+ skill +# Jetski/Cortex + Gemini: integrazione sicura con 1.331+ skill Questa guida mostra come integrare il repository `antigravity-awesome-skills` con un agente basato su **Jetski/Cortex + Gemini** (o framework simili) **senza superare il context window** del modello. @@ -23,7 +23,7 @@ Non bisogna mai: - concatenare il contenuto di tutte le `SKILL.md` in un singolo system prompt; - reiniettare l’intera libreria per **ogni** richiesta. -Con oltre 1.329 skill, questo approccio riempie il context window prima ancora di aggiungere i messaggi dell’utente, causando l’errore di truncation. +Con oltre 1.331 skill, questo approccio riempie il context window prima ancora di aggiungere i messaggi dell’utente, causando l’errore di truncation. --- diff --git a/docs/integrations/jetski-gemini-loader/README.md b/docs/integrations/jetski-gemini-loader/README.md index 8fa59a4d..134ed45f 100644 --- a/docs/integrations/jetski-gemini-loader/README.md +++ b/docs/integrations/jetski-gemini-loader/README.md @@ -20,7 +20,7 @@ This example shows one way to integrate **antigravity-awesome-skills** with a Je - How to enforce a **maximum number of skills per turn** via `maxSkillsPerTurn`. - How to choose whether to **truncate or error** when too many skills are requested via `overflowBehavior`. -This pattern avoids context overflow when you have 1,329+ skills installed. +This pattern avoids context overflow when you have 1,331+ skills installed. --- diff --git a/docs/maintainers/repo-growth-seo.md b/docs/maintainers/repo-growth-seo.md index 00091fe2..13472e9a 100644 --- a/docs/maintainers/repo-growth-seo.md +++ b/docs/maintainers/repo-growth-seo.md @@ -6,7 +6,7 @@ This document keeps the repository's GitHub-facing discovery copy aligned with t Preferred positioning: -> Installable GitHub library of 1,329+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants. +> Installable GitHub library of 1,331+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants. Key framing: @@ -20,7 +20,7 @@ Key framing: Preferred description: -> Installable GitHub library of 1,329+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections. +> Installable GitHub library of 1,331+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections. Preferred homepage: @@ -28,7 +28,7 @@ Preferred homepage: Preferred social preview: -- use a clean preview image that says `1,329+ Agentic Skills`; +- use a clean preview image that says `1,331+ Agentic Skills`; - mention Claude Code, Cursor, Codex CLI, and Gemini CLI; - avoid dense text and tiny logos that disappear in social cards. diff --git a/docs/maintainers/skills-update-guide.md b/docs/maintainers/skills-update-guide.md index 80aa8bbc..32fde8cb 100644 --- a/docs/maintainers/skills-update-guide.md +++ b/docs/maintainers/skills-update-guide.md @@ -69,7 +69,7 @@ For manual updates, you need: The update process refreshes: - Skills index (`skills_index.json`) - Web app skills data (`apps\web-app\public\skills.json`) -- All 1,329+ skills from the skills directory +- All 1,331+ skills from the skills directory ## When to Update diff --git a/docs/users/bundles.md b/docs/users/bundles.md index 7debbf7c..b13b1785 100644 --- a/docs/users/bundles.md +++ b/docs/users/bundles.md @@ -673,4 +673,4 @@ Found a skill that should be in a bundle? Or want to create a new bundle? [Open --- -_Last updated: March 2026 | Total Skills: 1,329+ | Total Bundles: 37_ +_Last updated: March 2026 | Total Skills: 1,331+ | Total Bundles: 37_ diff --git a/docs/users/claude-code-skills.md b/docs/users/claude-code-skills.md index b8bb1a93..d73d6266 100644 --- a/docs/users/claude-code-skills.md +++ b/docs/users/claude-code-skills.md @@ -12,7 +12,7 @@ Install the library into Claude Code, then invoke focused skills directly in the ## Why use this repo for Claude Code -- It includes 1,329+ skills instead of a narrow single-domain starter pack. +- It includes 1,331+ skills instead of a narrow single-domain starter pack. - It supports the standard `.claude/skills/` path and the Claude Code plugin marketplace flow. - It also ships generated bundle plugins so teams can install focused packs like `Essentials` or `Security Developer` from the marketplace metadata. - It includes onboarding docs, bundles, and workflows so new users do not need to guess where to begin. diff --git a/docs/users/gemini-cli-skills.md b/docs/users/gemini-cli-skills.md index 0f51802b..22fd0093 100644 --- a/docs/users/gemini-cli-skills.md +++ b/docs/users/gemini-cli-skills.md @@ -12,7 +12,7 @@ Install into the Gemini skills path, then ask Gemini to apply one skill at a tim - It installs directly into the expected Gemini skills path. - It includes both core software engineering skills and deeper agent/LLM-oriented skills. -- It helps new users get started with bundles and workflows rather than forcing a cold start from 1,329+ files. +- It helps new users get started with bundles and workflows rather than forcing a cold start from 1,331+ files. - It is useful whether you want a broad internal skill library or a single repo to test many workflows quickly. ## Install Gemini CLI Skills diff --git a/docs/users/kiro-integration.md b/docs/users/kiro-integration.md index 17de6097..9289279b 100644 --- a/docs/users/kiro-integration.md +++ b/docs/users/kiro-integration.md @@ -18,7 +18,7 @@ Kiro is AWS's agentic AI IDE that combines: Kiro's agentic capabilities are enhanced by skills that provide: -- **Domain expertise** across 1,329+ specialized areas +- **Domain expertise** across 1,331+ specialized areas - **Best practices** from Anthropic, OpenAI, Google, Microsoft, and AWS - **Workflow automation** for common development tasks - **AWS-specific patterns** for serverless, infrastructure, and cloud architecture diff --git a/docs/users/usage.md b/docs/users/usage.md index 0846cd49..9de013cf 100644 --- a/docs/users/usage.md +++ b/docs/users/usage.md @@ -14,7 +14,7 @@ If you came in through a **Claude Code** or **Codex** plugin instead of a full l When you ran `npx antigravity-awesome-skills` or cloned the repository, you: -βœ… **Downloaded 1,329+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`) +βœ… **Downloaded 1,331+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`) βœ… **Made them available** to your AI assistant ❌ **Did NOT enable them all automatically** (they're just sitting there, waiting) @@ -34,7 +34,7 @@ Bundles are **curated groups** of skills organized by role. They help you decide **Analogy:** -- You installed a toolbox with 1,329+ tools (βœ… done) +- You installed a toolbox with 1,331+ tools (βœ… done) - Bundles are like **labeled organizer trays** saying: "If you're a carpenter, start with these 10 tools" - You can either **pick skills from the tray** or install that tray as a focused marketplace bundle plugin @@ -212,7 +212,7 @@ Let's actually use a skill right now. Follow these steps: ## Step 5: Picking Your First Skills (Practical Advice) -Don't try to use all 1,329+ skills at once. Here's a sensible approach: +Don't try to use all 1,331+ skills at once. Here's a sensible approach: If you want a tool-specific starting point before choosing skills, use: @@ -343,7 +343,7 @@ Usually no, but if your AI doesn't recognize a skill: ### "Can I load all skills into the model at once?" -No. Even though you have 1,329+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block. +No. Even though you have 1,331+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block. The intended pattern is: diff --git a/docs/users/visual-guide.md b/docs/users/visual-guide.md index 806b56ba..4e025b4b 100644 --- a/docs/users/visual-guide.md +++ b/docs/users/visual-guide.md @@ -34,7 +34,7 @@ antigravity-awesome-skills/ β”œβ”€β”€ πŸ“„ CONTRIBUTING.md ← Contributor workflow β”œβ”€β”€ πŸ“„ CATALOG.md ← Full generated catalog β”‚ -β”œβ”€β”€ πŸ“ skills/ ← 1,329+ skills live here +β”œβ”€β”€ πŸ“ skills/ ← 1,331+ skills live here β”‚ β”‚ β”‚ β”œβ”€β”€ πŸ“ brainstorming/ β”‚ β”‚ └── πŸ“„ SKILL.md ← Skill definition @@ -47,7 +47,7 @@ antigravity-awesome-skills/ β”‚ β”‚ └── πŸ“ 2d-games/ β”‚ β”‚ └── πŸ“„ SKILL.md ← Nested skills also supported β”‚ β”‚ -β”‚ └── ... (1,329+ total) +β”‚ └── ... (1,331+ total) β”‚ β”œβ”€β”€ πŸ“ apps/ β”‚ └── πŸ“ web-app/ ← Interactive browser @@ -100,7 +100,7 @@ antigravity-awesome-skills/ ``` β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” - β”‚ 1,329+ SKILLS β”‚ + β”‚ 1,331+ SKILLS β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” @@ -201,7 +201,7 @@ If you want a workspace-style manual install instead, cloning into `.agent/skill β”‚ β”œβ”€β”€ πŸ“ brainstorming/ β”‚ β”‚ β”œβ”€β”€ πŸ“ stripe-integration/ β”‚ β”‚ β”œβ”€β”€ πŸ“ react-best-practices/ β”‚ -β”‚ └── ... (1,329+ total) β”‚ +β”‚ └── ... (1,331+ total) β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ``` diff --git a/package.json b/package.json index 4dd344a9..54fbcde7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "antigravity-awesome-skills", "version": "9.0.0", - "description": "1,329+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.", + "description": "1,331+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.", "license": "MIT", "scripts": { "validate": "node tools/scripts/run-python.js tools/scripts/validate_skills.py", diff --git a/plugins/antigravity-awesome-skills-claude/skills/phase-gated-debugging/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/phase-gated-debugging/SKILL.md new file mode 100644 index 00000000..a5c6f6fb --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/phase-gated-debugging/SKILL.md @@ -0,0 +1,70 @@ +--- +name: phase-gated-debugging +description: "Use when debugging any bug. Enforces a 5-phase protocol where code edits are blocked until root cause is confirmed. Prevents premature fix attempts." +risk: safe +source: community +date_added: "2026-03-28" +--- + +# Phase-Gated Debugging + +## Overview + +AI coding agents see an error and immediately edit code. They guess at fixes, get it wrong, and spiral. This skill enforces a strict 5-phase protocol where you CANNOT edit source code until the root cause is identified and confirmed. + +Based on [claude-debug](https://github.com/krabat-l/claude-debug) (full plugin with PreToolUse hook enforcement). + +## When to Use + +Use this skill when: + +- a bug keeps getting "fixed" without resolving the underlying issue +- you need to slow an agent down and force disciplined debugging before code edits +- the failure is intermittent, a regression, performance-related, or otherwise hard to isolate +- you want an explicit user confirmation checkpoint before any fix is applied + +## The Protocol + +### Phase 1: REPRODUCE +Run the failing command/test. Capture the exact error. Run 2-3 times for consistency. +- Do NOT read source code +- Do NOT hypothesize +- Do NOT edit any files + +### Phase 2: ISOLATE +Read code. Add diagnostic logging marked `// DEBUG`. Re-run with diagnostics. Binary search to narrow down. +- Only `// DEBUG` marked logging is allowed +- Do NOT fix the bug even if you see it + +### Phase 3: ROOT CAUSE +Analyze WHY at the isolated location. Use "5 Whys" technique. Remove debug logging. + +State: "This is my root cause analysis: [explanation]. Do you agree, or should I investigate further?" + +**WAIT for user confirmation. Do NOT proceed without it.** + +### Phase 4: FIX +Remove all `// DEBUG` lines. Apply minimal change addressing confirmed root cause. +- Only edit files related to root cause +- Do NOT refactor unrelated code + +### Phase 5: VERIFY +Run original failing test β€” must pass. Run related tests. For intermittent bugs, run 5+ times. +If verification fails: root cause was wrong, go back to Phase 2. + +## Bug-Type Strategies + +| Type | Technique | +|------|-----------| +| Crash/Panic | Stack trace backward β€” trace the bad value to its source | +| Wrong Output | Binary search β€” log midpoint, halve search space each iteration | +| Intermittent | Compare passing vs failing run logs β€” find ordering divergence | +| Regression | `git bisect` β€” find the offending commit | +| Performance | Timing at stage boundaries β€” find the bottleneck | + +## Key Rules + +1. NEVER edit source code in phases 1-3 (except `// DEBUG` in phase 2) +2. NEVER proceed past phase 3 without user confirmation +3. ALWAYS reproduce before investigating +4. ALWAYS verify after fixing diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-animation/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-animation/SKILL.md index 22812157..b61cc800 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-animation/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-animation/SKILL.md @@ -12,22 +12,23 @@ source: community ```javascript import * as THREE from "three"; -// Simple procedural animation -const clock = new THREE.Clock(); +// Simple procedural animation with Timer (recommended in r183) +const timer = new THREE.Timer(); -function animate() { - const delta = clock.getDelta(); - const elapsed = clock.getElapsedTime(); +renderer.setAnimationLoop(() => { + timer.update(); + const delta = timer.getDelta(); + const elapsed = timer.getElapsed(); mesh.rotation.y += delta; mesh.position.y = Math.sin(elapsed) * 0.5; - requestAnimationFrame(animate); renderer.render(scene, camera); -} -animate(); +}); ``` +**Note:** `THREE.Timer` is recommended over `THREE.Clock` as of r183. Timer pauses when the page is hidden and has a cleaner API. `THREE.Clock` still works but is considered legacy. + ## Animation System Overview Three.js animation system has three main components: @@ -118,6 +119,10 @@ track.setInterpolation(THREE.InterpolateSmooth); // Cubic spline track.setInterpolation(THREE.InterpolateDiscrete); // Step function ``` +### BezierInterpolant (r183) + +Three.js r183 adds `THREE.BezierInterpolant` for bezier curve interpolation in keyframe tracks, enabling smoother animation curves with tangent control. + ## AnimationMixer Plays animations on an object and its descendants. diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-fundamentals/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-fundamentals/SKILL.md index 62cc4b8b..675238f3 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-fundamentals/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-fundamentals/SKILL.md @@ -416,7 +416,24 @@ function dispose() { } ``` -### Clock for Animation +### Timer and Clock for Animation + +**Timer (recommended in r183)** - pauses when tab is hidden, cleaner API: + +```javascript +const timer = new THREE.Timer(); + +renderer.setAnimationLoop(() => { + timer.update(); + const delta = timer.getDelta(); + const elapsed = timer.getElapsed(); + + mesh.rotation.y += delta * 0.5; + renderer.render(scene, camera); +}); +``` + +**Clock (legacy, still works):** ```javascript const clock = new THREE.Clock(); @@ -432,6 +449,17 @@ function animate() { } ``` +### Animation Loop + +Prefer `renderer.setAnimationLoop()` over manual `requestAnimationFrame`. It handles WebXR compatibility and is the standard Three.js pattern: + +```javascript +renderer.setAnimationLoop(() => { + controls.update(); + renderer.render(scene, camera); +}); +``` + ### Responsive Canvas ```javascript @@ -483,6 +511,21 @@ lod.addLevel(lowDetailMesh, 100); scene.add(lod); ``` +## WebGPU Renderer (r183) + +Three.js includes an experimental WebGPU renderer as an alternative to WebGL: + +```javascript +import { WebGPURenderer } from "three/addons/renderers/webgpu/WebGPURenderer.js"; + +const renderer = new WebGPURenderer({ antialias: true }); +await renderer.init(); +renderer.setSize(window.innerWidth, window.innerHeight); +document.body.appendChild(renderer.domElement); +``` + +WebGPU uses TSL (Three.js Shading Language) instead of GLSL. The WebGL renderer remains the default and is fully supported. + ## See Also - `threejs-geometry` - Geometry creation and manipulation diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-geometry/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-geometry/SKILL.md index 00fa68cf..dc33f21b 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-geometry/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-geometry/SKILL.md @@ -543,6 +543,36 @@ new THREE.SphereGeometry(1, 16, 16); // Performance mode geometry.dispose(); ``` +## BatchedMesh (r183) + +`BatchedMesh` is a higher-level alternative to `InstancedMesh` that supports multiple geometries in a single draw call. As of r183, it supports **per-instance opacity** and **per-instance wireframe**. + +```javascript +const batchedMesh = new THREE.BatchedMesh(maxGeometryCount, maxVertexCount, maxIndexCount); +batchedMesh.sortObjects = true; // Enable depth sorting for transparency + +// Add different geometries +const boxId = batchedMesh.addGeometry(new THREE.BoxGeometry(1, 1, 1)); +const sphereId = batchedMesh.addGeometry(new THREE.SphereGeometry(0.5, 16, 16)); + +// Add instances of those geometries +const instance1 = batchedMesh.addInstance(boxId); +const instance2 = batchedMesh.addInstance(sphereId); + +// Set transforms +const matrix = new THREE.Matrix4(); +matrix.setPosition(2, 0, 0); +batchedMesh.setMatrixAt(instance1, matrix); + +// Per-instance opacity (r183) +batchedMesh.setOpacityAt(instance1, 0.5); + +// Per-instance visibility +batchedMesh.setVisibleAt(instance2, false); + +scene.add(batchedMesh); +``` + ## See Also - `threejs-fundamentals` - Scene setup and Object3D diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-interaction/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-interaction/SKILL.md index c51b7fbd..fa9e6c14 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-interaction/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-interaction/SKILL.md @@ -189,6 +189,18 @@ function animate() { } ``` +#### OrbitControls Programmatic Methods (r183) + +```javascript +// Programmatic camera movement +controls.dolly(1.5); // Dolly in/out (zoom for perspective cameras) +controls.pan(deltaX, deltaY); // Pan the camera +controls.rotate(deltaAzimuth, deltaPolar); // Rotate around target + +// Cursor style (r183) +controls.cursorStyle = { orbit: "grab", pan: "move", dolly: "zoom-in" }; +``` + ### FlyControls ```javascript diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-lighting/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-lighting/SKILL.md index 3469d94d..b9dd9dae 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-lighting/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-lighting/SKILL.md @@ -186,7 +186,7 @@ Rectangular area light. Great for soft, realistic lighting. import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js"; import { RectAreaLightUniformsLib } from "three/examples/jsm/lights/RectAreaLightUniformsLib.js"; -// Must initialize uniforms first +// Must initialize uniforms first (WebGL renderer only) RectAreaLightUniformsLib.init(); // RectAreaLight(color, intensity, width, height) @@ -199,7 +199,8 @@ scene.add(rectLight); const helper = new RectAreaLightHelper(rectLight); rectLight.add(helper); -// Note: Only works with MeshStandardMaterial and MeshPhysicalMaterial +// Works with MeshStandardMaterial, MeshPhysicalMaterial +// r183: Clearcoat on MeshPhysicalMaterial is now properly lit by RectAreaLight // Does not cast shadows natively ``` diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-loaders/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-loaders/SKILL.md index fea39f2e..e7e2aa24 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-loaders/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-loaders/SKILL.md @@ -255,7 +255,7 @@ import { KTX2Loader } from "three/addons/loaders/KTX2Loader.js"; const ktx2Loader = new KTX2Loader(); ktx2Loader.setTranscoderPath( - "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/basis/", + "https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/libs/basis/", ); ktx2Loader.detectSupport(renderer); @@ -267,6 +267,22 @@ gltfLoader.load("model-with-ktx2.glb", (gltf) => { }); ``` +### GLTF with Meshopt Compression (r183) + +```javascript +import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; +import { MeshoptDecoder } from "three/addons/libs/meshopt_decoder.module.js"; + +const gltfLoader = new GLTFLoader(); +gltfLoader.setMeshoptDecoder(MeshoptDecoder); + +gltfLoader.load("compressed-model.glb", (gltf) => { + scene.add(gltf.scene); +}); +``` + +**KHR_meshopt_compression** is an alternative to Draco that often provides better compression for animated meshes and preserves mesh topology. + ### Process GLTF Content ```javascript @@ -618,6 +634,10 @@ loadModel("model.glb").then((gltf) => { }); ``` +## VRMLLoader Camera Support (r183) + +As of r183, `VRMLLoader` supports loading cameras defined in VRML files. + ## See Also - `threejs-textures` - Texture configuration diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-materials/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-materials/SKILL.md index 8c570a7a..60dfd02b 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-materials/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-materials/SKILL.md @@ -515,6 +515,28 @@ function getMaterial(color) { material.dispose(); ``` +## NodeMaterial / TSL (Future Direction) + +Three.js is moving toward **NodeMaterial** and **TSL (Three.js Shading Language)** as the standard material system, especially for the WebGPU renderer: + +```javascript +import { MeshStandardNodeMaterial } from "three/addons/nodes/Nodes.js"; +import { color, uv, texture } from "three/addons/nodes/Nodes.js"; + +const material = new MeshStandardNodeMaterial(); +material.colorNode = texture(colorMap, uv()); +``` + +**Key points:** +- NodeMaterial works with both WebGL and WebGPU renderers +- `onBeforeCompile` does **not** work with the WebGPU renderer -- use NodeMaterial instead +- TSL replaces GLSL for cross-renderer shader compatibility +- Standard GLSL `ShaderMaterial` continues to work with the WebGL renderer + +## Lambert/Phong IBL Support (r183) + +As of r183, `MeshLambertMaterial` and `MeshPhongMaterial` support image-based lighting (IBL) via `scene.environment`. Previously, only PBR materials (Standard/Physical) responded to environment maps set on the scene. + ## See Also - `threejs-textures` - Texture loading and configuration diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-postprocessing/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-postprocessing/SKILL.md index db7f681e..7cb7e7c3 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-postprocessing/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-postprocessing/SKILL.md @@ -521,25 +521,46 @@ function animate() { } ``` -## WebGPU Post-Processing (Three.js r150+) +## WebGPU Post-Processing (Three.js r183) + +The WebGPU renderer uses a node-based `PostProcessing` class instead of `EffectComposer`. Note that `EffectComposer` is **WebGL-only**. ```javascript -import { postProcessing } from "three/addons/nodes/Nodes.js"; -import { pass, bloom, dof } from "three/addons/nodes/Nodes.js"; +import * as THREE from "three"; +import { pass, bloom, dof } from "three/tsl"; +import { WebGPURenderer } from "three/addons/renderers/webgpu/WebGPURenderer.js"; -// Using node-based system -const scenePass = pass(scene, camera); -const bloomNode = bloom(scenePass, 0.5, 0.4, 0.85); +const renderer = new WebGPURenderer({ antialias: true }); +await renderer.init(); +// Create post-processing const postProcessing = new THREE.PostProcessing(renderer); -postProcessing.outputNode = bloomNode; + +// Scene pass +const scenePass = pass(scene, camera); + +// Add bloom +const bloomPass = bloom(scenePass, 0.5, 0.4, 0.85); + +// Set output +postProcessing.outputNode = bloomPass; // Render -function animate() { +renderer.setAnimationLoop(() => { postProcessing.render(); -} +}); ``` +### Key Differences from EffectComposer + +| EffectComposer (WebGL) | PostProcessing (WebGPU) | +| ------------------------------- | -------------------------------- | +| `addPass(new RenderPass(...))` | `pass(scene, camera)` | +| `addPass(new UnrealBloomPass)` | `bloom(scenePass, ...)` | +| `composer.render()` | `postProcessing.render()` | +| Chain of passes | Node graph with `outputNode` | +| GLSL shader passes | TSL node-based effects | + ## Performance Tips 1. **Limit passes**: Each pass adds a full-screen render diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-shaders/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-shaders/SKILL.md index 86cd478b..b6166c5b 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-shaders/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-shaders/SKILL.md @@ -637,6 +637,49 @@ if (value > 0.5) { color = mix(colorB, colorA, step(0.5, value)); ``` +## TSL (Three.js Shading Language) - Future Direction + +TSL is the new shader authoring system for Three.js, designed to work with both WebGL and WebGPU renderers. GLSL patterns above are **WebGL-only** and will not work with the WebGPU renderer. + +### TSL Quick Start + +```javascript +import { MeshStandardNodeMaterial } from "three/addons/nodes/Nodes.js"; +import { + uv, sin, timerLocal, vec4, color, positionLocal, normalLocal, + float, mul, add +} from "three/addons/nodes/Nodes.js"; + +const material = new MeshStandardNodeMaterial(); + +// Animated color based on UV and time +const time = timerLocal(); +material.colorNode = color(sin(add(uv().x, time)), uv().y, 0.5); + +// Vertex displacement +material.positionNode = add( + positionLocal, + mul(normalLocal, sin(add(positionLocal.x, time)).mul(0.1)) +); +``` + +### Key Differences from GLSL + +| GLSL (WebGL only) | TSL (WebGL + WebGPU) | +| ----------------------- | ---------------------------- | +| `ShaderMaterial` | `MeshStandardNodeMaterial` | +| String-based shaders | JavaScript node graph | +| `onBeforeCompile` | Node composition | +| Manual uniforms | `uniform()` node | +| `texture2D()` | `texture()` node | +| `gl_Position` | `positionNode` | +| `gl_FragColor` | `colorNode` / `outputNode` | + +### When to Use What + +- **GLSL ShaderMaterial**: Existing WebGL projects, maximum shader control, porting existing shaders +- **TSL NodeMaterial**: New projects, WebGPU support needed, cross-renderer compatibility + ## See Also - `threejs-materials` - Built-in material types diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-skills/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-skills/SKILL.md index 62512648..e4aa320f 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-skills/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-skills/SKILL.md @@ -22,13 +22,29 @@ Systematically create high-quality 3D scenes and interactive experiences using T ### 1. Essential Three.js Imports -Always use the correct CDN version (r128): +Use ES module import maps for modern Three.js (r183+): -```javascript -import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"; +```html + + ``` -**CRITICAL**: Do NOT use example imports like `THREE.OrbitControls` - they won't work on the CDN. +For production with npm/vite/webpack: + +```javascript +import * as THREE from "three"; +import { OrbitControls } from "three/addons/controls/OrbitControls.js"; +``` ### 2. Scene Initialization @@ -55,16 +71,21 @@ document.body.appendChild(renderer.domElement); ### 3. Animation Loop -Use requestAnimationFrame for smooth rendering: +Use `renderer.setAnimationLoop()` (preferred) or `requestAnimationFrame`: ```javascript -function animate() { - requestAnimationFrame(animate); - - // Update object transformations here +// Preferred: setAnimationLoop (handles WebXR compatibility) +renderer.setAnimationLoop(() => { mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; + renderer.render(scene, camera); +}); +// Alternative: manual requestAnimationFrame +function animate() { + requestAnimationFrame(animate); + mesh.rotation.x += 0.01; + mesh.rotation.y += 0.01; renderer.render(scene, camera); } animate(); @@ -93,13 +114,11 @@ Choose appropriate geometry types: - `PlaneGeometry` - flat surfaces, ground planes - `TorusGeometry` - donuts, rings -**IMPORTANT**: Do NOT use `CapsuleGeometry` (introduced in r142, not available in r128) +**CapsuleGeometry** is available (stable since r142): -**Alternatives for capsules:** - -- Combine `CylinderGeometry` + 2 `SphereGeometry` -- Use `SphereGeometry` with adjusted parameters -- Create custom geometry with vertices +```javascript +new THREE.CapsuleGeometry(0.5, 1, 4, 8); // radius, length, capSegments, radialSegments +``` ### 3. Apply Materials @@ -162,9 +181,26 @@ function animate() { } ``` -### Custom Camera Controls (OrbitControls Alternative) +### OrbitControls -Since `THREE.OrbitControls` isn't available on CDN, implement custom controls: +With import maps or build tools, OrbitControls works directly: + +```javascript +import { OrbitControls } from "three/addons/controls/OrbitControls.js"; + +const controls = new OrbitControls(camera, renderer.domElement); +controls.enableDamping = true; + +// Update in animation loop +renderer.setAnimationLoop(() => { + controls.update(); + renderer.render(scene, camera); +}); +``` + +### Custom Camera Controls (Alternative) + +For lightweight custom controls without importing OrbitControls: ```javascript let isDragging = false; @@ -338,18 +374,18 @@ const material = new THREE.MeshStandardMaterial({ ### Common Pitfalls to Avoid -- ❌ Using `THREE.OrbitControls` - not available on CDN -- ❌ Using `THREE.CapsuleGeometry` - requires r142+ +- ❌ Using `outputEncoding` instead of `outputColorSpace` (renamed in r152) - ❌ Forgetting to add objects to scene with `scene.add()` - ❌ Using lit materials without adding lights - ❌ Not handling window resize - ❌ Forgetting to call `renderer.render()` in animation loop +- ❌ Using `THREE.Clock` without considering `THREE.Timer` (recommended in r183) ## Example Workflow User: "Create an interactive 3D sphere that responds to mouse movement" -1. **Setup**: Import Three.js (r128), create scene/camera/renderer +1. **Setup**: Import Three.js, create scene/camera/renderer 2. **Geometry**: Create `SphereGeometry(1, 32, 32)` for smooth sphere 3. **Material**: Use `MeshStandardMaterial` for realistic look 4. **Lighting**: Add ambient + directional lights @@ -449,7 +485,7 @@ const material = new THREE.MeshStandardMaterial({ // Improve color accuracy and HDR rendering renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; -renderer.outputEncoding = THREE.sRGBEncoding; +renderer.outputColorSpace = THREE.SRGBColorSpace; // Was outputEncoding in older versions // Makes colors more vibrant and realistic ``` @@ -474,7 +510,7 @@ geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3)); ### Post-Processing Effects -While advanced post-processing may not be available in r128 CDN, basic effects can be achieved with shaders and render targets. +Post-processing effects are available via import maps or build tools. See `threejs-postprocessing` skill for EffectComposer, bloom, DOF, and more. ### Group Objects @@ -490,36 +526,64 @@ scene.add(group); Three.js artifacts require systematic setup: -1. Import correct CDN version (r128) +1. Import Three.js via import maps or build tools 2. Initialize scene, camera, renderer 3. Create geometry + material = mesh 4. Add lighting if using lit materials -5. Implement animation loop +5. Implement animation loop (prefer `setAnimationLoop`) 6. Handle window resize -7. Avoid r128 incompatible features +7. Set `renderer.outputColorSpace = THREE.SRGBColorSpace` Follow these patterns for reliable, performant 3D experiences. -## Modern Three.js & Production Practices +## Modern Three.js Practices (r183) -While this skill focuses on CDN-based Three.js (r128) for artifact compatibility, here's what you'd do in production environments: - -### Modular Imports with Build Tools +### Modular Imports ```javascript -// In production with npm/vite/webpack: +// With npm/vite/webpack: import * as THREE from "three"; -import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; -import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; -import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer"; +import { OrbitControls } from "three/addons/controls/OrbitControls.js"; +import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; +import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"; ``` -**Benefits:** +### WebGPU Renderer (Alternative) -- Tree-shaking (smaller bundle sizes) -- Access to full example library (OrbitControls, loaders, etc.) -- Latest Three.js features (r150+) -- TypeScript support +Three.js r183 includes a WebGPU renderer as an alternative to WebGL: + +```javascript +import { WebGPURenderer } from "three/addons/renderers/webgpu/WebGPURenderer.js"; + +const renderer = new WebGPURenderer({ antialias: true }); +await renderer.init(); +renderer.setSize(window.innerWidth, window.innerHeight); +``` + +WebGPU uses TSL (Three.js Shading Language) instead of GLSL for custom shaders. See `threejs-shaders` for details. + +### Timer (r183 Recommended) + +`THREE.Timer` is recommended over `THREE.Clock` as of r183: + +```javascript +const timer = new THREE.Timer(); + +renderer.setAnimationLoop(() => { + timer.update(); + const delta = timer.getDelta(); + const elapsed = timer.getElapsed(); + + mesh.rotation.y += delta; + renderer.render(scene, camera); +}); +``` + +**Benefits over Clock:** + +- Not affected by page visibility (pauses when tab is hidden) +- Cleaner API design +- Better integration with `setAnimationLoop` ### Animation Libraries (GSAP Integration) @@ -625,7 +689,7 @@ loader.load("model.gltf", (gltf) => { ### When to Use What -**CDN Approach (Current Skill):** +**Import Map Approach:** - Quick prototypes and demos - Educational content @@ -636,19 +700,16 @@ loader.load("model.gltf", (gltf) => { - Client projects and portfolios - Complex applications -- Need latest features (r150+) - Performance-critical applications - Team collaboration with version control ### Recommended Production Stack ``` -Three.js (latest) + Vite/Webpack +Three.js r183 + Vite β”œβ”€β”€ GSAP (animations) β”œβ”€β”€ React Three Fiber (optional - React integration) β”œβ”€β”€ Drei (helper components) β”œβ”€β”€ Leva (debug GUI) └── Post-processing effects ``` - -This skill provides CDN-compatible foundations. In production, you'd layer on these modern tools for professional results. diff --git a/plugins/antigravity-awesome-skills-claude/skills/threejs-textures/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/threejs-textures/SKILL.md index 5b386e39..4cac7851 100644 --- a/plugins/antigravity-awesome-skills-claude/skills/threejs-textures/SKILL.md +++ b/plugins/antigravity-awesome-skills-claude/skills/threejs-textures/SKILL.md @@ -623,6 +623,14 @@ const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); const textureSize = isMobile ? 1024 : 2048; ``` +## KTX2Loader BC3 Alpha Fix (r183) + +As of r183, `KTX2Loader` correctly handles BC3 compressed textures with alpha channels, fixing previously incorrect alpha rendering. + +## ISO 21496-1 Gainmap Metadata (r183) + +Three.js r183 supports ISO 21496-1 gainmap metadata in HDR textures, enabling proper tone mapping of gainmap-based HDR images (such as those produced by recent smartphone cameras). + ## See Also - `threejs-materials` - Applying textures to materials diff --git a/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json b/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json index 51caa081..e49a69a8 100644 --- a/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json +++ b/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json @@ -19,7 +19,7 @@ "skills": "./skills/", "interface": { "displayName": "Antigravity Awesome Skills", - "shortDescription": "1,300 plugin-safe skills for coding, security, product, and ops workflows.", + "shortDescription": "1,302 plugin-safe skills for coding, security, product, and ops workflows.", "longDescription": "Install a plugin-safe Codex distribution of Antigravity Awesome Skills. Skills that still need hardening or target-specific setup remain available in the repo but are excluded from this plugin.", "developerName": "sickn33 and contributors", "category": "Productivity", diff --git a/plugins/antigravity-awesome-skills/skills/phase-gated-debugging/SKILL.md b/plugins/antigravity-awesome-skills/skills/phase-gated-debugging/SKILL.md new file mode 100644 index 00000000..a5c6f6fb --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/phase-gated-debugging/SKILL.md @@ -0,0 +1,70 @@ +--- +name: phase-gated-debugging +description: "Use when debugging any bug. Enforces a 5-phase protocol where code edits are blocked until root cause is confirmed. Prevents premature fix attempts." +risk: safe +source: community +date_added: "2026-03-28" +--- + +# Phase-Gated Debugging + +## Overview + +AI coding agents see an error and immediately edit code. They guess at fixes, get it wrong, and spiral. This skill enforces a strict 5-phase protocol where you CANNOT edit source code until the root cause is identified and confirmed. + +Based on [claude-debug](https://github.com/krabat-l/claude-debug) (full plugin with PreToolUse hook enforcement). + +## When to Use + +Use this skill when: + +- a bug keeps getting "fixed" without resolving the underlying issue +- you need to slow an agent down and force disciplined debugging before code edits +- the failure is intermittent, a regression, performance-related, or otherwise hard to isolate +- you want an explicit user confirmation checkpoint before any fix is applied + +## The Protocol + +### Phase 1: REPRODUCE +Run the failing command/test. Capture the exact error. Run 2-3 times for consistency. +- Do NOT read source code +- Do NOT hypothesize +- Do NOT edit any files + +### Phase 2: ISOLATE +Read code. Add diagnostic logging marked `// DEBUG`. Re-run with diagnostics. Binary search to narrow down. +- Only `// DEBUG` marked logging is allowed +- Do NOT fix the bug even if you see it + +### Phase 3: ROOT CAUSE +Analyze WHY at the isolated location. Use "5 Whys" technique. Remove debug logging. + +State: "This is my root cause analysis: [explanation]. Do you agree, or should I investigate further?" + +**WAIT for user confirmation. Do NOT proceed without it.** + +### Phase 4: FIX +Remove all `// DEBUG` lines. Apply minimal change addressing confirmed root cause. +- Only edit files related to root cause +- Do NOT refactor unrelated code + +### Phase 5: VERIFY +Run original failing test β€” must pass. Run related tests. For intermittent bugs, run 5+ times. +If verification fails: root cause was wrong, go back to Phase 2. + +## Bug-Type Strategies + +| Type | Technique | +|------|-----------| +| Crash/Panic | Stack trace backward β€” trace the bad value to its source | +| Wrong Output | Binary search β€” log midpoint, halve search space each iteration | +| Intermittent | Compare passing vs failing run logs β€” find ordering divergence | +| Regression | `git bisect` β€” find the offending commit | +| Performance | Timing at stage boundaries β€” find the bottleneck | + +## Key Rules + +1. NEVER edit source code in phases 1-3 (except `// DEBUG` in phase 2) +2. NEVER proceed past phase 3 without user confirmation +3. ALWAYS reproduce before investigating +4. ALWAYS verify after fixing diff --git a/plugins/antigravity-awesome-skills/skills/threejs-animation/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-animation/SKILL.md index 22812157..b61cc800 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-animation/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-animation/SKILL.md @@ -12,22 +12,23 @@ source: community ```javascript import * as THREE from "three"; -// Simple procedural animation -const clock = new THREE.Clock(); +// Simple procedural animation with Timer (recommended in r183) +const timer = new THREE.Timer(); -function animate() { - const delta = clock.getDelta(); - const elapsed = clock.getElapsedTime(); +renderer.setAnimationLoop(() => { + timer.update(); + const delta = timer.getDelta(); + const elapsed = timer.getElapsed(); mesh.rotation.y += delta; mesh.position.y = Math.sin(elapsed) * 0.5; - requestAnimationFrame(animate); renderer.render(scene, camera); -} -animate(); +}); ``` +**Note:** `THREE.Timer` is recommended over `THREE.Clock` as of r183. Timer pauses when the page is hidden and has a cleaner API. `THREE.Clock` still works but is considered legacy. + ## Animation System Overview Three.js animation system has three main components: @@ -118,6 +119,10 @@ track.setInterpolation(THREE.InterpolateSmooth); // Cubic spline track.setInterpolation(THREE.InterpolateDiscrete); // Step function ``` +### BezierInterpolant (r183) + +Three.js r183 adds `THREE.BezierInterpolant` for bezier curve interpolation in keyframe tracks, enabling smoother animation curves with tangent control. + ## AnimationMixer Plays animations on an object and its descendants. diff --git a/plugins/antigravity-awesome-skills/skills/threejs-fundamentals/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-fundamentals/SKILL.md index 62cc4b8b..675238f3 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-fundamentals/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-fundamentals/SKILL.md @@ -416,7 +416,24 @@ function dispose() { } ``` -### Clock for Animation +### Timer and Clock for Animation + +**Timer (recommended in r183)** - pauses when tab is hidden, cleaner API: + +```javascript +const timer = new THREE.Timer(); + +renderer.setAnimationLoop(() => { + timer.update(); + const delta = timer.getDelta(); + const elapsed = timer.getElapsed(); + + mesh.rotation.y += delta * 0.5; + renderer.render(scene, camera); +}); +``` + +**Clock (legacy, still works):** ```javascript const clock = new THREE.Clock(); @@ -432,6 +449,17 @@ function animate() { } ``` +### Animation Loop + +Prefer `renderer.setAnimationLoop()` over manual `requestAnimationFrame`. It handles WebXR compatibility and is the standard Three.js pattern: + +```javascript +renderer.setAnimationLoop(() => { + controls.update(); + renderer.render(scene, camera); +}); +``` + ### Responsive Canvas ```javascript @@ -483,6 +511,21 @@ lod.addLevel(lowDetailMesh, 100); scene.add(lod); ``` +## WebGPU Renderer (r183) + +Three.js includes an experimental WebGPU renderer as an alternative to WebGL: + +```javascript +import { WebGPURenderer } from "three/addons/renderers/webgpu/WebGPURenderer.js"; + +const renderer = new WebGPURenderer({ antialias: true }); +await renderer.init(); +renderer.setSize(window.innerWidth, window.innerHeight); +document.body.appendChild(renderer.domElement); +``` + +WebGPU uses TSL (Three.js Shading Language) instead of GLSL. The WebGL renderer remains the default and is fully supported. + ## See Also - `threejs-geometry` - Geometry creation and manipulation diff --git a/plugins/antigravity-awesome-skills/skills/threejs-geometry/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-geometry/SKILL.md index 00fa68cf..dc33f21b 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-geometry/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-geometry/SKILL.md @@ -543,6 +543,36 @@ new THREE.SphereGeometry(1, 16, 16); // Performance mode geometry.dispose(); ``` +## BatchedMesh (r183) + +`BatchedMesh` is a higher-level alternative to `InstancedMesh` that supports multiple geometries in a single draw call. As of r183, it supports **per-instance opacity** and **per-instance wireframe**. + +```javascript +const batchedMesh = new THREE.BatchedMesh(maxGeometryCount, maxVertexCount, maxIndexCount); +batchedMesh.sortObjects = true; // Enable depth sorting for transparency + +// Add different geometries +const boxId = batchedMesh.addGeometry(new THREE.BoxGeometry(1, 1, 1)); +const sphereId = batchedMesh.addGeometry(new THREE.SphereGeometry(0.5, 16, 16)); + +// Add instances of those geometries +const instance1 = batchedMesh.addInstance(boxId); +const instance2 = batchedMesh.addInstance(sphereId); + +// Set transforms +const matrix = new THREE.Matrix4(); +matrix.setPosition(2, 0, 0); +batchedMesh.setMatrixAt(instance1, matrix); + +// Per-instance opacity (r183) +batchedMesh.setOpacityAt(instance1, 0.5); + +// Per-instance visibility +batchedMesh.setVisibleAt(instance2, false); + +scene.add(batchedMesh); +``` + ## See Also - `threejs-fundamentals` - Scene setup and Object3D diff --git a/plugins/antigravity-awesome-skills/skills/threejs-interaction/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-interaction/SKILL.md index c51b7fbd..fa9e6c14 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-interaction/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-interaction/SKILL.md @@ -189,6 +189,18 @@ function animate() { } ``` +#### OrbitControls Programmatic Methods (r183) + +```javascript +// Programmatic camera movement +controls.dolly(1.5); // Dolly in/out (zoom for perspective cameras) +controls.pan(deltaX, deltaY); // Pan the camera +controls.rotate(deltaAzimuth, deltaPolar); // Rotate around target + +// Cursor style (r183) +controls.cursorStyle = { orbit: "grab", pan: "move", dolly: "zoom-in" }; +``` + ### FlyControls ```javascript diff --git a/plugins/antigravity-awesome-skills/skills/threejs-lighting/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-lighting/SKILL.md index 3469d94d..b9dd9dae 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-lighting/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-lighting/SKILL.md @@ -186,7 +186,7 @@ Rectangular area light. Great for soft, realistic lighting. import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js"; import { RectAreaLightUniformsLib } from "three/examples/jsm/lights/RectAreaLightUniformsLib.js"; -// Must initialize uniforms first +// Must initialize uniforms first (WebGL renderer only) RectAreaLightUniformsLib.init(); // RectAreaLight(color, intensity, width, height) @@ -199,7 +199,8 @@ scene.add(rectLight); const helper = new RectAreaLightHelper(rectLight); rectLight.add(helper); -// Note: Only works with MeshStandardMaterial and MeshPhysicalMaterial +// Works with MeshStandardMaterial, MeshPhysicalMaterial +// r183: Clearcoat on MeshPhysicalMaterial is now properly lit by RectAreaLight // Does not cast shadows natively ``` diff --git a/plugins/antigravity-awesome-skills/skills/threejs-loaders/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-loaders/SKILL.md index fea39f2e..e7e2aa24 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-loaders/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-loaders/SKILL.md @@ -255,7 +255,7 @@ import { KTX2Loader } from "three/addons/loaders/KTX2Loader.js"; const ktx2Loader = new KTX2Loader(); ktx2Loader.setTranscoderPath( - "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/basis/", + "https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/libs/basis/", ); ktx2Loader.detectSupport(renderer); @@ -267,6 +267,22 @@ gltfLoader.load("model-with-ktx2.glb", (gltf) => { }); ``` +### GLTF with Meshopt Compression (r183) + +```javascript +import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; +import { MeshoptDecoder } from "three/addons/libs/meshopt_decoder.module.js"; + +const gltfLoader = new GLTFLoader(); +gltfLoader.setMeshoptDecoder(MeshoptDecoder); + +gltfLoader.load("compressed-model.glb", (gltf) => { + scene.add(gltf.scene); +}); +``` + +**KHR_meshopt_compression** is an alternative to Draco that often provides better compression for animated meshes and preserves mesh topology. + ### Process GLTF Content ```javascript @@ -618,6 +634,10 @@ loadModel("model.glb").then((gltf) => { }); ``` +## VRMLLoader Camera Support (r183) + +As of r183, `VRMLLoader` supports loading cameras defined in VRML files. + ## See Also - `threejs-textures` - Texture configuration diff --git a/plugins/antigravity-awesome-skills/skills/threejs-materials/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-materials/SKILL.md index 8c570a7a..60dfd02b 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-materials/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-materials/SKILL.md @@ -515,6 +515,28 @@ function getMaterial(color) { material.dispose(); ``` +## NodeMaterial / TSL (Future Direction) + +Three.js is moving toward **NodeMaterial** and **TSL (Three.js Shading Language)** as the standard material system, especially for the WebGPU renderer: + +```javascript +import { MeshStandardNodeMaterial } from "three/addons/nodes/Nodes.js"; +import { color, uv, texture } from "three/addons/nodes/Nodes.js"; + +const material = new MeshStandardNodeMaterial(); +material.colorNode = texture(colorMap, uv()); +``` + +**Key points:** +- NodeMaterial works with both WebGL and WebGPU renderers +- `onBeforeCompile` does **not** work with the WebGPU renderer -- use NodeMaterial instead +- TSL replaces GLSL for cross-renderer shader compatibility +- Standard GLSL `ShaderMaterial` continues to work with the WebGL renderer + +## Lambert/Phong IBL Support (r183) + +As of r183, `MeshLambertMaterial` and `MeshPhongMaterial` support image-based lighting (IBL) via `scene.environment`. Previously, only PBR materials (Standard/Physical) responded to environment maps set on the scene. + ## See Also - `threejs-textures` - Texture loading and configuration diff --git a/plugins/antigravity-awesome-skills/skills/threejs-postprocessing/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-postprocessing/SKILL.md index db7f681e..7cb7e7c3 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-postprocessing/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-postprocessing/SKILL.md @@ -521,25 +521,46 @@ function animate() { } ``` -## WebGPU Post-Processing (Three.js r150+) +## WebGPU Post-Processing (Three.js r183) + +The WebGPU renderer uses a node-based `PostProcessing` class instead of `EffectComposer`. Note that `EffectComposer` is **WebGL-only**. ```javascript -import { postProcessing } from "three/addons/nodes/Nodes.js"; -import { pass, bloom, dof } from "three/addons/nodes/Nodes.js"; +import * as THREE from "three"; +import { pass, bloom, dof } from "three/tsl"; +import { WebGPURenderer } from "three/addons/renderers/webgpu/WebGPURenderer.js"; -// Using node-based system -const scenePass = pass(scene, camera); -const bloomNode = bloom(scenePass, 0.5, 0.4, 0.85); +const renderer = new WebGPURenderer({ antialias: true }); +await renderer.init(); +// Create post-processing const postProcessing = new THREE.PostProcessing(renderer); -postProcessing.outputNode = bloomNode; + +// Scene pass +const scenePass = pass(scene, camera); + +// Add bloom +const bloomPass = bloom(scenePass, 0.5, 0.4, 0.85); + +// Set output +postProcessing.outputNode = bloomPass; // Render -function animate() { +renderer.setAnimationLoop(() => { postProcessing.render(); -} +}); ``` +### Key Differences from EffectComposer + +| EffectComposer (WebGL) | PostProcessing (WebGPU) | +| ------------------------------- | -------------------------------- | +| `addPass(new RenderPass(...))` | `pass(scene, camera)` | +| `addPass(new UnrealBloomPass)` | `bloom(scenePass, ...)` | +| `composer.render()` | `postProcessing.render()` | +| Chain of passes | Node graph with `outputNode` | +| GLSL shader passes | TSL node-based effects | + ## Performance Tips 1. **Limit passes**: Each pass adds a full-screen render diff --git a/plugins/antigravity-awesome-skills/skills/threejs-shaders/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-shaders/SKILL.md index 86cd478b..b6166c5b 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-shaders/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-shaders/SKILL.md @@ -637,6 +637,49 @@ if (value > 0.5) { color = mix(colorB, colorA, step(0.5, value)); ``` +## TSL (Three.js Shading Language) - Future Direction + +TSL is the new shader authoring system for Three.js, designed to work with both WebGL and WebGPU renderers. GLSL patterns above are **WebGL-only** and will not work with the WebGPU renderer. + +### TSL Quick Start + +```javascript +import { MeshStandardNodeMaterial } from "three/addons/nodes/Nodes.js"; +import { + uv, sin, timerLocal, vec4, color, positionLocal, normalLocal, + float, mul, add +} from "three/addons/nodes/Nodes.js"; + +const material = new MeshStandardNodeMaterial(); + +// Animated color based on UV and time +const time = timerLocal(); +material.colorNode = color(sin(add(uv().x, time)), uv().y, 0.5); + +// Vertex displacement +material.positionNode = add( + positionLocal, + mul(normalLocal, sin(add(positionLocal.x, time)).mul(0.1)) +); +``` + +### Key Differences from GLSL + +| GLSL (WebGL only) | TSL (WebGL + WebGPU) | +| ----------------------- | ---------------------------- | +| `ShaderMaterial` | `MeshStandardNodeMaterial` | +| String-based shaders | JavaScript node graph | +| `onBeforeCompile` | Node composition | +| Manual uniforms | `uniform()` node | +| `texture2D()` | `texture()` node | +| `gl_Position` | `positionNode` | +| `gl_FragColor` | `colorNode` / `outputNode` | + +### When to Use What + +- **GLSL ShaderMaterial**: Existing WebGL projects, maximum shader control, porting existing shaders +- **TSL NodeMaterial**: New projects, WebGPU support needed, cross-renderer compatibility + ## See Also - `threejs-materials` - Built-in material types diff --git a/plugins/antigravity-awesome-skills/skills/threejs-skills/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-skills/SKILL.md index 62512648..e4aa320f 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-skills/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-skills/SKILL.md @@ -22,13 +22,29 @@ Systematically create high-quality 3D scenes and interactive experiences using T ### 1. Essential Three.js Imports -Always use the correct CDN version (r128): +Use ES module import maps for modern Three.js (r183+): -```javascript -import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"; +```html + + ``` -**CRITICAL**: Do NOT use example imports like `THREE.OrbitControls` - they won't work on the CDN. +For production with npm/vite/webpack: + +```javascript +import * as THREE from "three"; +import { OrbitControls } from "three/addons/controls/OrbitControls.js"; +``` ### 2. Scene Initialization @@ -55,16 +71,21 @@ document.body.appendChild(renderer.domElement); ### 3. Animation Loop -Use requestAnimationFrame for smooth rendering: +Use `renderer.setAnimationLoop()` (preferred) or `requestAnimationFrame`: ```javascript -function animate() { - requestAnimationFrame(animate); - - // Update object transformations here +// Preferred: setAnimationLoop (handles WebXR compatibility) +renderer.setAnimationLoop(() => { mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; + renderer.render(scene, camera); +}); +// Alternative: manual requestAnimationFrame +function animate() { + requestAnimationFrame(animate); + mesh.rotation.x += 0.01; + mesh.rotation.y += 0.01; renderer.render(scene, camera); } animate(); @@ -93,13 +114,11 @@ Choose appropriate geometry types: - `PlaneGeometry` - flat surfaces, ground planes - `TorusGeometry` - donuts, rings -**IMPORTANT**: Do NOT use `CapsuleGeometry` (introduced in r142, not available in r128) +**CapsuleGeometry** is available (stable since r142): -**Alternatives for capsules:** - -- Combine `CylinderGeometry` + 2 `SphereGeometry` -- Use `SphereGeometry` with adjusted parameters -- Create custom geometry with vertices +```javascript +new THREE.CapsuleGeometry(0.5, 1, 4, 8); // radius, length, capSegments, radialSegments +``` ### 3. Apply Materials @@ -162,9 +181,26 @@ function animate() { } ``` -### Custom Camera Controls (OrbitControls Alternative) +### OrbitControls -Since `THREE.OrbitControls` isn't available on CDN, implement custom controls: +With import maps or build tools, OrbitControls works directly: + +```javascript +import { OrbitControls } from "three/addons/controls/OrbitControls.js"; + +const controls = new OrbitControls(camera, renderer.domElement); +controls.enableDamping = true; + +// Update in animation loop +renderer.setAnimationLoop(() => { + controls.update(); + renderer.render(scene, camera); +}); +``` + +### Custom Camera Controls (Alternative) + +For lightweight custom controls without importing OrbitControls: ```javascript let isDragging = false; @@ -338,18 +374,18 @@ const material = new THREE.MeshStandardMaterial({ ### Common Pitfalls to Avoid -- ❌ Using `THREE.OrbitControls` - not available on CDN -- ❌ Using `THREE.CapsuleGeometry` - requires r142+ +- ❌ Using `outputEncoding` instead of `outputColorSpace` (renamed in r152) - ❌ Forgetting to add objects to scene with `scene.add()` - ❌ Using lit materials without adding lights - ❌ Not handling window resize - ❌ Forgetting to call `renderer.render()` in animation loop +- ❌ Using `THREE.Clock` without considering `THREE.Timer` (recommended in r183) ## Example Workflow User: "Create an interactive 3D sphere that responds to mouse movement" -1. **Setup**: Import Three.js (r128), create scene/camera/renderer +1. **Setup**: Import Three.js, create scene/camera/renderer 2. **Geometry**: Create `SphereGeometry(1, 32, 32)` for smooth sphere 3. **Material**: Use `MeshStandardMaterial` for realistic look 4. **Lighting**: Add ambient + directional lights @@ -449,7 +485,7 @@ const material = new THREE.MeshStandardMaterial({ // Improve color accuracy and HDR rendering renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; -renderer.outputEncoding = THREE.sRGBEncoding; +renderer.outputColorSpace = THREE.SRGBColorSpace; // Was outputEncoding in older versions // Makes colors more vibrant and realistic ``` @@ -474,7 +510,7 @@ geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3)); ### Post-Processing Effects -While advanced post-processing may not be available in r128 CDN, basic effects can be achieved with shaders and render targets. +Post-processing effects are available via import maps or build tools. See `threejs-postprocessing` skill for EffectComposer, bloom, DOF, and more. ### Group Objects @@ -490,36 +526,64 @@ scene.add(group); Three.js artifacts require systematic setup: -1. Import correct CDN version (r128) +1. Import Three.js via import maps or build tools 2. Initialize scene, camera, renderer 3. Create geometry + material = mesh 4. Add lighting if using lit materials -5. Implement animation loop +5. Implement animation loop (prefer `setAnimationLoop`) 6. Handle window resize -7. Avoid r128 incompatible features +7. Set `renderer.outputColorSpace = THREE.SRGBColorSpace` Follow these patterns for reliable, performant 3D experiences. -## Modern Three.js & Production Practices +## Modern Three.js Practices (r183) -While this skill focuses on CDN-based Three.js (r128) for artifact compatibility, here's what you'd do in production environments: - -### Modular Imports with Build Tools +### Modular Imports ```javascript -// In production with npm/vite/webpack: +// With npm/vite/webpack: import * as THREE from "three"; -import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; -import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; -import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer"; +import { OrbitControls } from "three/addons/controls/OrbitControls.js"; +import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; +import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"; ``` -**Benefits:** +### WebGPU Renderer (Alternative) -- Tree-shaking (smaller bundle sizes) -- Access to full example library (OrbitControls, loaders, etc.) -- Latest Three.js features (r150+) -- TypeScript support +Three.js r183 includes a WebGPU renderer as an alternative to WebGL: + +```javascript +import { WebGPURenderer } from "three/addons/renderers/webgpu/WebGPURenderer.js"; + +const renderer = new WebGPURenderer({ antialias: true }); +await renderer.init(); +renderer.setSize(window.innerWidth, window.innerHeight); +``` + +WebGPU uses TSL (Three.js Shading Language) instead of GLSL for custom shaders. See `threejs-shaders` for details. + +### Timer (r183 Recommended) + +`THREE.Timer` is recommended over `THREE.Clock` as of r183: + +```javascript +const timer = new THREE.Timer(); + +renderer.setAnimationLoop(() => { + timer.update(); + const delta = timer.getDelta(); + const elapsed = timer.getElapsed(); + + mesh.rotation.y += delta; + renderer.render(scene, camera); +}); +``` + +**Benefits over Clock:** + +- Not affected by page visibility (pauses when tab is hidden) +- Cleaner API design +- Better integration with `setAnimationLoop` ### Animation Libraries (GSAP Integration) @@ -625,7 +689,7 @@ loader.load("model.gltf", (gltf) => { ### When to Use What -**CDN Approach (Current Skill):** +**Import Map Approach:** - Quick prototypes and demos - Educational content @@ -636,19 +700,16 @@ loader.load("model.gltf", (gltf) => { - Client projects and portfolios - Complex applications -- Need latest features (r150+) - Performance-critical applications - Team collaboration with version control ### Recommended Production Stack ``` -Three.js (latest) + Vite/Webpack +Three.js r183 + Vite β”œβ”€β”€ GSAP (animations) β”œβ”€β”€ React Three Fiber (optional - React integration) β”œβ”€β”€ Drei (helper components) β”œβ”€β”€ Leva (debug GUI) └── Post-processing effects ``` - -This skill provides CDN-compatible foundations. In production, you'd layer on these modern tools for professional results. diff --git a/plugins/antigravity-awesome-skills/skills/threejs-textures/SKILL.md b/plugins/antigravity-awesome-skills/skills/threejs-textures/SKILL.md index 5b386e39..4cac7851 100644 --- a/plugins/antigravity-awesome-skills/skills/threejs-textures/SKILL.md +++ b/plugins/antigravity-awesome-skills/skills/threejs-textures/SKILL.md @@ -623,6 +623,14 @@ const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); const textureSize = isMobile ? 1024 : 2048; ``` +## KTX2Loader BC3 Alpha Fix (r183) + +As of r183, `KTX2Loader` correctly handles BC3 compressed textures with alpha channels, fixing previously incorrect alpha rendering. + +## ISO 21496-1 Gainmap Metadata (r183) + +Three.js r183 supports ISO 21496-1 gainmap metadata in HDR textures, enabling proper tone mapping of gainmap-based HDR images (such as those produced by recent smartphone cameras). + ## See Also - `threejs-materials` - Applying textures to materials diff --git a/skills_index.json b/skills_index.json index 16de9bea..e6a55adf 100644 --- a/skills_index.json +++ b/skills_index.json @@ -20348,6 +20348,28 @@ "reasons": [] } }, + { + "id": "phase-gated-debugging", + "path": "skills/phase-gated-debugging", + "category": "uncategorized", + "name": "phase-gated-debugging", + "description": "Use when debugging any bug. Enforces a 5-phase protocol where code edits are blocked until root cause is confirmed. Prevents premature fix attempts.", + "risk": "safe", + "source": "community", + "date_added": "2026-03-28", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "php-pro", "path": "skills/php-pro", @@ -22551,6 +22573,28 @@ "reasons": [] } }, + { + "id": "saas-multi-tenant", + "path": "skills/saas-multi-tenant", + "category": "database", + "name": "saas-multi-tenant", + "description": "Design and implement multi-tenant SaaS architectures with row-level security, tenant-scoped queries, shared-schema isolation, and safe cross-tenant admin patterns in PostgreSQL and TypeScript.", + "risk": "safe", + "source": "community", + "date_added": "2026-03-28", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "saas-mvp-launcher", "path": "skills/saas-mvp-launcher",