animate-css-skill は何をしますか？
Animate.css v4.1.1 のアニメーションを HTML、React/JSX、WordPress PHP テンプレートに追加する Claude Code スキル。スクロールトリガー、RTL、縮小動作に対応。
概要
このスキルを使用すると、Claude Code の会話内で Animate.css のアニメーションを迅速に実装できます。HTML 要素、React コンポーネント、WordPress テンプレートのいずれでも、適切なクラスと属性を追加するだけでアニメーション効果が適用されます。
主な機能
- Animate.css v4.1.1 の全アニメーションクラスに対応
- スクロールトリガー: 要素がビューポートに入ったときにアニメーションを開始
- RTL サポート: 右横書き言語のレイアウトに自動対応
- 縮小動作サポート: ユーザーの
prefers-reduced-motion設定を尊重 - 複数フレームワーク対応: HTML、React/JSX、WordPress PHP で動作
使い方
HTML での使用例
<div class="animate__animated animate__fadeIn">
こんにちは、世界！
</div>
React/JSX での使用例
import 'animate.css';
function MyComponent() {
return (
<div className="animate__animated animate__bounceIn">
アニメーション付き React コンポーネント
</div>
);
}
WordPress PHP での使用例
<div class="animate__animated animate__slideInLeft">
<?php echo esc_html( get_the_title() ); ?>
</div>
スクロールトリガー
スクロールトリガーを使用するには、data-animate 属性を追加します。
<div class="animate__animated" data-animate="fadeInUp">
スクロールで表示
</div>
設定オプション
| オプション | 説明 | デフォルト値 |
|---|---|---|
data-animate-delay | アニメーション開始の遅延（ミリ秒） | 0 |
data-animate-duration | アニメーションの持続時間（ミリ秒） | 1000 |
data-animate-offset | トリガーオフセット（ピクセル） | 0 |
環境変数
ANIMATE_CSS_VERSION: 使用する Animate.css のバージョン（デフォルト:4.1.1）
インストール
Claude Code にこのスキルを追加するには、以下のコマンドを使用します。
claude add-skill msrbuilds/animate-css-skill
ライセンス
MIT