Before we dive in, quick word: everything you're about to read gets built, tested, and taken further inside Bestapps Academy, our Skool community. It's where we drop the actual skills, walk through the builds live, and troubleshoot each other's projects, so instead of just reading about a 3D hero, you ship one with people looking over your shoulder. If this guide clicks for you, that's the room where it goes from "interesting" to "in production."

Bestapps Academy

First — what's a "skill"?

A Claude Code skill is a packaged set of instructions and best practices Claude reads before it builds. So instead of generic output, you get code that follows the real conventions of a library or discipline.

Install once, then just describe what you want. Start with one, ship something, then add the next.

1. Three.js Skills

Repo: github.com/cloudai-x/threejs-skills

Real-time 3D on the web — without touching raw WebGL.

Spin up interactive 3D scenes from plain English: load models, wire up camera movement, set the lighting, and add particles that actually hold 60fps.

  • Interactive 3D scenes

  • Camera controls out of the box

  • GLTF model loading

  • Cinematic lighting setups

  • Particle effects

Reach for it when: you want a 3D hero, a product viewer, or an immersive landing moment.

2. GSAP Skill

Repo: github.com/greensock/gsap-skills

The official GreenSock skill — the pro standard for web animation. Not a knockoff.

Built by GreenSock themselves, so you get correct timelines, ScrollTrigger reveals, premium text effects, and clean React integration.

  • Official GreenSock skill

  • Timeline sequencing

  • ScrollTrigger reveals

  • Text reveal effects

  • React integration

Reach for it when: you need scroll-driven storytelling or precisely-timed sequences that feel expensive.

3. Design DNA

Repo: github.com/zanwei/design-dna

Point it at any site you love — it clones the taste, not the code.

Reverse-engineers a page's visual identity into machine-readable tokens: color palette, typography scale, and layout logic you can apply to your own project.

  • Reverse-engineer design

  • Copy UI style

  • Extract color palettes

  • Pull typography scales

  • Layout analysis

Reach for it when: a reference site nails the vibe and you want that system fast, without hand-measuring pixels.

4. Motion Design Skill

Repo: github.com/lottiefiles/motion-design-skill

LottieFiles' own skill — production motion graphics from a prompt.

Generate Lottie and SVG animations with real timeline and keyframe control, add interactive states, and export straight to JSON or dotLottie.

  • Lottie animation

  • SVG animation

  • Timeline & keyframes

  • Interactive states

  • JSON & dotLottie export

Reach for it when: you need lightweight, resolution-independent motion — icons, loaders, micro-interactions — that ships to web and mobile.

5. Genjutsu

Repo: github.com/AThevon/genjutsu

"The art of illusion. Cast motion. Zero AI slop."

A creative-direction layer that pushes any interface from functional to exceptional — award-winning UI patterns, modern layouts, and premium animation across Web, Android, and Apple.

  • Award-winning UI

  • Modern layout

  • Premium animation

  • Creative direction

  • Final visual polish

Reach for it when: the build works but looks generic, and you want it to feel designed, not defaulted.

How to actually use them

These are Claude Code skills — same flow for each repo:

  1. Open the repo & read the README. Each lists its exact install path and the skill commands it exposes.

  2. Add the skill to your project. Drop it where Claude Code looks for skills, then confirm it loads.

  3. Describe what you want in plain language. e.g. "Add a scroll-triggered 3D hero using the three.js skill" — the skill supplies the conventions.

  4. Stack them. Genjutsu for direction, GSAP for timing, Three.js for depth. The magic is combining, not choosing one.

Now go make something that moves.

Pick one skill. Ship one thing today. Add the next tomorrow.

If this was useful, forward it to one person who's still shipping static UIs.

A couple of notes: I kept the count at 5 to match the repos (your cover still says 6 — worth reconciling). And I added a forward-to-a-friend line at the end since that's the highest-leverage growth mechanic in a newsletter — swap it for a "reply and tell me which one you'll try" if you'd rather drive replies for deliverability.

Want a subject line + preview text to go with it? Those two do most of the open-rate work.

Keep Reading