What is the animated-component-libraries skill?
The animated-component-libraries skill is a SKILL.md folder in the freshtechbro design skills repository. It gives an AI coding agent working knowledge of Magic UI, with 150+ Tailwind and Motion components, and React Bits, with 90+ lightweight animated components, plus ready patterns for backgrounds, text reveals, buttons, docks, counters and marquees.
It is one skill inside freshtechbro's design skills collection. Its description covers pre-built animated React components from Magic UI and React Bits, aimed at landing pages, marketing sites and dashboards where hand-crafting every animation would be slow.
The skill positions itself as an alternative to writing animations yourself with Framer Motion or GSAP. Instead of inventing keyframes, the agent reaches for a named component, copies it in and tunes its props.
Magic UI and React Bits at a glance
- Magic UI: 150+ TypeScript components built on Tailwind CSS and Motion, following shadcn conventions for installation and structure.
- React Bits: 90+ animated components with minimal dependencies, focused on visual effects, backgrounds and micro-interactions.
- Text animations: BlurText, CircularText, CountUp and SpinningText.
- Interactive elements: MagicButton, Magnet, Dock and Stepper.
- Backgrounds and layouts: Aurora, Plasma, Particles, AnimatedList and Bento Grid.
Worked patterns the skill ships
- A hero with a masked static grid layered under an animated grid pattern.
- Word-by-word or character-by-character BlurText reveals for marketing sections.
- A shimmer button next to a card framed by an animated border beam.
- A magnifying dock for app navigation and CountUp statistics for dashboards.
- Horizontal and vertical marquees for testimonials, plus WebGL backgrounds.
Who should use it
Good fits
- React and Tailwind projects that need polished motion on a marketing page quickly.
- Teams already on shadcn/ui, since Magic UI follows its install conventions.
- Anyone who wants an agent to choose between two libraries instead of writing animation code from nothing.
Poor fits
- Projects without React. Every component in both libraries is a React component.
- Custom scroll choreography with precise timelines. For that, look at gsap-scrolltrigger.
- Pages where animation weight is a concern. Check the result with fixing-motion-performance.
Use it with UiChemy
These components live in a React app, not in WordPress. Build the page with your agent, then bring it across with UiChemy AI to WordPress, or tidy the layout in UiChemy Composer. Click Get Started on uichemy.com and check each effect afterwards.
How to install Animated Component Libraries Skill: Magic UI and React Bits
/plugin marketplace add freshtechbro/claudedesignskillsAdd the marketplace
In Claude Code, run
/plugin marketplace add freshtechbro/claudedesignskills. The README lists this as the recommended route.Install the animation bundle
Run
/plugin install animation-components. The README describes that bundle as five skills: React Spring, Magic UI, AOS, Anime.js and Lottie, and it files animated-component-libraries under Animation and Components.Or unzip one skill
Run
git clone https://github.com/freshtechbro/claudedesignskills.git, then unzip the skill you want, for exampleunzip .claude/skills/threejs-webgl.zip -d your-project/.claude/skills/threejs-webgl/. The README lists this as Option 4, the local-project route.Or upload to claude.ai
Go to Settings, then Features, then Skills, choose Upload skill and select the skill's .zip file from
.claude/skills/, as the README explains.Prepare the project
For Magic UI, the project needs Tailwind CSS and a cn() helper built from clsx and tailwind-merge in lib/utils.ts. Install motion for animated components.
Check that it loaded
Ask the agent for an animated landing page hero using Magic UI or React Bits. It should name specific components such as ShimmerButton, BlurText or Aurora instead of writing keyframes from scratch.
Key features
- Two libraries in one skillThe skill covers Magic UI (150+ TypeScript components) and React Bits (90+ animated components), so the agent can compare them for a given section instead of defaulting to one.
- Magic UI architectureMagic UI components rest on Tailwind CSS, Framer Motion and shadcn/ui conventions. Each follows one shape: a cn() helper, a motion element and a className prop you can override.
- Two install routes for Magic UIThe skill recommends the shadcn CLI route with
npx shadcn@latest add. The manual route copies code into components/ui, installs motion, adds the CSS animations to globals.css and checks that cn() exists in lib/utils.ts. - Copy-paste React BitsReact Bits is copied in by hand. The skill lists framer-motion for animation-heavy pieces and ogl for the WebGL components Particles and Plasma, to be installed only as needed.
- Grid and aurora backgroundsGridPattern and AnimatedGridPattern use radial-gradient masks to fade out at the edges, while Particles, Plasma and Aurora provide full-section WebGL effects behind hero text.
- Shimmer buttons and border beamsShimmerButton takes color, size, duration and radius props. BorderBeam sits inside a relatively positioned card to run an animated light around its border.
- Text reveals with BlurTextBlurText animates by words or by characters, with direction, delay, threshold and step duration props, plus custom from and to states for blur, opacity and offset.
- Dock, CountUp and MarqueeA spring-driven Dock handles icon navigation, CountUp animates numbers with prefixes, suffixes and separators, and Marquee scrolls testimonials horizontally or vertically with pause on hover.
- Combining with Framer MotionThe skill shows React Bits Magnet wrapping a motion element that scales on hover and tap, so a library component and your own gestures can share one card.
Frequently asked questions
What is the animated-component-libraries skill?
It is a skill folder in the freshtechbro/claudedesignskills repository that teaches an AI coding agent to use Magic UI and React Bits. It covers architecture, install methods and worked patterns, so the agent can add animated backgrounds, buttons, text reveals and counters to a React page.
How do I install the animated-component-libraries skill?
Add the marketplace with /plugin marketplace add freshtechbro/claudedesignskills, then install the animation-components bundle with /plugin install animation-components. You can also clone the repository and copy the skill folder into your project's .claude/skills directory, or upload the packaged .zip to claude.ai from the Skills settings.
What is the difference between Magic UI and React Bits in this skill?
The skill describes Magic UI as 150+ TypeScript components on Tailwind CSS and Motion that follow shadcn conventions. React Bits is 90+ components with minimal dependencies, centered on visual effects and micro-interactions, with some WebGL pieces. Magic UI installs through a CLI, while React Bits is copied by hand.
Does the skill need Tailwind CSS or shadcn/ui?
Magic UI does. The skill says its components use Tailwind CSS, follow shadcn conventions and rely on a cn() helper in lib/utils.ts. React Bits is described as self-contained with minimal dependencies, so it asks for less. Check which library your component belongs to before wiring it into a project. See shadcn for the base setup.
Which AI coding agents can use the animated-component-libraries skill?
The README targets Claude Code through its plugin marketplace and claude.ai through skill upload. It does not list other agents. Another agent that loads SKILL.md folders may work with the copied folder, but the repository does not confirm it, so test it with a small component first.
Does this skill replace Framer Motion or GSAP?
Not exactly. It is framed as an alternative to hand-writing animations, since you reuse finished components instead. It also shows the libraries working alongside Framer Motion. See motion-framer-motion for a skill on that library by itself.
What dependencies do the components need?
The skill lists motion for Magic UI animation, framer-motion for animation-heavy React Bits components, and ogl for the WebGL components Particles and Plasma. Magic UI also needs clsx and tailwind-merge for the cn() helper. Install these only when a component calls for them.
What license does the repository use?
The repository README states the MIT License and links to a LICENSE file. GitHub also reports MIT for the repo. That covers the skill collection itself. Check the licensing of any component source you copy from Magic UI or React Bits before shipping it in a product.