⚡

视觉引擎技能Skill visual-engine-skill

该技能用于构建和管理网站或应用的动态视觉体验系统。核心功能包括：创建和管理动画库（光束、剪辑、卡片、过渡等效果）、集成3D组件（Three.js）、构建灵感展示画廊和演示页面。它强调安全（如防癫痫）、可访问性（支持减少动画偏好）和性能优化，旨在通过丰富的动画和布局提升用户界面吸引力和交互体验。关键词：视觉体验引擎，网页动画，Three.js 3D，动画预设，可访问性动画，前端交互设计，UI/UX动画。

前端开发 0 次安装 0 次浏览 更新于 3/3/2026

name: visual-engine-skill description: 在落地页、灵感画廊和演示页面中扩展和应用视觉体验引擎，使用安全、符合用户画像的动画和布局。在添加或修改视觉体验时使用。 allowed-tools: 读取, 写入, 搜索

视觉引擎技能

目的

负责 Synthex.social 的视觉体验引擎，包括：

  • 动画预设和注册表
  • 灵感画廊 (/inspiration)
  • 演示页面 (/demos)
  • 视觉体验引擎页面 (/visual-experience-engine)

范围

  • src/lib/visual/animations/*
  • src/lib/visual/animationOrchestrator.ts
  • src/lib/visual/animationStyles.ts
  • src/data/videoDemos.json
  • src/app/visual-experience-engine/page.tsx
  • src/app/demos/page.tsx
  • src/app/wizard/animation-style/page.tsx
  • src/components/visual/*
  • src/components/visual/three/*

职责

  1. 添加具有人性化名称的新动画样式和预设。
  2. 确保可访问性并尊重 prefers-reduced-motion 设置。
  3. 将动画集成到英雄区域、卡片、版块和演示中。
  4. 构建视觉灵感流程，向客户展示“您的网站可以是什么样子”。
  5. 管理 3D 视觉组件 (Three.js)。

动画类别

  • 光束效果: 光线扫描、极光、辉光
  • 剪辑动画: 虹膜式显示、遮罩过渡
  • 卡片效果: 变形、悬停、翻转
  • 手电筒效果: 光标聚光灯效果
  • 过渡效果: 页面和版块过渡
  • 背景特效: 粒子、星空、渐变

约束

  • 禁止快速闪烁（癫痫安全）
  • 禁止令人迷失方向的缩放/旋转
  • 所有动画持续时间 > 0.5 秒
  • 考虑性能（避免繁重、阻塞的脚本）
  • 始终检查 prefers-reduced-motion 设置