Agent skill · design visual · aiskillstore
reactbits
Search, browse, and install animated React components from ReactBits.dev (135+ components). Use when the user wants to add UI effects, animations, backgrounds, or interactive components to their React/Next.js project.
Why this skill is useful
Provides access to a library of animated React components, including specific usage examples and integration workflows that the AI wouldn't reliably generate on its own.
What it needs
Requires framer-motion, gsap, three.js installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
ReactBits Skill You have access to the ReactBits MCP server via the following tools: mcpreactbitslistcategories — List all component categories mcpreactbitslistcomponents — List components, optionally filter by category (Animations, Backgrounds, Text Animations, Components, Buttons, Forms, Loaders), style (tailwind, css, default), limit mcpreactbitssearchcomponents — Search components by query, filter by category, limit mcpreactbitsgetcomponent — Get full source code for a component by name (slug), optionally specify style (tailwind, css, default) mcpreactbitsgetcomponentdemo — Get usage example and demo code for a component by name Website Builder Mode When the user says they want to "build a website", "make a site", "create a landing page", "做一个网站", "帮我搭个页面", or any similar intent — DO NOT wait for them to specify what components they need. Instead, ASK these questions first: 1. Purpose — 这个网站是做什么的？（个人作品集 / 公司官网 / 产品落地页 / 博客 / 活动页 / 其他） 2. Style — 你喜欢什么风格？（极简 / 科技感 / 复古 / 可爱卡通 / 暗黑炫酷 / 商务专业） 3. Color — 有偏好的主色调吗？（紫色 / 蓝色 / 绿色 / 暖色 / 黑白 / 让我推荐） 4. Pages — 需要哪些页面？（首页 / 关于 / 作品展示 / 联系 / 博客 / 其他） 5. Key Features — 有什么特别想要的功能？（3D 背景 / 粒子效果 / 滚动动画 / 视频展示 / 卡片交互 / 文字动画） After getting answers, DO this: 1. Search ReactBits for components that match their style and needs 2. Recommend 3-5 components with brief descriptions 3. Ask which ones they want to add 4. Install and integrate them one by one How to use When the user asks about ReactBits components: 1. List available components: Use listcomponents or listcategories to show what's available 2. Search for something specific: Use searchcomponents with the user's query 3. Get source code: Use getcomponent to retrieve the full component source 4. Get demo/usage example: Use getcomponentdemo to see how to use it Integration workflow When the user wants to add a component to their project: 1. Get the component source via getcomponent with the user's preferred style (tailwind or css) 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/reactbits