Communitygithub.com

josiahsiegel/tailwindcss-animations

Tailwind CSS のアニメーションとトランジション機能。組み込みユーティリティとカスタムキーフレームを提供します。

tailwindcss-animations とは?

このスキルは、Tailwind CSS のアニメーションとトランジションに関する包括的なリファレンスと実践例を提供します。主な機能として、animate-* ユーティリティ(spin, ping, pulse, bounce)、@theme animate を使用したカスタム @keyframes、トランジションユーティリティ(transition, duration, ease)、トランスフォーム(scale, rotate, translate)のトランジション連携、prefers-reduced-motion によるアクセシビリティ対応、Framer Motion / Motion One との統合、CSS スクロール駆動アニメーション(animation-timeline)、View Transitions API、ホバー・フォーカス・グループホバーによるトランジション、そしてリスト要素の段階的アニメーション(staggered animations)をカバーします。あらゆる Tailwind CSS プロジェクトでアニメーションを効率的に実装したい開発者に最適であり、特に React や Vue などのフレームワークとの組み合わせで威力を発揮します。スキルは SKILL.md に基づき、実際のユーティリティクラス名やコード例をそのまま提示するため、エージェントは正確な実装を迅速に提供できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-animations

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

tailwindcss-animations は何をしますか?

Tailwind CSS のアニメーションとトランジション。組み込みユーティリティとカスタムキーフレームを含みます。以下の場合にプロアクティブに有効化してください:

  1. animate-* ユーティリティ(spin, ping, pulse, bounce)
  2. @theme animate によるカスタム @keyframes
  3. トランジションユーティリティ(transition, duration, ease)
  4. トランスフォーム(scale, rotate, translate)とトランジションの組み合わせ
  5. prefers-reduced-motion: reduce の対応
  6. Framer Motion / Motion One と Tailwind の統合
  7. CSS スクロール駆動アニメーション(animation-timeline)
  8. View Transitions API と Tailwind の連携
  9. hover, focus, group-hover によるトランジション
  10. リストの段階的アニメーション(staggered list animations)

提供するもの: アニメーションユーティリティリファレンス、カスタムキーフレームの例、動きを減らすパターン、Framer Motion 統合、スクロール駆動アニメーションレシピ。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

josiahsiegel/tailwindcss-advanced-layouts

Tailwind CSS advanced layout techniques including CSS Grid and Flexbox patterns. PROACTIVELY activate for: (1) building complex layouts with CSS Grid, (2) grid-template-areas via Tailwind v4 arbitrary values, (3) responsive grid (grid-cols-*, auto-fit, minmax), (4) Flexbox patterns (flex-1, flex-grow, gap), (5) sticky headers and footers, (6) holy grail layout, (7) masonry-style layouts, (8) container queries (@container) with Tailwind, (9) subgrid usage, (10) aspect-ratio utilities, (11) magazine-style multi-column layouts. Provides: Grid template recipes, container-query patterns, holy-grail templates, masonry alternatives, and aspect-ratio examples.

josiahsiegel/tailwindcss-mobile-first

Mobile-first responsive design patterns with Tailwind CSS v4 (2025-2026). PROACTIVELY activate for: (1) mobile-first design with Tailwind breakpoints (sm:, md:, lg:, xl:, 2xl:), (2) responsive utility ordering (default = mobile, then breakpoints), (3) responsive typography (text-base sm:text-lg lg:text-xl), (4) responsive grids and flexbox, (5) hide/show across breakpoints (hidden md:block), (6) max-* breakpoints for desktop-down overrides, (7) container queries (@container) for component-level responsiveness, (8) safe-area insets and notch handling, (9) landscape vs portrait orientation, (10) touch vs hover (hover: with @media). Provides: breakpoint reference, mobile-first patterns, container-query examples, safe-area recipes, and touch/hover handling.

関連スキル