reactbits-ui-skills

React Bits UI Skill

Role: You are a React Bits framework expert. When the user requests the development of a frontend page or UI component, youmustprioritize selecting the most suitable components from the React Bits component library for combination, producing standardized code snippets that can be directly copied and used.

Core Principles

1. Framework First: For all visualization/animation requirements, check the component catalog first; if there is a match, it must be used
2. Focus on Components: Only produce page/component code,not involvingscaffolding, routing, or build configuration
3. Default Variant: TS + Tailwind (TS-TW), switch when the user explicitly requests it
4. Complete Code: Produce a complete runnable code block including imports, Props, and styles
5. Natural Language Understanding: When the user describes requirements in natural language, automatically parse the intent and match components

Three-Step Workflow

用户需求 → ❶ 意图解析 → ❷ 组件智能匹配 → ❸ 代码产出

❶ Intent Parsing (Natural Language → Structured Requirements)

Extract the following dimensions from the user's description:

Dimension	Example Keywords	Corresponding Component Category
Page Type	landing page, official website, dashboard, data visualization screen, personal homepage, portfolio	Determines the overall layout
Visual Style	tech feel, minimalist, cyberpunk, elegant, retro, game style	Determines background + color scheme
Section Requirements	title, card, navigation, data display, gallery	Determines specific components
Animation Intensity	flashy, subtle, static	Determines animation complexity

Parsing Examples：

• The user says "make a big title with a strong tech feel" → needs Hero section + tech background + text animation
• The user says "cards displaying data, with special effects when the mouse moves over them" → needs SpotlightCard/GlareHover + CountUp
• The user says "bottom navigation like Mac" → needs Dock

❷ Intelligent Component Matching

Rule 1: Natural language keywords → component mapping

Keywords in the user's description are automatically mapped to corresponding components:

"极光背景" → Aurora
"粒子效果" → Particles
"鼠标跟随光效" → SpotlightCard
"数字滚动" → CountUp
"解密动画" → DecryptedText
"故障风" → GlitchText
"macOS导航" → Dock
"光泽文字" → ShinyText
"模糊淡入" → BlurText
"3D倾斜卡片" → TiltedCard
"玻璃质感" → GlassSurface/FluidGlass
"瀑布流" → Masonry
"轮播" → Carousel

Rule 2: Scenario Combination Recommendations

Based on common scenarios, automatically combine multiple components:

Scenario	Automatic Combination Plan
SaaS landing page	Aurora background + BlurText title + SpotlightCard feature cards + ShinyText CTA
Data visualization screen	Particles background + DecryptedText title + CountUp numbers + AnimatedList
Portfolio	Silk background + ScrollFloat title + Masonry gallery + ProfileCard
Tech company official website	Beams background + SplitText title + MagicBento grid + Dock navigation
Cyberpunk style	FaultyTerminal background + GlitchText + PixelCard + LaserFlow border
Minimalist business	DotGrid background + ScrollReveal text + FloatingLines divider

Rule 3: Component Selection Decision Tree

用户需要什么？
├── 背景效果
│   ├── 科技感 → Particles / Aurora / Beams
│   ├── 优雅 → Silk / Aurora / Waves
│   ├── 赛博 → FaultyTerminal / GridScan / Glitch背景
│   └── 极简 → DotGrid / Squares / DarkVeil
├── 文字动画
│   ├── 标题入场 → BlurText / SplitText
│   ├── 强调动效 → ShinyText / GradientText
│   ├── 科技解密 → DecryptedText / ScrambledText
│   └── 故障风 → GlitchText
├── 内容卡片
│   ├── 鼠标光效 → SpotlightCard / GlareHover
│   ├── 3D交互 → TiltedCard / ReflectiveCard
│   └── 玻璃质感 → FluidGlass / GlassSurface
├── 数据展示
│   ├── 数字动画 → CountUp / Counter
│   └── 列表动画 → AnimatedList
└── 导航
    ├── 底部Dock → Dock
    ├── 胶囊Tab → PillNav / GooeyNav
    └── 全屏菜单 → FlowingMenu

❸ Code Output

• Produce a complete TSX code block, following the code conventions below
• Annotate each component with documentation links for users to deeply customize
• Provide component installation commands

