claude-skill-lord 1.5.0

package/skills/tier-3/threejs/references/16-webgpu.md

@@ -0,0 +1,302 @@
+# WebGPU Rendering
+
+Modern GPU API for next-generation graphics.
+
+## WebGPU Renderer
+
+Next-generation rendering backend:
+
+```javascript
+import WebGPU from 'three/addons/capabilities/WebGPU.js';
+import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+
+// Check support
+if (WebGPU.isAvailable()) {
+  const renderer = new WebGPURenderer();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  document.body.appendChild(renderer.domElement);
+
+  // Use setAnimationLoop (not requestAnimationFrame)
+  renderer.setAnimationLoop(() => {
+    renderer.render(scene, camera);
+  });
+} else {
+  const warning = WebGPU.getErrorMessage();
+  document.body.appendChild(warning);
+}
+```
+
+## Benefits of WebGPU
+
+- Better performance (lower CPU overhead)
+- Compute shaders
+- Modern GPU features
+- Unified shading language (WGSL)
+- Better multi-threading support
+- More predictable behavior
+
+## Compute Shaders
+
+GPU-accelerated computation:
+
+```javascript
+import { storageBuffer, uniform, Fn } from 'three/nodes';
+import { StorageBufferAttribute } from 'three/addons/renderers/common/StorageBufferAttribute.js';
+
+// Create storage buffer
+const particleCount = 10000;
+const positionBuffer = new StorageBufferAttribute(particleCount * 3, 3);
+
+// Fill initial positions
+for (let i = 0; i < particleCount; i++) {
+  positionBuffer.setXYZ(
+    i,
+    Math.random() * 10 - 5,
+    Math.random() * 10 - 5,
+    Math.random() * 10 - 5
+  );
+}
+
+// Create compute shader
+const computeParticles = Fn(() => {
+  const position = storageBuffer(positionBuffer);
+  const time = uniform('time', 0);
+  const index = instanceIndex;
+
+  // Update position
+  const pos = position.element(index);
+  pos.y.addAssign(sin(time.add(index)).mul(0.01));
+
+  // Wrap around
+  If(pos.y.greaterThan(5), () => {
+    pos.y.assign(-5);
+  });
+})();
+
+// Create compute node
+const computeNode = computeParticles.compute(particleCount);
+
+// Execute in render loop
+renderer.setAnimationLoop(() => {
+  renderer.compute(computeNode);
+  renderer.render(scene, camera);
+});
+```
+
+## Storage Buffers
+
+GPU-accessible memory:
+
+```javascript
+import { storage, Fn, vec3, float } from 'three/nodes';
+
+// Define storage buffer structure
+const particleData = storage(
+  new THREE.StorageBufferAttribute(count * 7, 7), // 7 floats per particle
+  'vec3', // position
+  'vec3', // velocity
+  'float' // life
+);
+
+// Access in compute shader
+const updateParticle = Fn(() => {
+  const data = particleData.element(instanceIndex);
+  const position = data.xyz;
+  const velocity = data.toVec3(3); // offset 3
+  const life = data.element(6);
+
+  // Update
+  position.addAssign(velocity.mul(deltaTime));
+  life.subAssign(deltaTime);
+})();
+```
+
+## WebGPU Node Materials
+
+Use TSL (Three Shading Language) with WebGPU:
+
+```javascript
+import { MeshStandardNodeMaterial, texture, normalMap } from 'three/nodes';
+
+const material = new MeshStandardNodeMaterial();
+
+// Node-based material definition
+material.colorNode = texture(diffuseTexture);
+material.normalNode = normalMap(normalTexture);
+material.roughnessNode = float(0.5);
+material.metalnessNode = float(0.8);
+
+// Works with both WebGL and WebGPU automatically
+```
+
+## Indirect Drawing
+
+Efficient rendering with compute-generated draw calls:
+
+```javascript
+import { IndirectStorageBufferAttribute } from 'three/addons/renderers/common/IndirectStorageBufferAttribute.js';
+
+// Create indirect buffer
+const indirectBuffer = new IndirectStorageBufferAttribute(count, 5);
+// 5 elements: count, instanceCount, first, baseInstance, (padding)
+
+// Update with compute shader
+const updateIndirect = Fn(() => {
+  const indirect = storage(indirectBuffer);
+  // Compute visibility and update instance count
+  const visible = computeVisibility();
+  If(visible, () => {
+    indirect.element(1).addAssign(1); // increment instanceCount
+  });
+})();
+
+// Render using indirect buffer
+renderer.drawIndirect(mesh, indirectBuffer);
+```
+
+## Multi-Render-Target (MRT)
+
+Render to multiple textures simultaneously:
+
+```javascript
+import { WebGPURenderTarget } from 'three/addons/renderers/webgpu/WebGPURenderTarget.js';
+
+const renderTarget = new WebGPURenderTarget(width, height, {
+  count: 3, // number of render targets
+  format: THREE.RGBAFormat
+});
+
+// Access individual textures
+const albedoTexture = renderTarget.textures[0];
+const normalTexture = renderTarget.textures[1];
+const depthTexture = renderTarget.textures[2];
+
+// Use in deferred rendering pipeline
+renderer.setRenderTarget(renderTarget);
+renderer.render(scene, camera);
+```
+
+## Async Shader Compilation
+
+Avoid frame drops:
+
+```javascript
+// Compile materials ahead of time
+await renderer.compileAsync(scene, camera);
+
+// Start rendering after compilation
+renderer.setAnimationLoop(() => {
+  renderer.render(scene, camera);
+});
+```
+
+## Performance Monitoring
+
+GPU timestamp queries:
+
+```javascript
+// Query GPU timing
+const timestampQuery = renderer.getTimestampQuery();
+
+timestampQuery.begin();
+renderer.render(scene, camera);
+timestampQuery.end();
+
+timestampQuery.getResult().then((duration) => {
+  console.log(`GPU time: ${duration}ms`);
+});
+```
+
+## WebGPU-Specific Features
+
+### Texture Compression
+
+```javascript
+// BC7 compression (higher quality)
+const texture = new THREE.CompressedTexture(
+  mipmaps,
+  width,
+  height,
+  THREE.RGBA_BPTC_Format
+);
+```
+
+### Depth Textures
+
+```javascript
+const depthTexture = new THREE.DepthTexture(width, height);
+depthTexture.type = THREE.FloatType; // 32-bit depth
+depthTexture.format = THREE.DepthFormat;
+```
+
+### Storage Textures
+
+```javascript
+import { storageTexture } from 'three/nodes';
+
+// Read-write texture in compute shader
+const writeableTexture = storageTexture(texture);
+
+const computeShader = Fn(() => {
+  const coord = vec2(instanceIndex % width, instanceIndex / width);
+  const color = vec4(1, 0, 0, 1);
+  writeableTexture.store(coord, color);
+})();
+```
+
+## Migration from WebGL
+
+Most Three.js code works with both:
+
+```javascript
+// WebGL
+const renderer = new THREE.WebGLRenderer();
+
+// WebGPU (drop-in replacement for most cases)
+const renderer = new WebGPURenderer();
+
+// Exceptions:
+// - Custom shaders: need to use Node materials or WGSL
+// - Some extensions not available
+// - Compute shaders only in WebGPU
+```
+
+## WGSL (WebGPU Shading Language)
+
+Native shader language for WebGPU:
+
+```wgsl
+@group(0) @binding(0) var<storage, read_write> positions: array<vec3f>;
+@group(0) @binding(1) var<uniform> time: f32;
+
+@compute @workgroup_size(64)
+fn main(@builtin(global_invocation_id) global_id: vec3u) {
+  let index = global_id.x;
+  if (index >= arrayLength(&positions)) {
+    return;
+  }
+
+  var pos = positions[index];
+  pos.y += sin(time + f32(index)) * 0.01;
+  positions[index] = pos;
+}
+```
+
+## Browser Support
+
+As of 2025:
+- ✅ Chrome 113+
+- ✅ Edge 113+
+- ✅ Safari 18+ (macOS/iOS)
+- ❌ Firefox (in development)
+
+Check support: `WebGPU.isAvailable()`
+
+## Best Practices
+
+- Use compute shaders for particle systems, physics
+- Leverage storage buffers for large datasets
+- Async compile before rendering
+- Use Node materials instead of custom GLSL
+- Test on both WebGL and WebGPU
+- Provide WebGL fallback for unsupported browsers

