Communitygithub.com

josiahsiegel/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) Tailwind와 Framer Motion / Motion One 통합, (7) CSS 스크롤 기반 애니메이션 (animation-timeline), (8) Tailwind와 뷰 전환 API, (9) hover, focus, group-hover 전환, (10) 계단식 목록 애니메이션. 제공 항목: 애니메이션 유틸리티 참조, 사용자 정의 키프레임 예제, reduced-motion 패턴, Framer Motion 통합, 스크롤 기반 애니메이션 레시피.

tailwindcss-animations란 무엇인가요?

이 스킬은 Tailwind CSS를 사용하는 개발자에게 애니메이션 및 전환 작업을 위한 포괄적인 가이드와 레퍼런스를 제공합니다. Tailwind에서 기본 제공하는 animate-spin, animate-ping, animate-pulse, animate-bounce와 같은 내장 애니메이션 유틸리티는 물론, @theme animate 지시어를 사용하여 사용자 정의 @keyframes를 생성하는 방법을 설명합니다. 또한 transition, duration, ease 같은 전환 유틸리티와 scale, rotate, translate 같은 변환(transform)을 전환과 함께 사용하는 방법을 다룹니다. 접근성을 위해 prefers-reduced-motion 미디어 쿼리를 활용하는 패턴, Framer Motion 및 Motion One 라이브러리와의 통합 방법, CSS scroll-driven animations (animation-timeline) 및 View Transitions API와 같은 최신 웹 API를 Tailwind와 함께 사용하는 레시피도 포함합니다. hover, focus, group-hover와 같은 상호작용 상태에 따른 전환과 계단식 목록 애니메이션(staggered list animations) 예제도 제공하여, 개발자가 동적이고 부드러운 사용자 인터페이스를 구축하는 데 도움을 줍니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 코딩 에이전트 환경에서 활성화되며, 애니메이션 관련 코드 작성이나 문제 해결 시 유용하게 사용됩니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-animations
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

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. Tailwind와 Framer Motion / Motion One 통합
  7. CSS 스크롤 기반 애니메이션 (animation-timeline)
  8. Tailwind와 뷰 전환 API
  9. hover, focus, group-hover 전환
  10. 계단식 목록 애니메이션

제공 항목: 애니메이션 유틸리티 참조, 사용자 정의 키프레임 예제, reduced-motion 패턴, 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.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community