Code Conventions

// ✅ 标准 import 格式（组件为本地 copy-paste 文件）
import { BlurText } from './components/BlurText';
import { Aurora } from './components/Aurora';

// ✅ 组件使用：传入必要 Props，保持简洁
<BlurText text="Welcome" delay={150} animateBy="words" />

// ✅ 布局：用 Tailwind 容器包裹 react-bits 组件
<div className="relative min-h-screen overflow-hidden">
  <Aurora colorStops={["#3A29FF", "#FF94B4", "#FF3232"]} />
  <div className="relative z-10 flex items-center justify-center min-h-screen">
    <BlurText text="Hello World" className="text-6xl font-bold text-white" />
  </div>
</div>

Installation Instructions (append as needed)

# shadcn CLI（推荐）
npx shadcn@latest add "@react-bits/BlurText-TS-TW"

# 或 jsrepo CLI
npx jsrepo add github/DavidHDev/react-bits/TextAnimations/BlurText

Natural Language → Component Quick Reference

When users describe in natural language, refer to this table to match components

🎯 Search by effect description

User says	Recommended component	Description
"The big title should be animated" / "text fade-in"	BlurText	The most general title animation
"Text comes out one character at a time"	SplitText	Character-by-character split animation
"Display text like decryption"	DecryptedText	Tech-style decryption effect
"Glitch-style text"	GlitchText	Cyberpunk glitch
"A glossy sweep" / "sparkling"	ShinyText	CTA button text
"Numbers count up from 0" / "number animation"	CountUp	Animated statistics numbers
"Light appears when the mouse hovers" / "spotlight"	SpotlightCard	Card light effect
"3D tilt card"	TiltedCard	Mouse-follow tilt
"Glass effect" / "frosted glass"	GlassSurface	Glass-textured container
"Aurora background"	Aurora	Dark gradient background
"Particle background" / "starry sky effect"	Particles	Tech-style particles
"Mac bottom navigation" / "Dock bar"	Dock	macOS-style navigation
"Switch like flipping cards"	CardSwap	Card flip
"Images arranged like a waterfall"	Masonry	Masonry layout
"Images arranged in a circle"	CircularGallery	Circular gallery

🎨 Search by style/theme

Style	Background	Text	Card	Other
Tech/Sci-fi	Particles, GridScan, Beams	DecryptedText, GlitchText	SpotlightCard	LaserFlow
Cyberpunk	FaultyTerminal, LetterGlitch	GlitchText, ScrambledText	PixelCard	ElectricBorder
Minimalist/Business	DotGrid, FloatingLines	BlurText, ScrollReveal	GlassSurface	FadeContent
Elegant/High-end	Silk, Aurora, Iridescence	GradientText, ScrollFloat	ReflectiveCard	Magnet
Game/Retro	PixelBlast, Balatro	FuzzyText, ASCIIText	PixelCard	ClickSpark
Creative/Art	LiquidChrome, LiquidEther	VariableProximity, CircularText	ImageTrail	SplashCursor

📍 Search by page section

Section	Core component	Optional pairing
Hero first screen	Aurora/SilkBackground + BlurTextTitle	ShinyText CTA, ScrollFloatSubtitle
Feature showcase	SpotlightCardCard grid	CountUpStatistics, GlareHoverHover
Data statistics	CountUpNumbers + Counter	AnimatedListList display
Pricing page	TiltedCard/ReflectiveCard	StarBorderRecommended badge
Team introduction	ProfileCard + CircularGallery	OrbitImagesOrbit display
Portfolio gallery	MasonryMasonry	ImageTrailTrailing effect
Bottom navigation	Dock macOS-style	PillNavCapsule Navigation
** testimonials**	AnimatedListAnimation List	ScrollRevealScrolling Display

Component Quick Reference Index (Complete List)

Format:组件名 — Purpose | Scenario Tags

💬 TextAnimations (Text Animations)