package/skills/tier-3/vercel-deploy/SKILL.md

@@ -0,0 +1,112 @@
+---
+name: vercel-deploy
+description: Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.
+metadata:
+  author: vercel
+  version: "1.0.0"
+---
+
+# Vercel Deploy
+
+Deploy any project to Vercel instantly. No authentication required.
+
+## How It Works
+
+1. Packages your project into a tarball (excludes `node_modules` and `.git`)
+2. Auto-detects framework from `package.json`
+3. Uploads to deployment service
+4. Returns **Preview URL** (live site) and **Claim URL** (transfer to your Vercel account)
+
+## Usage
+
+```bash
+bash .claude/skills/vercel-deploy/scripts/deploy.sh [path]
+```
+
+**Arguments:**
+- `path` - Directory to deploy, or a `.tgz` file (defaults to current directory)
+
+**Examples:**
+
+```bash
+# Deploy current directory
+bash .claude/skills/vercel-deploy/scripts/deploy.sh
+
+# Deploy specific project
+bash .claude/skills/vercel-deploy/scripts/deploy.sh /path/to/project
+
+# Deploy existing tarball
+bash .claude/skills/vercel-deploy/scripts/deploy.sh /path/to/project.tgz
+```
+
+## Output
+
+```
+Preparing deployment...
+Detected framework: nextjs
+Creating deployment package...
+Deploying...
+✓ Deployment successful!
+
+Preview URL: https://skill-deploy-abc123.vercel.app
+Claim URL:   https://vercel.com/claim-deployment?code=...
+```
+
+The script also outputs JSON to stdout for programmatic use:
+
+```json
+{
+  "previewUrl": "https://skill-deploy-abc123.vercel.app",
+  "claimUrl": "https://vercel.com/claim-deployment?code=...",
+  "deploymentId": "dpl_...",
+  "projectId": "prj_..."
+}
+```
+
+## Framework Detection
+
+The script auto-detects frameworks from `package.json`. Supported frameworks include:
+
+- **React**: Next.js, Gatsby, Create React App, Remix, React Router
+- **Vue**: Nuxt, Vitepress, Vuepress, Gridsome
+- **Svelte**: SvelteKit, Svelte, Sapper
+- **Other Frontend**: Astro, Solid Start, Angular, Ember, Preact, Docusaurus
+- **Backend**: Express, Hono, Fastify, NestJS, Elysia, h3, Nitro
+- **Build Tools**: Vite, Parcel
+- **And more**: Blitz, Hydrogen, RedwoodJS, Storybook, Sanity, etc.
+
+For static HTML projects (no `package.json`), framework is set to `null`.
+
+## Static HTML Projects
+
+For projects without a `package.json`:
+- If there's a single `.html` file not named `index.html`, it gets renamed automatically
+- This ensures the page is served at the root URL (`/`)
+
+## Present Results to User
+
+Always show both URLs:
+
+```
+✓ Deployment successful!
+
+Preview URL: https://skill-deploy-abc123.vercel.app
+Claim URL:   https://vercel.com/claim-deployment?code=...
+
+View your site at the Preview URL.
+To transfer this deployment to your Vercel account, visit the Claim URL.
+```
+
+## Troubleshooting
+
+### Network Egress Error
+
+If deployment fails due to network restrictions (common on claude.ai), tell the user:
+
+```
+Deployment failed due to network restrictions. To fix this:
+
+1. Go to https://claude.ai/settings/capabilities
+2. Add *.vercel.com to the allowed domains
+3. Try deploying again
+```

