create-xani-agentic-app 1.0.0

package/template/.claude/skills/vercel-react-best-practices/rules/server-no-shared-module-state.md

@@ -0,0 +1,50 @@
+---
+title: Avoid Shared Module State for Request Data
+impact: HIGH
+impactDescription: prevents concurrency bugs and request data leaks
+tags: server, rsc, ssr, concurrency, security, state
+---
+
+## Avoid Shared Module State for Request Data
+
+For React Server Components and client components rendered during SSR, avoid using mutable module-level variables to share request-scoped data. Server renders can run concurrently in the same process. If one render writes to shared module state and another render reads it, you can get race conditions, cross-request contamination, and security bugs where one user's data appears in another user's response.
+
+Treat module scope on the server as process-wide shared memory, not request-local state.
+
+**Incorrect (request data leaks across concurrent renders):**
+
+```tsx
+let currentUser: User | null = null
+
+export default async function Page() {
+  currentUser = await auth()
+  return <Dashboard />
+}
+
+async function Dashboard() {
+  return <div>{currentUser?.name}</div>
+}
+```
+
+If two requests overlap, request A can set `currentUser`, then request B overwrites it before request A finishes rendering `Dashboard`.
+
+**Correct (keep request data local to the render tree):**
+
+```tsx
+export default async function Page() {
+  const user = await auth()
+  return <Dashboard user={user} />
+}
+
+function Dashboard({ user }: { user: User | null }) {
+  return <div>{user?.name}</div>
+}
+```
+
+Safe exceptions:
+
+- Immutable static assets or config loaded once at module scope
+- Shared caches intentionally designed for cross-request reuse and keyed correctly
+- Process-wide singletons that do not store request- or user-specific mutable data
+
+For static assets and config, see [Hoist Static I/O to Module Level](./server-hoist-static-io.md).

package/template/.claude/skills/vercel-react-best-practices/rules/server-parallel-fetching.md

