スキル animate

📦

animate

Name: animate
Author: pbakaus

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

目的のあるUIアニメーションを追加する

静的なインターフェイスは、状態変化の際に唐突で分かりにくく感じられることがあります。このスキルは、使いやすさを向上させる場面で、Claude、Codex、Claude Codeがアクセシブルで高性能なモーションを追加できるように導きます。

対応: Claude Codex Code(CC)

🥉 78 ブロンズ

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "animate" from https://skillstore.io/skills/pbakaus-animate.md and its manifest at https://skillstore.io/api/skills/pbakaus-animate/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/pbakaus-animate.md 署名済み manifest GET /api/skills/pbakaus-animate/manifest 署名済み lockfile GET /api/skills/pbakaus-animate/lockfile

テストする

「animate」を使用しています。設定モーダルのアニメーション機会をレビューする。

期待される結果:

モーダルはすばやくフェードしながらスライドインし、フォーカスはダイアログ内へ移動するべきです。
主要ボタンには短い押下反応が必要で、バリデーションメッセージは穏やかな遷移で表示されるべきです。
reduced-motionユーザーには、装飾的な動きのない即時の状態変化を提供するべきです。

「animate」を使用しています。ダッシュボードでのタブ切り替えを改善する。

期待される結果:

セクション間の空間的な文脈を保つために、スライドするタブインジケーターを使用します。
繰り返しの切り替えが高速に感じられるよう、短い時間でコンテンツ変更をフェードさせます。
ダッシュボードのユーザーには効率的なスキャンが必要なため、視差効果や長い遷移は避けます。

「animate」を使用しています。ページ読み込みアニメーションの品質を監査する。

期待される結果:

主要な表示演出は800ms未満に抑え、副次的なコンテンツは小さな間隔で段階的に表示します。
transformとopacityのみをアニメーションさせ、その後ターゲットデバイスで滑らかに動作することを確認します。
reduced-motion設定が有効な場合でも体験が機能することを確認します。

セキュリティ監査

安全

v4 • 2026/7/6 バージョン別レポートを開く

The static findings are false positives caused by Markdown code fences and inline code spans in SKILL.md. The skill provides frontend animation guidance and contains no evidence of shell execution, reconnaissance, prompt injection, or data exfiltration.

スキャンされたファイル

191

解析済み行数

レビュー項目

誤検知を無視

リスク要因

⚙️ 外部コマンド (11)

SKILL.md:51 SKILL.md:124-133 SKILL.md:133-138 SKILL.md:138-143 SKILL.md:143-146 SKILL.md:146-151 SKILL.md:151-154 SKILL.md:154 SKILL.md:156-160 SKILL.md:160-168 SKILL.md:168-175

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/pbakaus-animate/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/pbakaus-animate/security.svg)](https://skillstore.io/skills/pbakaus-animate?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/pbakaus-animate?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/pbakaus-animate/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/pbakaus-animate.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

pbakaus. (2026). animate security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/pbakaus-animate/audits/4

BibTeX形式の引用

@techreport{pbakaus-pbakaus-animate-2026,
  author = {pbakaus},
  title = {animate security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/pbakaus-animate/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "animate security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "pbakaus"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/pbakaus-animate/audits/4"
identifiers:
  - type: other
    value: "skillstore:pbakaus-animate:audit:4"
    description: "Skillstore immutable audit report identifier"

バリアントを比較

インストール可能なバリアント 2 件

各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。

このバリアントが首位の理由

Skillstore スコアが最高

作者 / ソース Skillstore スコア証拠の信頼度 Skillstore 利用状況更新済み

pbakaus 推奨現在

pbakaus-animate

Skillstore スコア 78

証拠の信頼度高

Skillstore 利用状況 20

更新済み

2026-09-09

emilkowalski

emilkowalski-animate

Skillstore スコア 77

証拠の信頼度中

Skillstore 利用状況 2

更新済み

2026-09-09

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

プロダクトワークフローを磨き込む

ユーザーの注意をそらさずに、フォーム、ダッシュボード、反復操作へ控えめなフィードバックと遷移を追加します。

フロントエンドコンポーネントを改善する

より明確なモーションとフィードバックが必要なボタン、モーダル、タブ、読み込み状態を特定します。

モーションのアクセシビリティを監査する

アニメーションがreduced-motion設定を尊重し、疲れや操作の妨げを引き起こさないことを確認します。

これらのプロンプトを試す

1つのコンポーネントをレビューする

animateスキルを使用してこのコンポーネントをレビューし、フィードバックと明確さを向上させる目的のあるマイクロインタラクションを提案してください。

フロー向けのモーションを計画する

animateスキルを使用して、このユーザーフローのアニメーション計画を作成してください。登場、フィードバック、状態遷移を含めてください。

アクセシブルなモーションを実装する

animateスキルを使用して、この機能にアクセシブルなアニメーションを追加してください。reduced-motion対応とパフォーマンス制約を含めてください。

モーションシステムを洗練する

animateスキルを使用してこのインターフェイスを監査し、そのモーションシステムに一貫したタイミング、イージング、インタラクションルールを定義してください。

ベストプラクティス

モーションを追加する前に、対象ユーザー、ユースケース、ブランドトーン、パフォーマンス制約から始めます。
フィードバック、状態変化、階層、ナビゲーションを明確にするためにアニメーションを使用します。
常にreduced-motion設定をサポートし、ターゲットデバイスでパフォーマンスを確認します。

回避

明確なユーザーメリットなしに、あらゆる場所へアニメーションを追加すること。
インターフェイスを遅く感じさせる長いフィードバックアニメーションを使用すること。
transformやopacityで効果を実現できる場合に、レイアウトプロパティをアニメーションさせること。

よくある質問

このスキルは何のアニメーションに役立ちますか？

コンポーネント、フロー、状態変化、読み込み状態、モーダル、ナビゲーション、マイクロインタラクションの改善に役立ちます。

本番環境ですぐ使えるコードを書きますか？

実装ガイダンスを提供し、編集を導く場合もありますが、スキル自体は指示のみです。

アクセシビリティにはどのように対応しますか？

reduced-motionの代替手段を必須とし、ユーザーの操作を妨げたり疲れさせたりするモーションに注意を促します。

どの技術に言及していますか？

CSS transitions、keyframes、Web Animations API、Framer Motion、GSAPに言及します。

本格的なビジネスソフトウェアに適していますか？

はい。視覚的な楽しさよりも前に、目的のあるモーション、抑制、パフォーマンス、ユーザー文脈を重視します。

使用前にユーザーは何を提供するべきですか？

利用可能な場合、ユーザーは対象機能、対象ユーザー、ユースケース、ブランドトーン、パフォーマンス制約を提供するべきです。

開発者情報

作成者

pbakaus

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/pbakaus/impeccable/tree/main/source/skills/animate/

参照

e397ce5a135369cd6def89cb6400d013e2f68f2f

メンテナンスの新しさ

2026/7/18

利用状況

12 ダウンロード · 155 閲覧

ファイル構成

Check designs with deterministic CSS rules

作成者 cubha

Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.

デザイン＆クリエイティブ表示

animate

自分のエージェントでインストール

エージェントが読めるリソース

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

バリアントを比較

Skillstore スコア

作成できるもの

プロダクトワークフローを磨き込む

フロントエンドコンポーネントを改善する

モーションのアクセシビリティを監査する

これらのプロンプトを試す

ベストプラクティス

回避

よくある質問

開発者情報

pbakaus のその他のスキル

shape

teach-impeccable

delight

onboard

distill

layout

関連スキル

designing-frontend

brag

ui-styling

web-accessibility

ux-designer

design-lint