package/skills/tier-3/vercel-deploy/scripts/deploy.sh

@@ -0,0 +1,249 @@
+#!/bin/bash
+
+# Vercel Deployment Script (via claimable deploy endpoint)
+# Usage: ./deploy.sh [project-path]
+# Returns: JSON with previewUrl, claimUrl, deploymentId, projectId
+
+set -e
+
+DEPLOY_ENDPOINT="https://claude-skills-deploy.vercel.com/api/deploy"
+
+# Detect framework from package.json
+detect_framework() {
+    local pkg_json="$1"
+
+    if [ ! -f "$pkg_json" ]; then
+        echo "null"
+        return
+    fi
+
+    local content=$(cat "$pkg_json")
+
+    # Helper to check if a package exists in dependencies or devDependencies
+    has_dep() {
+        echo "$content" | grep -q "\"$1\""
+    }
+
+    # Order matters - check more specific frameworks first
+
+    # Blitz
+    if has_dep "blitz"; then echo "blitzjs"; return; fi
+
+    # Next.js
+    if has_dep "next"; then echo "nextjs"; return; fi
+
+    # Gatsby
+    if has_dep "gatsby"; then echo "gatsby"; return; fi
+
+    # Remix
+    if has_dep "@remix-run/"; then echo "remix"; return; fi
+
+    # React Router (v7 framework mode)
+    if has_dep "@react-router/"; then echo "react-router"; return; fi
+
+    # TanStack Start
+    if has_dep "@tanstack/start"; then echo "tanstack-start"; return; fi
+
+    # Astro
+    if has_dep "astro"; then echo "astro"; return; fi
+
+    # Hydrogen (Shopify)
+    if has_dep "@shopify/hydrogen"; then echo "hydrogen"; return; fi
+
+    # SvelteKit
+    if has_dep "@sveltejs/kit"; then echo "sveltekit-1"; return; fi
+
+    # Svelte (standalone)
+    if has_dep "svelte"; then echo "svelte"; return; fi
+
+    # Nuxt
+    if has_dep "nuxt"; then echo "nuxtjs"; return; fi
+
+    # Vue with Vitepress
+    if has_dep "vitepress"; then echo "vitepress"; return; fi
+
+    # Vue with Vuepress
+    if has_dep "vuepress"; then echo "vuepress"; return; fi
+
+    # Gridsome
+    if has_dep "gridsome"; then echo "gridsome"; return; fi
+
+    # SolidStart
+    if has_dep "@solidjs/start"; then echo "solidstart-1"; return; fi
+
+    # Docusaurus
+    if has_dep "@docusaurus/core"; then echo "docusaurus-2"; return; fi
+
+    # RedwoodJS
+    if has_dep "@redwoodjs/"; then echo "redwoodjs"; return; fi
+
+    # Hexo
+    if has_dep "hexo"; then echo "hexo"; return; fi
+
+    # Eleventy
+    if has_dep "@11ty/eleventy"; then echo "eleventy"; return; fi
+
+    # Angular / Ionic Angular
+    if has_dep "@ionic/angular"; then echo "ionic-angular"; return; fi
+    if has_dep "@angular/core"; then echo "angular"; return; fi
+
+    # Ionic React
+    if has_dep "@ionic/react"; then echo "ionic-react"; return; fi
+
+    # Create React App
+    if has_dep "react-scripts"; then echo "create-react-app"; return; fi
+
+    # Ember
+    if has_dep "ember-cli" || has_dep "ember-source"; then echo "ember"; return; fi
+
+    # Dojo
+    if has_dep "@dojo/framework"; then echo "dojo"; return; fi
+
+    # Polymer
+    if has_dep "@polymer/"; then echo "polymer"; return; fi
+
+    # Preact
+    if has_dep "preact"; then echo "preact"; return; fi
+
+    # Stencil
+    if has_dep "@stencil/core"; then echo "stencil"; return; fi
+
+    # UmiJS
+    if has_dep "umi"; then echo "umijs"; return; fi
+
+    # Sapper (legacy Svelte)
+    if has_dep "sapper"; then echo "sapper"; return; fi
+
+    # Saber
+    if has_dep "saber"; then echo "saber"; return; fi
+
+    # Sanity
+    if has_dep "sanity"; then echo "sanity-v3"; return; fi
+    if has_dep "@sanity/"; then echo "sanity"; return; fi
+
+    # Storybook
+    if has_dep "@storybook/"; then echo "storybook"; return; fi
+
+    # NestJS
+    if has_dep "@nestjs/core"; then echo "nestjs"; return; fi
+
+    # Elysia
+    if has_dep "elysia"; then echo "elysia"; return; fi
+
+    # Hono
+    if has_dep "hono"; then echo "hono"; return; fi
+
+    # Fastify
+    if has_dep "fastify"; then echo "fastify"; return; fi
+
+    # h3
+    if has_dep "h3"; then echo "h3"; return; fi
+
+    # Nitro
+    if has_dep "nitropack"; then echo "nitro"; return; fi
+
+    # Express
+    if has_dep "express"; then echo "express"; return; fi
+
+    # Vite (generic - check last among JS frameworks)
+    if has_dep "vite"; then echo "vite"; return; fi
+
+    # Parcel
+    if has_dep "parcel"; then echo "parcel"; return; fi
+
+    # No framework detected
+    echo "null"
+}
+
+# Parse arguments
+INPUT_PATH="${1:-.}"
+
+# Create temp directory for packaging
+TEMP_DIR=$(mktemp -d)
+TARBALL="$TEMP_DIR/project.tgz"
+CLEANUP_TEMP=true
+
+cleanup() {
+    if [ "$CLEANUP_TEMP" = true ]; then
+        rm -rf "$TEMP_DIR"
+    fi
+}
+trap cleanup EXIT
+
+echo "Preparing deployment..." >&2
+
+# Check if input is a .tgz file or a directory
+FRAMEWORK="null"
+
+if [ -f "$INPUT_PATH" ] && [[ "$INPUT_PATH" == *.tgz ]]; then
+    # Input is already a tarball, use it directly
+    echo "Using provided tarball..." >&2
+    TARBALL="$INPUT_PATH"
+    CLEANUP_TEMP=false
+    # Can't detect framework from tarball, leave as null
+elif [ -d "$INPUT_PATH" ]; then
+    # Input is a directory, need to tar it
+    PROJECT_PATH=$(cd "$INPUT_PATH" && pwd)
+
+    # Detect framework from package.json
+    FRAMEWORK=$(detect_framework "$PROJECT_PATH/package.json")
+
+    # Check if this is a static HTML project (no package.json)
+    if [ ! -f "$PROJECT_PATH/package.json" ]; then
+        # Find HTML files in root
+        HTML_FILES=$(find "$PROJECT_PATH" -maxdepth 1 -name "*.html" -type f)
+        HTML_COUNT=$(echo "$HTML_FILES" | grep -c . || echo 0)
+
+        # If there's exactly one HTML file and it's not index.html, rename it
+        if [ "$HTML_COUNT" -eq 1 ]; then
+            HTML_FILE=$(echo "$HTML_FILES" | head -1)
+            BASENAME=$(basename "$HTML_FILE")
+            if [ "$BASENAME" != "index.html" ]; then
+                echo "Renaming $BASENAME to index.html..." >&2
+                mv "$HTML_FILE" "$PROJECT_PATH/index.html"
+            fi
+        fi
+    fi
+
+    # Create tarball of the project (excluding node_modules and .git)
+    echo "Creating deployment package..." >&2
+    tar -czf "$TARBALL" -C "$PROJECT_PATH" --exclude='node_modules' --exclude='.git' .
+else
+    echo "Error: Input must be a directory or a .tgz file" >&2
+    exit 1
+fi
+
+if [ "$FRAMEWORK" != "null" ]; then
+    echo "Detected framework: $FRAMEWORK" >&2
+fi
+
+# Deploy
+echo "Deploying..." >&2
+RESPONSE=$(curl -s -X POST "$DEPLOY_ENDPOINT" -F "file=@$TARBALL" -F "framework=$FRAMEWORK")
+
+# Check for error in response
+if echo "$RESPONSE" | grep -q '"error"'; then
+    ERROR_MSG=$(echo "$RESPONSE" | grep -o '"error":"[^"]*"' | cut -d'"' -f4)
+    echo "Error: $ERROR_MSG" >&2
+    exit 1
+fi
+
+# Extract URLs from response
+PREVIEW_URL=$(echo "$RESPONSE" | grep -o '"previewUrl":"[^"]*"' | cut -d'"' -f4)
+CLAIM_URL=$(echo "$RESPONSE" | grep -o '"claimUrl":"[^"]*"' | cut -d'"' -f4)
+
+if [ -z "$PREVIEW_URL" ]; then
+    echo "Error: Could not extract preview URL from response" >&2
+    echo "$RESPONSE" >&2
+    exit 1
+fi
+
+echo "" >&2
+echo "Deployment successful!" >&2
+echo "" >&2
+echo "Preview URL: $PREVIEW_URL" >&2
+echo "Claim URL:   $CLAIM_URL" >&2
+echo "" >&2
+
+# Output JSON for programmatic use
+echo "$RESPONSE"