@@ -0,0 +1,83 @@
+---
+title: Parallel Data Fetching with Component Composition
+impact: CRITICAL
+impactDescription: eliminates server-side waterfalls
+tags: server, rsc, parallel-fetching, composition
+---
+
+## Parallel Data Fetching with Component Composition
+
+React Server Components execute sequentially within a tree. Restructure with composition to parallelize data fetching.
+
+**Incorrect (Sidebar waits for Page's fetch to complete):**
+
+```tsx
+export default async function Page() {
+  const header = await fetchHeader()
+  return (
+    <div>
+      <div>{header}</div>
+      <Sidebar />
+    </div>
+  )
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+```
+
+**Correct (both fetch simultaneously):**
+
+```tsx
+async function Header() {
+  const data = await fetchHeader()
+  return <div>{data}</div>
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+export default function Page() {
+  return (
+    <div>
+      <Header />
+      <Sidebar />
+    </div>
+  )
+}
+```
+
+**Alternative with children prop:**
+
+```tsx
+async function Header() {
+  const data = await fetchHeader()
+  return <div>{data}</div>
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div>
+      <Header />
+      {children}
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <Layout>
+      <Sidebar />
+    </Layout>
+  )
+}
+```

package/template/.claude/skills/vercel-react-best-practices/rules/server-parallel-nested-fetching.md

@@ -0,0 +1,34 @@
+---
+title: Parallel Nested Data Fetching
+impact: CRITICAL
+impactDescription: eliminates server-side waterfalls
+tags: server, rsc, parallel-fetching, promise-chaining
+---
+
+## Parallel Nested Data Fetching
+
+When fetching nested data in parallel, chain dependent fetches within each item's promise so a slow item doesn't block the rest.
+
+**Incorrect (a single slow item blocks all nested fetches):**
+
+```tsx
+const chats = await Promise.all(
+  chatIds.map(id => getChat(id))
+)
+
+const chatAuthors = await Promise.all(
+  chats.map(chat => getUser(chat.author))
+)
+```
+
+If one `getChat(id)` out of 100 is extremely slow, the authors of the other 99 chats can't start loading even though their data is ready.
+
+**Correct (each item chains its own nested fetch):**
+
+```tsx
+const chatAuthors = await Promise.all(
+  chatIds.map(id => getChat(id).then(chat => getUser(chat.author)))
+)
+```
+
+Each item independently chains `getChat` → `getUser`, so a slow chat doesn't block author fetches for the others.

package/template/.claude/skills/vercel-react-best-practices/rules/server-serialization.md

@@ -0,0 +1,38 @@
+---
+title: Minimize Serialization at RSC Boundaries
+impact: HIGH
+impactDescription: reduces data transfer size
+tags: server, rsc, serialization, props
+---
+
+## Minimize Serialization at RSC Boundaries
+
+The React Server/Client boundary serializes all object properties into strings and embeds them in the HTML response and subsequent RSC requests. This serialized data directly impacts page weight and load time, so **size matters a lot**. Only pass fields that the client actually uses.
+
+**Incorrect (serializes all 50 fields):**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()  // 50 fields
+  return <Profile user={user} />
+}
+
+'use client'
+function Profile({ user }: { user: User }) {
+  return <div>{user.name}</div>  // uses 1 field
+}
+```
+
+**Correct (serializes only 1 field):**
+
+```tsx
+async function Page() {
+  const user = await fetchUser()
+  return <Profile name={user.name} />
+}
+
+'use client'
+function Profile({ name }: { name: string }) {
+  return <div>{name}</div>
+}
+```

package/template/.claude/skills/video-downloader/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: video-downloader
+description: |
+  Download videos from YouTube and other platforms for offline viewing, editing, or archival with support for various formats and quality options.
+triggers:
+  - "download video"
+  - "youtube download"
+  - "archive video"
+  - "offline video"
+od:
+  mode: video
+  category: video-generation
+  upstream: "https://github.com/ComposioHQ/awesome-claude-skills/tree/master/video-downloader"
+---
+
+# video-downloader
+
+> Curated from ComposioHQ awesome-claude-skills.
+
+## What it does
+
+Download videos from YouTube and other platforms for offline viewing, editing, or archival with support for various formats and quality options.
+
+## Source
+
+- Upstream: https://github.com/ComposioHQ/awesome-claude-skills/tree/master/video-downloader
+- Category: `video-generation`
+
+## How to use
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To run the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/ComposioHQ/awesome-claude-skills/tree/master/video-downloader
+```
+
+Then ask the agent to invoke this skill by name (`video-downloader`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/template/.claude/skills/web-design-guidelines/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review files for compliance with Web Interface Guidelines.
+
+## How It Works
+
+1. Fetch the latest guidelines from the source URL below
+2. Read the specified files (or prompt user for files/pattern)
+3. Check against all rules in the fetched guidelines
+4. Output findings in the terse `file:line` format
+
+## Guidelines Source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
+
+## Usage
+
+When a user provides a file or pattern argument:
+1. Fetch guidelines from the source URL above
+2. Read the specified files
+3. Apply all rules from the fetched guidelines
+4. Output findings using the format specified in the guidelines
+
+If no files specified, ask the user which files to review.

package/template/.claude/skills/webgpu-threejs-tsl/REFERENCE.md

@@ -0,0 +1,371 @@
+# TSL Quick Reference
+
+## Imports
+
+```javascript
+// WebGPU Three.js
+import * as THREE from 'three/webgpu';
+
+// Core TSL
+import {
+  float, int, uint, bool,
+  vec2, vec3, vec4, color,
+  mat2, mat3, mat4,
+  uniform, texture, uv,
+  Fn, If, Loop, Break, Continue,
+  time, deltaTime
+} from 'three/tsl';
+```
+
+## Types
+
+| TSL | WGSL | Example |
+|-----|------|---------|
+| `float(1.0)` | `f32` | Scalar float |
+| `int(1)` | `i32` | Signed integer |
+| `uint(1)` | `u32` | Unsigned integer |
+| `bool(true)` | `bool` | Boolean |
+| `vec2(x, y)` | `vec2<f32>` | 2D vector |
+| `vec3(x, y, z)` | `vec3<f32>` | 3D vector |
+| `vec4(x, y, z, w)` | `vec4<f32>` | 4D vector |
+| `color(0xff0000)` | `vec3<f32>` | RGB color |
+| `uniform(value)` | uniform | Dynamic value |
+
+## Operators
+
+| Operation | TSL | GLSL Equivalent |
+|-----------|-----|-----------------|
+| Add | `a.add(b)` | `a + b` |
+| Subtract | `a.sub(b)` | `a - b` |
+| Multiply | `a.mul(b)` | `a * b` |
+| Divide | `a.div(b)` | `a / b` |
+| Modulo | `a.mod(b)` | `mod(a, b)` |
+| Negate | `a.negate()` | `-a` |
+| Less Than | `a.lessThan(b)` | `a < b` |
+| Greater Than | `a.greaterThan(b)` | `a > b` |
+| Equal | `a.equal(b)` | `a == b` |
+| And | `a.and(b)` | `a && b` |
+| Or | `a.or(b)` | `a \|\| b` |
+| Assign | `a.assign(b)` | `a = b` |
+| Add Assign | `a.addAssign(b)` | `a += b` |
+
+## Swizzling
+
+```javascript
+const v = vec3(1, 2, 3);
+v.x        // 1
+v.xy       // vec2(1, 2)
+v.zyx      // vec3(3, 2, 1)
+v.rgb      // same as xyz
+```
+
+## Math Functions
+
+| Function | Description |
+|----------|-------------|
+| `abs(x)` | Absolute value |
+| `sign(x)` | Sign (-1, 0, 1) |
+| `floor(x)` | Round down |
+| `ceil(x)` | Round up |
+| `fract(x)` | Fractional part |
+| `min(a, b)` | Minimum |
+| `max(a, b)` | Maximum |
+| `clamp(x, lo, hi)` | Clamp to range |
+| `mix(a, b, t)` | Linear interpolation |
+| `step(edge, x)` | Step function |
+| `smoothstep(a, b, x)` | Smooth step |
+| `sin(x)`, `cos(x)` | Trigonometry |
+| `pow(x, y)` | Power |
+| `sqrt(x)` | Square root |
+| `length(v)` | Vector length |
+| `distance(a, b)` | Distance |
+| `dot(a, b)` | Dot product |
+| `cross(a, b)` | Cross product |
+| `normalize(v)` | Unit vector |
+| `reflect(i, n)` | Reflection |
+
+## Geometry Nodes
+
+| Node | Description |
+|------|-------------|
+| `positionLocal` | Model space position |
+| `positionWorld` | World space position |
+| `positionView` | Camera space position |
+| `normalLocal` | Model space normal |
+| `normalWorld` | World space normal |
+| `normalView` | Camera space normal |
+| `uv()` | UV coordinates |
+| `uv(1)` | Secondary UVs |
+| `tangentLocal` | Tangent vector |
+| `vertexColor()` | Vertex colors |
+
+## Camera Nodes
+
+| Node | Description |
+|------|-------------|
+| `cameraPosition` | Camera world position |
+| `cameraNear` | Near plane |
+| `cameraFar` | Far plane |
+| `cameraViewMatrix` | View matrix |
+| `cameraProjectionMatrix` | Projection matrix |
+| `screenUV` | Screen UV (0-1) |
+| `screenSize` | Screen dimensions |
+
+## Time
+
+| Node | Description |
+|------|-------------|
+| `time` | Seconds since start |
+| `deltaTime` | Frame delta |
+| `oscSine(t)` | Sine wave (0-1) |
+| `oscSquare(t)` | Square wave |
+| `oscTriangle(t)` | Triangle wave |
+| `oscSawtooth(t)` | Sawtooth wave |
+
+## Material Properties
+
+```javascript
+const mat = new THREE.MeshStandardNodeMaterial();
+
+// Basic
+mat.colorNode = color(0xff0000);
+mat.opacityNode = float(0.8);
+mat.alphaTestNode = float(0.5);
+
+// PBR
+mat.roughnessNode = float(0.5);
+mat.metalnessNode = float(0.0);
+mat.emissiveNode = color(0x000000);
+mat.normalNode = normalMap(tex);
+
+// Physical (MeshPhysicalNodeMaterial)
+mat.clearcoatNode = float(1.0);
+mat.transmissionNode = float(0.9);
+mat.iridescenceNode = float(1.0);
+mat.sheenNode = float(1.0);
+
+// Vertex
+mat.positionNode = displaced;
+```
+
+## Control Flow
+
+```javascript
+// If-Else
+If(condition, () => {
+  // true
+}).ElseIf(other, () => {
+  // other true
+}).Else(() => {
+  // false
+});
+
+// Select (ternary)
+const result = select(condition, trueVal, falseVal);
+
+// Loop
+Loop(10, ({ i }) => {
+  // i = 0 to 9
+});
+
+// Loop control
+Break();
+Continue();
+Discard();  // Fragment only
+```
+
+## Custom Functions
+
+```javascript
+// Basic function
+const myFn = Fn(([a, b]) => {
+  return a.add(b);
+});
+
+// With defaults
+const myFn = Fn(([a = 1.0, b = 2.0]) => {
+  return a.add(b);
+});
+
+// Usage
+myFn(x, y);
+myFn();  // uses defaults
+```
+
+## Compute Shaders
+
+```javascript
+// Storage buffers (read-write)
+const positions = instancedArray(count, 'vec3');
+const values = instancedArray(count, 'float');
+
+// Read-only storage buffers
+const lookupTable = attributeArray(data, 'float');
+
+// Compute shader
+const compute = Fn(() => {
+  const pos = positions.element(instanceIndex);
+  pos.addAssign(vec3(0.01, 0, 0));
+})().compute(count);
+
+// Execute (after await renderer.init())
+renderer.compute(compute);
+
+// Workgroup size
+const compute2 = Fn(() => { /* ... */ })().compute(count, [64]);
+```
+
+## Post-Processing
+
+```javascript
+import { pass } from 'three/tsl';
+import { bloom } from 'three/addons/tsl/display/BloomNode.js';
+
+// Setup (RenderPipeline replaced PostProcessing in r183)
+const renderPipeline = new THREE.RenderPipeline(renderer);
+const scenePass = pass(scene, camera);
+const color = scenePass.getTextureNode('output');
+
+// Apply effects
+const bloomPass = bloom(color);
+renderPipeline.outputNode = color.add(bloomPass);
+
+// Render
+renderPipeline.render();
+```
+
+## Common Patterns
+
+### Fresnel
+
+```javascript
+const viewDir = cameraPosition.sub(positionWorld).normalize();
+const fresnel = float(1).sub(normalWorld.dot(viewDir).saturate()).pow(3);
+```
+
+### Animated UV
+
+```javascript
+const animUV = uv().add(vec2(time.mul(0.1), 0));
+```
+
+### Noise Hash
+
+```javascript
+const noise = fract(position.dot(vec3(12.9898, 78.233, 45.543)).sin().mul(43758.5453));
+```
+
+### Dissolve
+
+```javascript
+const noise = hash(positionLocal.mul(50));
+If(noise.lessThan(threshold), () => Discard());
+```
+
+### Color Gradient
+
+```javascript
+const gradient = mix(colorA, colorB, positionLocal.y.mul(0.5).add(0.5));
+```
+
+## Node Materials
+
+| Material | Use Case |
+|----------|----------|
+| `MeshBasicNodeMaterial` | Unlit |
+| `MeshStandardNodeMaterial` | PBR |
+| `MeshPhysicalNodeMaterial` | Advanced PBR |
+| `MeshPhongNodeMaterial` | Phong shading |
+| `MeshToonNodeMaterial` | Cel shading |
+| `PointsNodeMaterial` | Point clouds |
+| `LineBasicNodeMaterial` | Lines |
+| `SpriteNodeMaterial` | Sprites |
+
+## Device Loss Handling
+
+```javascript
+// Listen for device loss
+renderer.backend.device.lost.then((info) => {
+  if (info.reason === 'unknown') {
+    // Unexpected loss - recover
+    renderer.dispose();
+    initWebGPU();  // Reinitialize
+  }
+});
+
+// Simulate loss for testing
+renderer.backend.device.destroy();
+```
+
+| Loss Reason | Meaning |
+|-------------|---------|
+| `'destroyed'` | Intentional via `destroy()` |
+| `'unknown'` | Unexpected (driver crash, timeout, etc.) |
+
+**Recovery tips:**
+- Always get fresh adapter before new device
+- Save/restore application state (not transient data)
+- Use Chrome `about:gpucrash` to test real GPU crashes
+
+## Compute Shader Built-ins
+
+| Node | Description |
+|------|-------------|
+| `instanceIndex` | Current instance/invocation index |
+| `vertexIndex` | Current vertex index |
+| `drawIndex` | Current draw call index |
+| `globalId` | Global invocation position (uvec3) |
+| `localId` | Local workgroup position (uvec3) |
+| `workgroupId` | Workgroup index (uvec3) |
+| `numWorkgroups` | Number of workgroups dispatched (uvec3) |
+| `subgroupSize` | Size of the subgroup |
+
+## Device Limits
+
+WebGPU devices use **default minimums** unless you request higher limits. This is critical for large buffers.
+
+```javascript
+// Three.js: pass requiredLimits to the renderer
+const renderer = new THREE.WebGPURenderer({
+  requiredLimits: {
+    maxBufferSize: 1024 * 1024 * 1024,            // 1 GiB
+    maxStorageBufferBindingSize: 1024 * 1024 * 512, // 512 MiB
+  },
+});
+await renderer.init();
+```
+
+| Limit | Default | Common Need |
+|-------|---------|-------------|
+| `maxBufferSize` | 256 MiB | Large vertex/storage buffers |
+| `maxStorageBufferBindingSize` | 128 MiB | Large compute buffers |
+| `maxStorageBuffersPerShaderStage` | 8 | Many storage buffers |
+
+**Check before requesting:**
+```javascript
+const adapter = await navigator.gpu?.requestAdapter();
+if (adapter.limits.maxBufferSize >= desiredSize) {
+  // Safe to request
+}
+```
+
+See `docs/limits-and-features.md` for full details.
+
+## Version Notes
+
+**r178+:**
+- `PI2` is deprecated → use `TWO_PI`
+- `transformedNormalView` → use `normalView`
+- `transformedNormalWorld` → use `normalWorld`
+
+**r171+:**
+- Recommended minimum version for stable TSL
+- Requires separate `three/webgpu` import map entry
+
+## Resources
+
+- [TSL Wiki](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language)
+- [TSL Docs](https://threejs.org/docs/pages/TSL.html)
+- [WebGPU Examples](https://github.com/mrdoob/three.js/tree/master/examples)
+- [Three.js Docs](https://threejs.org/docs/)
+- [WebGPU Best Practices - Device Loss](https://toji.dev/webgpu-best-practices/device-loss)