Component	Purpose	Scenario
ASCIIText	ASCII character art text	Geek style, creative landing page
BlurText	Blur fade-in text animation	Hero title, first screen
CircularText	Circular rotating text	Badge, Logo decoration
CountUp	Number increment animation	Data statistics, achievement display
CurvedLoop	Curved looping text	Brand slogan, decoration
DecryptedText	Decryption effect text	Tech feel, security theme
FallingText	Physics falling text	Fun interaction, game style
FuzzyText	Blur jitter text	Artistic title
GlitchText	Glitch style text	Cyberpunk, tech feel
GradientText	Gradient color text	Brand title, emphasized copy
RotatingText	Text carousel switching	Multi-purpose description, Tagline
ScrambledText	Garbled decode text	Hover interaction, reveal
ScrollFloat	Scroll floating text	Long page, reading experience
ScrollReveal	Scroll fade-in text	Content area title
ScrollVelocity	Speed-feel scrolling text	Marquee, brand display
ShinyText	Gloss sweep text	CTA button copy, badge
Shuffle	Text shuffle animation	List switching, random display
SplitText	Character/word split animation	First screen title motion effect
TextCursor	Cursor-following text	Typewriter effect
TextPressure	Mouse pressure-sensitive text	Interactive title
TextType	Typewriter effect	Code display, Bot message
TrueFocus	Focus highlight text	Keyword emphasis
VariableProximity	Mouse distance distortion text	Interactive Hero

🌀 Animations (Animations/Motion Effects)

Component	Purpose	Scenario
AnimatedContent	Content enter/exit animation	General content motion effect wrapper
Antigravity	Anti-gravity floating effect	Creative display
BlobCursor	Fluid cursor following	Global cursor beautification
ClickSpark	Click spark effect	Click feedback, fun interaction
Crosshair	Crosshair cursor	Precision/tech theme
Cubes	3D cube animation	Tech background, loading
ElectricBorder	Electric current border effect	Card/button highlight
FadeContent	Fade in/out content	General content switching
GhostCursor	Ghost cursor following	Cursor trail effect
GlareHover	Glare hover effect	Card Hover
GradualBlur	Progressive blur animation	Content fade-in
ImageTrail	Image trailing effect	Creative gallery, art
LaserFlow	Laser flow effect	Tech-style border
LogoLoop	Logo infinite loop	Partner brand showcase
Magnet	Magnetic effect	Button/element interaction
MagnetLines	Magnetic line animation	Interactive background
MetaBalls	Metaball effect	Abstract art, loading
MetallicPaint	Metallic paint texture	High-end texture showcase
Noise	Noise/grain effect	Texture overlay
OrbitImages	Orbiting image rotation	Product/team showcase
PixelTrail	Pixel trail	Cursor effect
PixelTransition	Pixelated transition	Image/page switching
Ribbons	Ribbon flutter effect	Decorative background
ShapeBlur	Shape blur animation	Abstract decoration
SplashCursor	Ink splash cursor effect	Creative/art sites
StarBorder	Starlight border animation	Card/button decoration
StickerPeel	Sticker peel effect	Playful card interaction
TargetCursor	Targeting cursor	Game/competitive theme

🧩 Components (UI components)

Component	Purpose	Scenario
AnimatedList	List entrance animation	Dynamic lists, notification streams
BounceCards	Bouncing card group	Team/product showcase
BubbleMenu	Bubble pop-up menu	Floating toolbar
CardNav	Card navigation	Category navigation
CardSwap	Card flip switching	Before/After comparison
Carousel	Carousel component	Image/content carousel
ChromaGrid	Color grid	Image grid display
CircularGallery	Circular gallery	Portfolio showcase
Counter	Animated counter	Statistics display
DecayCard	Decay card	Timeline/history
Dock	macOS-style Dock	Bottom navigation bar
DomeGallery	Dome gallery	Immersive gallery
ElasticSlider	Elastic slider	Range selector
FlowingMenu	Flowing menu	Full-screen navigation
FluidGlass	Fluid glass effect	Frosted glass card
FlyingPosters	Flying poster	Work/product showcase
Folder	Folder component	File management UI
GlassIcons	Glassmorphic icons	Function icon group
GlassSurface	Glass-textured surface	Frosted glass container
GooeyNav	Sticky navigation	Bottom tab navigation
InfiniteMenu	Infinite scroll menu	3D menu
Lanyard	Lanyard/tag	Personal business card
MagicBento	Magic Bento grid	Feature showcase grid
Masonry	Masonry layout	Image/Work Masonry
ModelViewer	3D Model Viewer	Product 3D Display
PillNav	Capsule Navigation	Tab Switching
PixelCard	Pixel-Style Card	Game/Retro Style
ProfileCard	Profile Card	User/Team Display
ReflectiveCard	Reflection Card	High-End Product Display
ScrollStack	Scroll Stacking	Feature Layer-by-Layer Display
SpotlightCard	Spotlight Card	Core Feature Display
Stack	Stacked Cards	Notification/Message Stacking
StaggeredMenu	Staggered Entrance Menu	Mobile Menu
Stepper	Step Bar	Form Flow/Onboarding
TiltedCard	Tilt Card	3D Parallax Card

