xkyy/xk-gw

Fork 0

Files

李琦 6d1e1f08dc 初始化

2026-07-23 16:15:11 +08:00

6.0 KiB

Raw Permalink Blame History

Vue-Bits Skill

基于 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
优化现有前端界面或组件
任何与前端视觉呈现或交互效果相关的请求

工作流程

技能激活后遵循严格的流程：

停止所有代码生成 — 不会立即输出代码
设计偏好询问 — 通过标准问卷了解你的需求：
- 视觉风格偏好（极简现代、赛博朋克、复古怀旧、玻璃拟态等）
- 动画效果类型（无限循环、悬停触发、滚动触发等）
- 交互功能需求（可拖拽、响应式、深色模式等）
- 配色方案和字体要求
确认后开发 — 仅在你明确回复偏好后才开始编写组件

质量标准

设计准则

严格遵循 vue-bits.dev "少即是多" 的设计哲学
动画稳定在 60fps，避免生硬过渡和过度动效
配色满足 WCAG 无障碍对比度标准
组件高度可定制，Props 接口清晰
默认支持暗色模式

代码规范

Vue 3 Composition API + <script setup> 语法
完整 TypeScript 类型定义
CSS 自定义属性用于主题定制
使用 requestAnimationFrame 替代 setInterval
GPU 加速属性优先：transform、opacity
支持 prefers-reduced-motion 媒体查询

通用 Props 模式

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 自定义属性约定

.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 的设计哲学，用于在 Claude Code 中构建高质量 Vue 3 组件。

6.0 KiB Raw Permalink Blame History Unescape Escape