visual-engine-skill
Erstellen Sie atemberaubende Animationen und visuelle Effekte
Fügen Sie polierte Animationen zu Landingpages und Demos hinzu, ohne Leistung oder Barrierefreiheit zu beeinträchtigen. Die Visual Engine Skill übernimmt automatisch Timing, Easing und sichere Bewegungsmuster.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「visual-engine-skill」を使用しています。 Fügen Sie einen Glow-Effekt zum CTA-Button hinzu, der bei Hover ausgelöst wird
期待される結果:
- Strahleneffekt-Animation auf CTA-Button angewendet
- Dauer auf 0,5s (sichere Mindestdauer) eingestellt
- Easing: ease-out für sanftes Ausblenden
- prefers-reduced-motion-Prüfung hinzugefügt
- Leistung: Verwendet nur transform/opacity
「visual-engine-skill」を使用しています。 Erstellen Sie einen Seitenübergang für den Demos-Bereich
期待される結果:
- Iris-Reveal-Clip-Animation implementiert
- Übergangsdauer: 0,6 Sekunden
- Barrierefreiheits-Bypass für prefers-reduced-motion hinzugefügt
- Auf mobilen und Desktop-Viewports getestet
セキュリティ監査
安全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)
品質スコア
作れるもの
Animationen zu Landingpages hinzufügen
Vorgefertigte Animationsvoreinstellungen in Hero-Bereiche, Karten und Demoseiten einbinden
Visuelle Inspirationsgalerien erstellen
Kundenorientierte Demos erstellen, die zeigen, wie ihre Website mit Motion Design aussehen könnte
Three.js 3D-Visuals implementieren
3D-Visuals-Komponenten mit sicheren, leistungsoptimierten Animation-Mustern hinzufügen
これらのプロンプトを試す
Fügen Sie eine sanfte Hover-Animation zu den Feature-Karten mit dem Strahleneffekt-Preset hinzu
Erstellen Sie einen Seitenübergang mit der Iris-Reveal-Clip-Animation
Fügen Sie einen 3D-Partikel-Hintergrund mit dem Sternenfeld-Effekt zum Hero-Bereich hinzu
Erstellen Sie einen visuellen Inspirationsgalerie-Flow, der 5 verschiedene Animationsstil-Optionen zur Kundenüberprüfung zeigt
ベストプラクティス
- Respektieren Sie immer die prefers-reduced-motion-Barrierefreiheitseinstellung
- Halten Sie alle Animationsdauern über 0,5 Sekunden für Sicherheitskonformität
- Verwenden Sie nur CSS-Transforms und Opacity für optimale Leistung
回避
- Schnell blinkende Animationen verwenden, die photosensitive Epilepsie auslösen können
- Desorientierende Zoom- oder Rotationseffekte hinzufügen
- Blockierende JavaScript-Animationen implementieren, die den Hauptthread einfrieren