Agent Skills

Specialized prompt rules, API schemas, and animation constraints that empower AI coding assistants to write and maintain DevClub UI code with 100% architectural fidelity.

What are Agent Skills?

Agent Skills are modular instruction sets recognized by modern agentic development environments like Claude Code, Cursor, Antigravity, and GitHub Copilot. Instead of generic hallucinations, skills provide your agent with exact design tokens, GSAP lifecycle rules, and WebGL cleanup patterns.

Included GSAP Skill Index

DevClub UI ships with built-in skills indexed via skills/llms.txt. When pair-programming with an agent, it reads these skills before generating animations:

gsap-core

gsap.to(), from(), easing, duration, stagger, matchMedia for responsive animations.

gsap-timeline

gsap.timeline(), sequenced keyframes, playback control, choreographies.

gsap-scrolltrigger

Scroll-linked scrub animations, pinning sections, cleanup on unmount.

gsap-react

useGSAP hook, context scoping, SSR safety, React 19 lifecycle compatibility.

gsap-performance

GPU-accelerated transforms, will-change, 60fps jank prevention.

gsap-plugins

Draggable, Inertia, SplitText, ScrambleText, and SVG physics modules.

llms.txt Agent Discovery

The skills/llms.txt index defines trigger keywords and capabilities for every animation module:

skills/llms.txt

GSAP Skills Index for AI Agents

gsap-core

Core API: gsap.to(), from(), fromTo(), easing, duration, stagger, gsap.matchMedia().

gsap-react

React: useGSAP hook, refs, gsap.context(), automatic unmount cleanup, SSR safety.

gsap-performance

Performance: transforms, will-change, batching, GPU optimization.

Using with Cursor & Claude Code

Add DevClub guidelines to your project's agent rules (.cursorrules, CLAUDE.md, or AGENTS.md):

AGENTS.md

When generating or modifying DevClub UI components:

1. Always inspect the skills/ directory before writing animations.

2. Wrap React animations in gsap/react useGSAP() or gsap.context().

3. Never use raw setInterval or CSS keyframes when GSAP covers the behavior.

4. Strictly follow design tokens (--background, --foreground, --border).