·ui-enhance-animate
*

ui-enhance-animate

サイトの既存のカラー パレットを維持しながら、既存の Web サイトの UI デザインを包括的にアップグレードして磨き上げ、レイアウト、タイポグラフィ、間隔、深さ、視覚的な階層、コンポーネントの洗練を改善します。また、要素がビューポートに入ったときにトリガーされるフレーマー モーション (またはプレーン HTML の場合は CSS) を使用して、スムーズな千鳥状のぼかし + スライドアップのリビール アニメーションを追加します。ユーザーが既存の Web サイトまたは React/HTML ページを改善、最新化、洗練、またはアニメーション化したい場合は常に、このスキルを使用します。ユーザーが「見た目を良くする」、「アニメーション化する」、「デザインを改善する」、「UI をアップグレードする」、「よりモダンにする」、または「スクロール アニメーションを追加する」とだけ言及した場合でもトリガーされます。このスキルはアニメーションだけでなく、それらすべてを処理します。

14インストール·1トレンド·@zaaakher

インストール

$npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate

ui-enhance-animate のインストール方法

コマンドラインで ui-enhance-animate AI スキルを開発環境にすばやくインストール

  1. ターミナルを開く: ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます
  2. インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate
  3. インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソース: zaaakher/agent-skills。

This skill performs a full design upgrade of an existing website or component. It is NOT just about adding animations — it is a holistic visual refinement pass that touches typography, spacing, layout, depth, micro-interactions, and motion. The existing color palette is preserved; everything else can and should be improved.

Before writing a single line of code, do a thorough read of the existing code. Extract and note:

Apply ALL of the following improvements that are relevant to the site. Be thorough — don't skip sections because they "look okay". Every part of the site should be elevated.

サイトの既存のカラー パレットを維持しながら、既存の Web サイトの UI デザインを包括的にアップグレードして磨き上げ、レイアウト、タイポグラフィ、間隔、深さ、視覚的な階層、コンポーネントの洗練を改善します。また、要素がビューポートに入ったときにトリガーされるフレーマー モーション (またはプレーン HTML の場合は CSS) を使用して、スムーズな千鳥状のぼかし + スライドアップのリビール アニメーションを追加します。ユーザーが既存の Web サイトまたは React/HTML ページを改善、最新化、洗練、またはアニメーション化したい場合は常に、このスキルを使用します。ユーザーが「見た目を良くする」、「アニメーション化する」、「デザインを改善する」、「UI をアップグレードする」、「よりモダンにする」、または「スクロール アニメーションを追加する」とだけ言及した場合でもトリガーされます。このスキルはアニメーションだけでなく、それらすべてを処理します。 ソース: zaaakher/agent-skills。

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate
カテゴリ
*クリエイティブ
認証済み
初回登録
2026-02-28
更新日
2026-03-11

Browse more skills from zaaakher/agent-skills

クイックアンサー

ui-enhance-animate とは?

サイトの既存のカラー パレットを維持しながら、既存の Web サイトの UI デザインを包括的にアップグレードして磨き上げ、レイアウト、タイポグラフィ、間隔、深さ、視覚的な階層、コンポーネントの洗練を改善します。また、要素がビューポートに入ったときにトリガーされるフレーマー モーション (またはプレーン HTML の場合は CSS) を使用して、スムーズな千鳥状のぼかし + スライドアップのリビール アニメーションを追加します。ユーザーが既存の Web サイトまたは React/HTML ページを改善、最新化、洗練、またはアニメーション化したい場合は常に、このスキルを使用します。ユーザーが「見た目を良くする」、「アニメーション化する」、「デザインを改善する」、「UI をアップグレードする」、「よりモダンにする」、または「スクロール アニメーションを追加する」とだけ言及した場合でもトリガーされます。このスキルはアニメーションだけでなく、それらすべてを処理します。 ソース: zaaakher/agent-skills。

ui-enhance-animate のインストール方法は?

ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/zaaakher/agent-skills

詳細

カテゴリ
*クリエイティブ
ソース
skills.sh
初回登録
2026-02-28