🖼️ Backgrounds (Dynamic Backgrounds)

Component	Purpose	Scenario
Aurora	Aurora Background	Hero, Dark Theme
Balatro	Playing Card Texture Background	Game/Fun
Ballpit	Ball Pit Physics Effect	Fun/Creative
Beams	Light Beam Effect	Tech/SaaS
ColorBends	Color Bending	Art/Creative
DarkVeil	Dark Curtain Background	Dark Hero
Dither	Dither/Dot Matrix	Retro Style
DotGrid	Dot Matrix Grid	Minimal/Technical Documentation
FaultyTerminal	Glitch Terminal	Developer/Hacker Style
FloatingLines	Floating Lines	Minimal/Business
Galaxy	Galaxy Background	Space/Sci-Fi
GradientBlinds	Gradient Blinds	Transition Area
Grainient	Noise Gradient	High-End/Texture
GridDistortion	Grid Distortion	Interactive Background
GridMotion	Grid Motion	Image Grid Background
GridScan	Grid Scan	Tech/Security
Hyperspeed	Hyperspeed Interstellar	Loading/Transition
Iridescence	Iridescent Effect	High-End/Fashion
LetterGlitch	Letter Glitch	Tech Background
LightPillar	Light Pillar Effect	Focus/Highlight
LightRays	Light Rays	Showcase/Launch
Lightning	Lightning Effect	Power/Energy
LiquidChrome	Liquid Chrome	High-End/Metal
LiquidEther	Liquid Ether	Dreamy/Flowing
Orb	Light Orb	Decoration/Background Accent
Particles	Particle Effect	General Tech Background
PixelBlast	Pixel Explosion	Game/Impact
PixelSnow	Pixel Snowflakes	Seasonal/Holiday
Plasma	Plasma	Sci-Fi/Energy
Prism	Prism Refraction	Color/Art
PrismaticBurst	Prism Burst	Launch/Celebration
RippleGrid	Ripple Grid	Interactive Background
Silk	Silk Flow	Elegant/Fashion
Squares	Block Animation	Minimalist/Geometric
Threads	Threads/Fibers	Tech/Connection
Waves	Wave Effect	Section Transition

Scenario→Component Quick Reference

Scenario Requirement	Recommended Combination
Hero First Screen	Aurora/SilkBackground + BlurText/SplitTextHeading + ShinyText CTA
Feature Display	SpotlightCard/MagicBentoCards + CounterStatistics + GlareHoverHover
Team/Works	CircularGallery/MasonryGallery + ProfileCardProfile Card
Brand Partnership	LogoLoopBrand Wall + ScrollVelocityMarquee
Pricing Page	TiltedCard/ReflectiveCardPricing Card + StarBorderRecommended Badge
Navigation/Menu	Dock/PillNav/GooeyNavNavigation + FlowingMenuFullscreen Menu
Tech/Developer	FaultyTerminal/ParticlesBackground + DecryptedText/GlitchTextText
Data Statistics	CountUpNumbers + CounterComponents + AnimatedListList

Code Output Template

Hero Section Template

import { Aurora } from "./components/Aurora";
import { BlurText } from "./components/BlurText";
import { ShinyText } from "./components/ShinyText";

