visual-engine-skill
印象的なアニメーションと視覚効果を作成する
パフォーマンスやアクセシビリティを損なうことなく、ランディングページやデモに、洗練されたアニメーションを追加します。Visual Engineスキルはタイミング、イージング、安全なモーションパターンを自動的に処理します。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「visual-engine-skill」。 ホバー時にトリガーされるCTAボタンにグローエフェクトを追加する
預期結果:
- CTAボタンに適用されたBeamエフェクトアニメーション
- 持続時間: 0.5秒（最小安全持続時間）
- イージング: スムーズな退出のためのease-out
- prefers-reduced-motionチェックを追加
- パフォーマンス: transform/opacityのみを使用
正在使用「visual-engine-skill」。 デモセクション用のページトランジションを作成する
預期結果:
- 実装されたアイリスrevealクリップアニメーション
- トランジション持続時間: 0.6秒
- prefers-reduced-motionのアクセシビリティバイパスを追加
- モバイルおよびデスクトップビューポートでテスト済み
安全審計
安全This is a documentation-only skill containing no executable code. All 29 static findings are false positives. The analyzer incorrectly scanned its own output file (skill-report.json) and misinterpreted markdown formatting (backticks) as shell execution patterns. Findings labeled as C2 keywords, cryptographic algorithms, and system reconnaissance are actually common words, metadata, and accessibility documentation. The skill uses only Read, Write, Search tools and defines animation guidelines for a visual experience engine.
風險因素
🌐 網路存取 (1)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
ランディングページへのアニメーションの追加
事前構築されたアニメーションプリセットをヒーローセクション、カード、デモページに組み込む
視覚的なインスピレーションギャラリーの作成
クライアント向けデモを構築し、モーションデザインを使用したサイトの外観の可能性を示す
Three.js 3Dビジュアルの実装
安全でパフォーマンスの高いアニメーションパターンを使って3Dビジュアルコンポーネントを追加する
試試這些提示
Beamエフェクトプリセットを使用して、機能カードにスムーズなホバーアニメーションを追加する
アイリスrevealクリップアニメーションを使用してページトランジションを作成する
Starfieldエフェクトを使用してヒーローセクションに3Dパーティクル背景を追加する
クライアントレビュー用に5つの異なるアニメーションスタイルオプションを表示する視覚的インスピレーションギャラリーフローを構築する
最佳實務
- 常にprefers-reduced-motionアクセシビリティ設定を徹底する
- 安全コンプライアンスのため、アニメーション持続時間を0.5秒以上に保つ
- 最適なパフォーマンスのためにCSS transformsとopacityのみを使用する
避免
- 光感受性発作を引き起こす可能性のある急速な点滅アニメーションを使用する
- 混乱させるzoomまたはrotateエフェクトを追加する
- メインスレッドをフリーズさせるブロッキングJavaScriptアニメーションを実装する