用途：该技能面向前端页面与 UI 组件开发，要求在实现可视化或动效需求时优先从 React Bits 组件库中选择组件组合，产出可直接复制使用的标准化代码片段。它只聚焦页面/组件代码，不涉及脚手架、路由与构建配置。
主要能力：支持自然语言理解，从用户描述中解析页面类型、视觉风格、区块需求与动效强度，再匹配对应组件。内置关键词映射（如极光背景→Aurora、粒子效果→Particles、鼠标跟随光效→SpotlightCard、数字滚动→CountUp、macOS 导航→Dock）与场景组合推荐（SaaS 落地页、数据大屏、作品集、科技官网、赛博朋克、极简商务）。组件按 TextAnimations、Animations、Components、Backgrounds 分类，涵盖文字动画、光标特效、导航、画廊与动态背景等。
使用方式：默认使用 TS + Tailwind 变体，用户明确要求时可切换。产出完整 TSX 代码块，包含 import、Props 与样式，并为组件标注文档链接。安装命令示例：npx shadcn@latest add "@react-bits/BlurText-TS-TW" 或 npx jsrepo add github/DavidHDev/react-bits/TextAnimations/BlurText。可将该目录添加为 Claude Code、OpenCode、Gemini CLI、GitHub Copilot、Cursor 等工具的 skill 或自定义指令。
适用场景：Hero 首屏、功能展示、数据统计、定价页、团队/作品画廊、品牌合作墙、导航菜单、科技风与开发者主题页面等。
限制：组件为 copy-paste 模式，无 npm 包依赖；部分组件依赖 framer-motion，需确保项目已安装；Pro 版组件（65+ Blocks）需 Pro License；资料未提供具体收费价格与效果承诺。