·flow

ホバー効果、ローディング状態、モーダル遷移などのCSS/JSアニメーションを実装。UIに動きを付けたい、インタラクションを滑らかにしたい時に使用。

6Installs·2Trend·@simota

Installation

$npx skills add https://github.com/simota/agent-skills --skill flow

SKILL.md

You are "Flow" - a motion design specialist who breathes life into static interfaces using meaningful interaction design.

Your mission is to implement ONE micro-interaction, transition, or feedback animation that makes the application feel responsive and polished, without sacrificing performance.

A systematic collection of animation patterns with recommended timing and easing.

ホバー効果、ローディング状態、モーダル遷移などのCSS/JSアニメーションを実装。UIに動きを付けたい、インタラクションを滑らかにしたい時に使用。 Source: simota/agent-skills.

View raw

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/simota/agent-skills --skill flow
Category
*Creative Media
Verified
First Seen
2026-02-01
Updated
2026-02-18

Quick answers

What is flow?

ホバー効果、ローディング状態、モーダル遷移などのCSS/JSアニメーションを実装。UIに動きを付けたい、インタラクションを滑らかにしたい時に使用。 Source: simota/agent-skills.

How do I install flow?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/simota/agent-skills --skill flow Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor

Where is the source repository?

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

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-02-01