package/workflows/development-rules.md

@@ -0,0 +1,49 @@
+# Development Rules
+
+**IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process.
+**IMPORTANT:** You ALWAYS follow these principles: **YANGI (You Aren't Gonna Need It) - KISS (Keep It Simple, Stupid) - DRY (Don't Repeat Yourself)**
+
+## General
+- **File Naming**: Use kebab-case for file names with a meaningful name that describes the purpose of the file, doesn't matter if the file name is long, just make sure when LLMs read the file names while using Grep or other tools, they can understand the purpose of the file right away without reading the file content.
+- **File Size Management**: Keep individual code files under 200 lines for optimal context management
+  - Split large files into smaller, focused components/modules
+  - Use composition over inheritance for complex widgets
+  - Extract utility functions into separate modules
+  - Create dedicated service classes for business logic
+- Use `docs-seeker` skill for exploring latest docs of plugins/packages if needed
+- Use `gh` bash command to interact with Github features if needed
+- Use `psql` bash command to query Postgres database for debugging if needed
+- Use `ai-multimodal` skill for describing details of images, videos, documents, etc. if needed
+- Use `ai-multimodal` skill and `imagemagick` skill for generating and editing images, videos, documents, etc. if needed
+- Use `sequential-thinking` skill and `debugging` skills for sequential thinking, analyzing code, debugging, etc. if needed
+- **[IMPORTANT]** Follow the codebase structure and code standards in `./docs` during implementation.
+- **[IMPORTANT]** Do not just simulate the implementation or mocking them, always implement the real code.
+
+## Code Quality Guidelines
+- Read and follow codebase structure and code standards in `./docs`
+- Don't be too harsh on code linting, but make sure there are no syntax errors and code are compilable
+- Prioritize functionality and readability over strict style enforcement and code formatting
+- Use reasonable code quality standards that enhance developer productivity
+- Use try catch error handling & cover security standards
+- Use `code-reviewer` agent to review code after every implementation
+
+## Pre-commit/Push Rules
+- Run linting before commit
+- Run tests before push (DO NOT ignore failed tests just to pass the build or github actions)
+- Keep commits focused on the actual code changes
+- **DO NOT** commit and push any confidential information (such as dotenv files, API keys, database credentials, etc.) to git repository!
+- Create clean, professional commit messages without AI references. Use conventional commit format.
+
+## Coding Standards (ECC-aligned)
+- Follow consistent naming conventions: camelCase for variables/functions, PascalCase for classes/components
+- Prefer relative imports and keep module boundaries clean
+- Use conventional commit messaging (fix, feat, docs, test, refactor, chore)
+- Validate risky config changes in PRs — never weaken linter/formatter configs to bypass errors
+- Keep hook and script files cross-platform compatible (Node.js preferred over shell scripts)
+
+## Code Implementation
+- Write clean, readable, and maintainable code
+- Follow established architectural patterns
+- Implement features according to specifications
+- Handle edge cases and error scenarios
+- **DO NOT** create new enhanced files, update to the existing files directly.