CLAUDE SKILL / デザイン

motion-web

動きを中心にした表現力の高いWebサイトを、Three.js・Canvas・WebGL・CSSで作るためのスキルです。バネの揺れなど実際の物理に沿った動きと、動作を自動で確かめる検証スクリプトを備えています。

こんなときに使います

動きの手触りにこだわったWebページを作りたいとき

使う前に:説明は英語と中国語です。

できること

  • バネの揺れや慣性など、物理法則に沿った動きを組み込める
  • そのまま動く7つの作例(単体のHTML)を参考にできる
  • ブラウザを自動操作して動きが壊れていないかを検証できる
  • 外部のCDNに頼らず、ネットにつながっていなくても動く作り

始める前に必要なもの

  • Python 3(検証用)
  • Playwright(検証用)

入れ方

下の文を Claude Code に貼ると、入れる前に中身の説明を受けられます。説明を読んで、実行するコマンドや外部への送り先に納得できたときだけ入れてください。リンク先は作者が書き換えることがあり、当サイトは安全を保証するものではありません。

https://github.com/feitangyuan/motion-web

このスキルを入れる前に、中身を読んで次の3つを説明して。まだ入れないで、私の返事を待って。
1. 何をするものか
2. 実行するコマンドやスクリプト
3. 外部に送るデータと送り先

GitHubで中身を見る →

基本情報

種類
スキル
分類
デザイン
GitHubのスター
840
最終更新
2026-11-05
掲載元
GitHub(作者のREADME)

説明はGitHub(作者のREADME)の内容をもとに、日本語でまとめ直したものです。確認日:2026-11-05

同じ分類のほかのスキル

デザインの一覧を見る →