Communitygithub.com

josiahsiegel/tailwindcss-animations

Tailwind CSS 動畫與轉換效果,包含內建工具類別與自訂關鍵影格。主動針對以下情況啟用:動畫工具類別、自訂 @keyframes、轉換工具、變形、減少動畫偏好設定、與 Framer Motion / Motion One 整合、CSS 滾動驅動動畫、檢視轉換 API、互動轉換,以及交錯列表動畫。提供:動畫工具參考、自訂關鍵影格範例、減少動畫模式、Framer Motion 整合、滾動驅動動畫配方。

tailwindcss-animations 是什麼?

josiahsiegel/tailwindcss-animations 是一個專為 Tailwind CSS 設計的 AI 代理人技能,涵蓋動畫與轉換效果的完整解決方案。此技能主動支援多種場景,包括 animate-* 工具類別(旋轉、閃爍、脈動、彈跳)、透過 @theme animate 的自訂 @keyframes,以及 transition、duration、ease 等轉換工具。此外,它還整合了 Framer Motion / Motion One 動畫庫、CSS 滾輪驅動動畫(animation-timeline)、檢視轉換 API(view transitions API),並提供減少動畫偏好設定(prefers-reduced-motion: reduce)的最佳實踐。此技能主要適用於 Claude Code、Cursor 等開發工具,幫助開發者快速查詢動畫工具參考、自訂關鍵影格範例、減少動畫模式、Framer Motion 整合,以及滾輪驅動動畫配方,從而提升 Tailwind CSS 專案中的動畫開發效率。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

tailwindcss-animations 是做什麼的?

Tailwind CSS 動畫與轉換效果,包含內建工具類別與自訂關鍵影格。主動針對以下情況啟用:

  1. animate-* 工具類別(旋轉、閃爍、脈動、彈跳)
  2. 透過 @theme animate 的自訂 @keyframes
  3. 轉換工具類別(transition、duration、ease)
  4. 變形(scale、rotate、translate)與轉換搭配使用
  5. 減少動畫偏好設定:prefers-reduced-motion: reduce
  6. 與 Tailwind 整合的 Framer Motion / Motion One
  7. CSS 滾輪驅動動畫(animation-timeline)
  8. 與 Tailwind 搭配的檢視轉換 API(view transitions API)
  9. 懸停、焦點、群組懸停轉換
  10. 交錯列表動畫

提供:動畫工具參考、自訂關鍵影格範例、減少動畫模式、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.

相關技能