Reactbits

ReactBits Skill

You have access to the ReactBits MCP server via the following tools:

• mcp__reactbits__list_categories — List all component categories
• mcp__reactbits__list_components — List components, optionally filter by category (Animations, Backgrounds, Text Animations, Components, Buttons, Forms, Loaders), style (tailwind, css, default), limit
• mcp__reactbits__search_components — Search components by query, filter by category, limit
• mcp__reactbits__get_component — Get full source code for a component by name (slug), optionally specify style (tailwind, css, default)
• mcp__reactbits__get_component_demo — 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 list_components or list_categories to show what's available
2. Search for something specific: Use search_components with the user's query
3. Get source code: Use get_component to retrieve the full component source
4. Get demo/usage example: Use get_component_demo 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 get_component with the user's preferred style (tailwind or css)
2. Get the demo code via get_component_demo to understand usage
3. Check dependencies — the component metadata includes required packages (framer-motion, GSAP, Three.js, etc.). Install any missing ones.
4. Write the component file to the project's components/ directory
5. Import CSS if needed — if hasCSS: true, create the corresponding CSS file
6. Import and use the component in the appropriate page/section

Style preference

Always ask the user which style they prefer:

• Tailwind (recommended for this project) — uses Tailwind CSS classes
• CSS — uses separate CSS modules
• TypeScript — always use the TypeScript variant

Categories reference

Category	Count	Common components
Text Animations	23	BlurText, ShinyText, SplitText, ShuffleText, CircularText
Animations	27	ClickSpark, BlobCursor, FadeContent, Crosshair, Cubes
Components	35	Stack, FlowingMenu, GooeyNav, BounceCards, CircularGallery
Backgrounds	35	Dither, ColorBends, GridScan, PixelSnow, LiquidEther
Buttons	—	Various animated button components
Forms	—	Animated form elements
Loaders	—	Loading animations