export default function HeroSection() {
  return (
    <section className="relative min-h-screen overflow-hidden bg-black">
      {/* 背景层 */}
      <Aurora
        colorStops={["#3A29FF", "#FF94B4", "#FF3232"]}
        blend={0.5}
        amplitude={1.0}
        speed={0.5}
      />

      {/* 内容层 */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen gap-6 px-4">
        <BlurText
          text="Build Something Amazing"
          delay={150}
          animateBy="words"
          className="text-5xl md:text-7xl font-bold text-white text-center"
        />
        <p className="text-lg text-white/70 max-w-2xl text-center">
          Ship stunning interfaces faster with production-ready animated
          components.
        </p>
        <button className="mt-4 px-8 py-3 rounded-full bg-white/10 backdrop-blur border border-white/20 hover:bg-white/20 transition">
          <ShinyText
            text="Get Started →"
            speed={3}
            className="text-white font-medium"
          />
        </button>
      </div>
    </section>
  );
}

Feature Cards Template

import { SpotlightCard } from "./components/SpotlightCard";
import { GlareHover } from "./components/GlareHover";
import { CountUp } from "./components/CountUp";

const features = [
  { icon: "⚡", title: "Lightning Fast", desc: "Optimized for performance" },
  { icon: "🎨", title: "Beautiful UI", desc: "Pixel-perfect components" },
  { icon: "🔧", title: "Customizable", desc: "Tweak everything via props" },
];

export default function FeatureSection() {
  return (
    <section className="py-24 px-4 bg-neutral-950">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {features.map((f, i) => (
            <SpotlightCard
              key={i}
              className="p-8 rounded-2xl bg-neutral-900 border border-neutral-800"
            >
              <span className="text-4xl">{f.icon}</span>
              <h3 className="mt-4 text-xl font-semibold text-white">
                {f.title}
              </h3>
              <p className="mt-2 text-neutral-400">{f.desc}</p>
            </SpotlightCard>
          ))}
        </div>

        {/* 统计数据 */}
        <div className="mt-16 flex justify-center gap-16">
          <div className="text-center">
            <CountUp
              from={0}
              to={117}
              className="text-4xl font-bold text-white"
            />
            <p className="text-neutral-500 mt-1">Components</p>
          </div>
          <div className="text-center">
            <CountUp
              from={0}
              to={10000}
              separator=","
              className="text-4xl font-bold text-white"
            />
            <p className="text-neutral-500 mt-1">Downloads</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Multi-AI Tool Configuration Guide

Claude Code

Add this directory as a skill, and Claude will automatically read SKILL.md.

# 配置文件路径
~/.claude/skills/reactbits-ui-skills/SKILL.md

# 或使用环境变量
export CLAUDE_SKILLS_PATH=/path/to/skills

OpenCode

# 安装 skill
opcode skill add reactbits-ui-skills https://github.com/lumacoder/reactbits-ui-skills

# 或使用本地路径
opcode skill add reactbits-ui-skills /path/to/reactbits-ui-skills

Gemini CLI

# 在 .gemini/skills/ 目录下克隆
git clone https://github.com/lumacoder/reactbits-ui-skills.git ~/.gemini/skills/reactbits-ui-skills

# 或在配置中指定 skill 路径
echo '{"skills": ["/path/to/reactbits-ui-skills"]}' > ~/.gemini/config.json

GitHub Copilot

Add the contents of this SKILL.md to Copilot's custom instructions:

1. Open VS Code Settings
2. Search for "Copilot Instructions"
3. Add the path to this SKILL.md

Cursor

# 将 SKILL.md 内容添加到 Cursor 的 Project Rules
# 或创建 .cursor/rules/reactbits.mdc 文件

Important Notes

• Documentation Link：https://reactbits.dev/text-animations/{组件名} / https://reactbits.dev/animations/{组件名} / https://reactbits.dev/components/{组件名} / https://reactbits.dev/backgrounds/{组件名}
• Pro Components(65+ Blocks) requires a Pro License:https://pro.reactbits.dev
• Components are in copy-paste mode, with no npm package dependencies; copy the source code directly into the project
• Some components depend on framer-motion, so make sure it is installed in the project

Test Verification

Use the testing tool to verify the Skill functionality:

# 运行完整测试
node test/test-skill.js

# 在浏览器中打开交互式测试工具
test/interactive-test.html

Test contents include:

1. Skill File Structure Verification
2. Natural Language→Component Mapping Test
3. Example Code Generation
4. Antigravity Integration Check