🎯

payload

🎯Skill

from noklip-io/agent-skills

VibeIndex|
What it does

Provides comprehensive development guidance and reference for working with Payload CMS, covering configuration, setup, and best practices for the standalone version.

payload

Installation

Quick InstallInstall with npx
npx skills add noklip-io/agent-skills
Quick InstallInstall with npx
npx skills add noklip-io/agent-skills --skill three-js
Quick InstallInstall with npx
npx skills add noklip-io/agent-skills --skill react-19
Quick InstallInstall with npx
npx skills add noklip-io/agent-skills --skill nuqs
Quick InstallInstall with npx
npx skills add noklip-io/agent-skills --skill theatre-js

+ 1 more commands

πŸ“– Extracted from docs: noklip-io/agent-skills
0
-
Last UpdatedJan 21, 2026

Skill Details

SKILL.md

Overview

# Agent Skills

A collection of AI agent skills for Claude Code, Cursor, GitHub Copilot, and other AI coding assistants.

Installation

Install all skills

```bash

npx skills add noklip-io/agent-skills

```

Install a specific skill

```bash

npx skills add noklip-io/agent-skills --skill three-js

```

Available Skills

| Skill | Description |

|-------|-------------|

| [react-19](./skills/react-19) | React 19 patterns and breaking changes vs React 18 |

| [three-js](./skills/three-js) | Comprehensive Three.js reference for 3D web graphics |

| [nuqs](./skills/nuqs) | Type-safe URL query state management for React |

| [theatre-js](./skills/theatre-js) | Motion design editor and animation library for the web |

| [gsap](./skills/gsap) | Professional-grade JavaScript animation library |

| [payload](./skills/payload) | Payload CMS development (standalone version) |

Skill: react-19

Comprehensive React 19 skill covering 19.0 through 19.2+ with 10 reference documents:

  • New Hooks: useActionState, useOptimistic, use(), useFormStatus, useEffectEvent (19.2)
  • New Components: for hide/show with state preservation (19.2)
  • Paradigm Shifts: Server-first thinking, compiler-first optimization, declarative mutations
  • Anti-Patterns: What to stop doing in React 19
  • Deprecations: forwardRef, Context.Provider, removed APIs with migration guides
  • React Compiler: Automatic memoization details and when manual is still useful
  • Server Components: RSC, Server Actions, directives, streaming
  • TypeScript: Type changes, codemods, new patterns
  • Migration: Covers React 16/17/18 to 19 upgrade paths

```bash

npx skills add noklip-io/agent-skills --skill react-19

```

Skill: nuqs

Best practices for nuqs - type-safe search params state management:

  • Setup with adapters (Next.js, React, Remix, React Router)
  • useQueryState and useQueryStates hooks
  • Built-in parsers and custom parsers
  • Server Components with createSearchParamsCache
  • Testing with withNuqsTestingAdapter
  • Common patterns and critical mistakes to avoid

```bash

npx skills add noklip-io/agent-skills --skill nuqs

```

Skill: three-js

Complete Three.js reference with 18 documentation files covering:

  • Core: Scene, Renderer, Object3D, cameras, math utilities
  • Visuals: Materials, textures, lighting, shaders
  • Motion: Animation, interaction, controls
  • Assets: Loaders (GLTF, FBX, SVG, fonts, scientific formats)
  • Effects: Post-processing, bloom, DOF, SSAO
  • Advanced: WebGPU, TSL/node materials, physics, VR/XR

```bash

npx skills add noklip-io/agent-skills --skill three-js

```

Skill: theatre-js

Motion design editor and animation library with visual timeline editor:

  • Core: Project, Sheet, Object, Sequence architecture
  • Prop Types: Number, compound, rgba, image, custom types
  • Studio: Visual timeline editor, keyframe editing, export
  • React: useVal, usePrism, Atom, Theatric
  • R3F: editable components, SheetProvider, 3D animation
  • Production: State export, assets, tree-shaking

```bash

npx skills add noklip-io/agent-skills --skill theatre-js

```

Skill: gsap

Professional-grade JavaScript animation library with extensive plugin ecosystem:

  • Core: gsap.to, from, fromTo, timelines, easing, callbacks
  • ScrollTrigger: Scroll-based animations, pin, scrub, snap
  • ScrollSmoother: Smooth scrolling, parallax effects
  • SplitText: Text splitting and character animation
  • SVG: DrawSVG, MorphSVG, MotionPath plugins
  • Flip: Layout animations (FLIP technique)
  • React: useGSAP hook, cleanup patterns
  • Utilities: toArray, clamp, mapRange, interpolate

```bash

npx skills add noklip-io/agent-skills --skill gsap

```

Skill: payload

Standalone Payload CMS skill for AI coding agents:

  • Collections: Fields, hooks, access control, versioning, drafts
  • Fields: All field types, validation, conditional fields, virtual fields
  • Queries: Loc