0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Skillselion

Claude Codeのminimalist-uiスキルのモーション規則をCSSに起こす: 600ms、80ms、そして必須のprefers-reduced-motion

0
Posted at

minimalist-uiは、Claude Codeに余白の多いエディトリアル調のUIを作らせるスキルです。SKILL.mdの第7節はモーションを数値で指定していて、スクロール時の出現は translateY(12px) と opacity: 0 から600ms、リストの出現は1項目あたり80msずつ遅らせる、と書かれています。さらに prefers-reduced-motion への対応が必須です。この1行は2026年6月21日付のコミットで書かれ、2026年10月11日(UTC)にmainへマージされました。

私たちはSkillselionを運営しています。Anthropic、OpenAI、Cursor、taste-skillの作者のいずれとも提携していない、独立したスキルのディレクトリです。この記事では、leonxlnx/taste-skillのコミット d237dd39 にあるminimalist-uiのSKILL.mdを読み、第7節の規則をそのままCSSとJavaScriptに起こします。スキルを実際に動かして出力を検証したわけではありません。ファイルを読んでわかったことをまとめています。

minimalist-uiはどんなスキルですか

taste-skillリポジトリにある13個のSKILL.mdのうちの1つです。READMEでは「Editorial product UI (Notion/Linear vibes), restrained palette, crisp structure.」と説明されています。ファイルは86行、8つの節で構成されています。

インストール数は401,249です(skills.sh、2026年10月13日時点)。リポジトリのGitHubスター数は95,270、ライセンスはMITです(GitHub API、2026年10月13日取得)。スキルの概要や選び方は、Skillselionのminimalist-uiスキルの解説ガイド(英語)にまとめています。

インストールはREADMEの書式どおり、スキル名を指定します。

npx skills add https://github.com/Leonxlnx/taste-skill --skill "minimalist-ui"

第7節はモーションをどう指定していますか

第7節「Subtle Motion & Micro-Animations」には6つの項目があります。最後の1つが prefers-reduced-motion で、残りの5つを数値で抜き出すと次のとおりです(スクロール時の出現とホバーは、それぞれ2行に分けています)。

規則 SKILL.mdの指定
スクロール時の出現 translateY(12px) + opacity: 0 から600ms、cubic-bezier(0.16, 1, 0.3, 1)
検知の方法 IntersectionObserver を使う。window.addEventListener('scroll') は使わない
ホバー カードの box-shadow を 0 0 0 から 0 2px 8px rgba(0,0,0,0.04) へ、200ms
ボタン :active で scale(0.98)
時間差での出現 animation-delay: calc(var(--index) * 80ms)
背景の動き(任意) 20秒以上かけて動く放射グラデーション1つ、opacity: 0.02-0.04、position: fixed; pointer-events: none の層に置く
パフォーマンス アニメーションさせるのは transform と opacity だけ

パフォーマンスの規則は原文でこう書かれています。

Animate exclusively via transform and opacity. No layout-triggering properties (top, left, width, height). Use will-change: transform sparingly and only on actively animating elements.

出典: minimalist-skill/SKILL.md、「7. Subtle Motion & Micro-Animations」

ホバーの規則だけは box-shadow を変化させるので、この一文と厳密には合いません。ファイルの中では両方が並んでいます。気になる場合は、影を疑似要素に置いて opacity だけを変える方法があります。

prefers-reduced-motionの行はいつ追加されましたか

コミット 541c36ba です。コミットの日付は2026年6月21日ですが、プルリクエスト #58 としてmainにマージされたのは2026年10月11日(UTC)です。このファイルへの変更としては、取得時点でこれが最後です。追加されたのは次の1行です。

Reduced Motion (mandatory): Gate scroll-entry, staggered reveals, and ambient background motion behind @media (prefers-reduced-motion: no-preference), and add a @media (prefers-reduced-motion: reduce) block that disables them so content appears instantly at rest. Hover and :active feedback may remain.

出典: minimalist-skill/SKILL.md、「7. Subtle Motion & Micro-Animations」

要点は3つです。

  • スクロール時の出現、時間差で出す演出、背景の動きは no-preference のメディアクエリの中に入れる
  • reduce のブロックも書き、そこでは内容を最初から表示する
  • ホバーと :active の反応は残してよい

コミットメッセージには、それまでこのスキルに「prefers-reduced-motionのフォールバックを必須とする記述がなかった」ことと、変更が「Docs-only」であることが書かれています。マージは10月11日なので、それより前にインストールして更新していないコピーにはこの行がありません。手元のSKILL.mdを確認してください。

規則どおりに書くとCSSはどうなりますか

以下は、第7節の数値を使って私たちが書いた例です。スキルに同梱されているコードではありません。

/* 動きを減らす設定をしていないユーザーにだけ適用する */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--index, 0) * 80ms);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* 動きを減らす設定のユーザーには最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ホバーと :active は残してよい */
.card {
  transition: box-shadow 200ms;
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.button:active {
  transform: scale(0.98);
}

SKILL.mdは遅延を animation-delay で書いていますが、この例は transition を使っているので transition-delay にしています。考え方は同じで、--index に項目の番号を入れます。

検知には IntersectionObserver を使います。

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  }
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach((el, i) => {
  el.style.setProperty('--index', i % 6);
  observer.observe(el);
});

threshold: 0.1 と i % 6 は私たちが選んだ値で、ファイルには指定がありません。なお、この書き方ではJavaScriptが動かない環境で .reveal が見えないままになります。JSで <html> にクラスを付け、そのクラスがあるときだけ初期状態を隠すと安全です。reduce のユーザーでは .reveal が最初から見えているので、クラスが付いても見た目は変わりません。

生成されたコードのどこを確認すればよいですか

第8節の実行手順のステップ5は、いまも次のように書かれています。

Add scroll-entry animations to all major content blocks.

出典: minimalist-skill/SKILL.md、「8. Execution Protocol」

この手順には prefers-reduced-motion の条件が書かれていません。条件は第7節にだけあります。エージェントがステップ5だけを見て実装すると、メディアクエリが抜けるおそれがあります。レビューでは次の3点を見るのが早いです。

  1. opacity: 0 の初期状態が @media (prefers-reduced-motion: no-preference) の中にあるか
  2. scroll イベントのリスナーが使われていないか
  3. top、left、width、height をアニメーションさせていないか

1が抜けていると、動きを減らす設定のユーザーにもアニメーションが再生されます。

同じリポジトリのほかのスキルとはどう違いますか

taste-skillには方向の違うスタイルのスキルが同居しています。Skillselionのminimalist-uiスキルの掲載ページから、同じリポジトリのスキルをたどれます。なお、掲載ページの解説は10月11日のマージより前のファイルを読んだもので、prefers-reduced-motion の行は反映されていません。

色や影の規則がぶつかるので、スタイルのスキルは1プロジェクトに1つにするのが無難です。カテゴリ全体はフロントエンドデザイン向けスキルのランキングでインストール数順に比較できます。

まとめ

  • minimalist-uiの第7節は、600ms、12px、80ms、200msといった数値でモーションを指定している
  • prefers-reduced-motion への対応を必須にする行は、2026年10月11日(UTC)にmainへマージされた。それより前のコピーにはこの行がない
  • 実行手順のステップ5には条件が書かれていないので、生成されたコードのメディアクエリは自分で確認する

最終更新: 2026年10月13日

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?