166 lines
6.0 KiB
Markdown
166 lines
6.0 KiB
Markdown
# Vue-Bits Skill
|
||
|
||
基于 [vue-bits.dev](https://vue-bits.dev) 极简创意设计哲学的 Vue 3 组件开发技能。专为消除 AI 生成前端代码的模板化、同质化问题而设计。
|
||
|
||
## 设计哲学
|
||
|
||
- **少即是多** — 移除一切不必要的装饰元素
|
||
- **沉浸式交互** — 组件响应鼠标、滚动，让页面"活"起来
|
||
- **精致的克制** — 动画服务于内容，是微妙的视觉增强，而非喧宾夺主
|
||
- **暗色优先** — 大多数组件内置 `dark` prop，无缝配合 Tailwind `dark:` 类
|
||
- **高性能** — 基于 `requestAnimationFrame`，GPU 加速，零依赖或极简依赖
|
||
|
||
## 组件分类
|
||
|
||
### 动画 (Animations)
|
||
| 组件 | 描述 |
|
||
|------|------|
|
||
| Splash Cursor | 鼠标驱动的流体色彩扩散 (WebGL 流体模拟) |
|
||
| Text Scramble | 终端风格字符随机化渐变为目标文本 |
|
||
| Profile Card | 3D 卡片沿椭圆轨道旋转，带物理惯性 |
|
||
| Infinite Menu | 圆形按钮点击后弹性分裂为多个子项 |
|
||
| Circular Gallery | 元素排列于圆形轨道，拖拽旋转，支持自动滚动 |
|
||
| AnimatedContent | 内容区域的进入/离开过渡动画 |
|
||
|
||
### 文本动画 (Text Animations)
|
||
| 组件 | 描述 |
|
||
|------|------|
|
||
| Curved Loop | 文字沿 SVG `<textPath>` 曲线路径无限滚动 |
|
||
| SplitText | 逐字/逐词飞入动画 (GSAP 风格，可配置交错延迟) |
|
||
| Text Pressure | 压力/变形文本效果 |
|
||
| Neon | 霓虹灯管发光文本，可配置颜色和闪烁 |
|
||
| Typewriter | 逐字符打字效果 |
|
||
| Kaleidoscope | 万花筒式文本变换 |
|
||
| Flow Light | 流光扫过式跑马灯文本效果 |
|
||
|
||
### 背景 (Backgrounds)
|
||
| 组件 | 描述 |
|
||
|------|------|
|
||
| Pixel Blast | 深层粒子宇宙，像素簇呼吸/聚合，鼠标响应 |
|
||
| Grid Distortion | 网格扭曲/变形，涟漪式图案扰动 |
|
||
| Hyperspeed | 赛博朋克隧道穿越，滚轮透视拉伸 |
|
||
| Silk | 丝绸般流畅的动态背景 |
|
||
| Sparkles | 星光粒子闪烁背景，可配置密度和颜色 |
|
||
| Neon Grid | 霓虹灯管质感网格背景 |
|
||
| Ripple | 涟漪扩散背景 |
|
||
| FaultyTerminal | 老式终端 CRT 闪烁/故障效果背景 |
|
||
|
||
### UI 组件
|
||
| 组件 | 描述 |
|
||
|------|------|
|
||
| GradientButton | 渐变按钮，hover 缩放，可配置颜色断点 |
|
||
| Infinite Menu | 无限滚动菜单 |
|
||
| Circular Gallery | 圆形图片画廊 |
|
||
| Profile Card | 3D 个人资料卡片 |
|
||
|
||
## 触发方式
|
||
|
||
当你向 Claude Code 描述以下任意需求时，此技能将**自动激活**：
|
||
|
||
- 开发任何 Vue 前端组件
|
||
- 提到关键词：动画、动效、文本动画、背景、组件、UI
|
||
- 优化现有前端界面或组件
|
||
- 任何与前端视觉呈现或交互效果相关的请求
|
||
|
||
## 工作流程
|
||
|
||
技能激活后遵循严格的流程：
|
||
|
||
1. **停止所有代码生成** — 不会立即输出代码
|
||
2. **设计偏好询问** — 通过标准问卷了解你的需求：
|
||
- 视觉风格偏好（极简现代、赛博朋克、复古怀旧、玻璃拟态等）
|
||
- 动画效果类型（无限循环、悬停触发、滚动触发等）
|
||
- 交互功能需求（可拖拽、响应式、深色模式等）
|
||
- 配色方案和字体要求
|
||
3. **确认后开发** — 仅在你明确回复偏好后才开始编写组件
|
||
|
||
## 质量标准
|
||
|
||
### 设计准则
|
||
- 严格遵循 vue-bits.dev "少即是多" 的设计哲学
|
||
- 动画稳定在 60fps，避免生硬过渡和过度动效
|
||
- 配色满足 WCAG 无障碍对比度标准
|
||
- 组件高度可定制，Props 接口清晰
|
||
- 默认支持暗色模式
|
||
|
||
### 代码规范
|
||
- Vue 3 Composition API + `<script setup>` 语法
|
||
- 完整 TypeScript 类型定义
|
||
- CSS 自定义属性用于主题定制
|
||
- 使用 `requestAnimationFrame` 替代 `setInterval`
|
||
- GPU 加速属性优先：`transform`、`opacity`
|
||
- 支持 `prefers-reduced-motion` 媒体查询
|
||
|
||
### 通用 Props 模式
|
||
|
||
```typescript
|
||
interface VueBitsComponentProps {
|
||
// 视觉
|
||
colorFrom?: string // 渐变起始色
|
||
colorTo?: string // 渐变结束色
|
||
dark?: boolean // 暗色模式开关
|
||
// 动画
|
||
duration?: number // 动画时长 (秒)
|
||
delay?: number // 交错延迟 (秒)
|
||
ease?: string // 缓动函数
|
||
threshold?: number // IntersectionObserver 阈值 (0-1)
|
||
// 行为
|
||
paused?: boolean // 暂停动画
|
||
repeat?: number | 'indefinite'
|
||
// 内容
|
||
text?: string // 文本内容
|
||
className?: string // 额外 CSS 类
|
||
}
|
||
```
|
||
|
||
### CSS 自定义属性约定
|
||
|
||
```css
|
||
.component-root {
|
||
--vb-color-from: #6366f1;
|
||
--vb-color-to: #a855f7;
|
||
--vb-duration: 1.5s;
|
||
--vb-delay: 0s;
|
||
--vb-ease: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--vb-font-size: 1rem;
|
||
--vb-gap: 0.5rem;
|
||
}
|
||
```
|
||
|
||
## 性能优化检查清单
|
||
|
||
- `requestAnimationFrame` 而非 `setInterval`
|
||
- 仅动画化 GPU 属性：`transform`、`opacity`、`filter`
|
||
- 谨慎使用 `will-change`，动画结束后移除
|
||
- 使用 `contain: layout style paint` 隔离重绘范围
|
||
- `IntersectionObserver` 暂停屏幕外动画
|
||
- 响应 `prefers-reduced-motion` 用户偏好
|
||
- 简单路径动画优先使用 SVG（可访问性更好）
|
||
- 使用 `requestAnimationFrame` 作为自然的 resize/mousemove 节流
|
||
|
||
## 禁止行为
|
||
|
||
- **绝不**在询问用户偏好前生成组件代码
|
||
- **绝不**生成模板化、千篇一律的 AI 风格代码
|
||
- **绝不**使用过于复杂或晦涩的代码结构
|
||
- **绝不**添加用户未明确要求的功能
|
||
- **绝不**输出不完整或无法运行的代码
|
||
- **绝不**使用 `<marquee>` 等已废弃的 HTML 元素
|
||
- **绝不**硬编码颜色 — 始终使用 CSS 自定义属性或 Props
|
||
- **绝不**跳过 TypeScript 类型定义
|
||
- **绝不**动画化会触发布局的属性 (`width`、`height`、`margin` 等)
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
vue-bits/
|
||
├── SKILL.md # 技能定义与完整规则
|
||
├── README.md # 本文件
|
||
└── reference/
|
||
└── implementation-patterns.md # 核心实现模式参考
|
||
```
|
||
|
||
## 许可
|
||
|
||
本技能遵循 [vue-bits.dev](https://vue-bits.dev) 的设计哲学，用于在 Claude Code 中构建高质量 Vue 3 组件。
|