Communitygithub.com

josiahsiegel/tailwindcss-animations

Animaciones y transiciones de Tailwind CSS que incluyen utilidades integradas y fotogramas clave personalizados.

¿Qué es tailwindcss-animations?

Este skill proporciona una guía completa y ejemplos prácticos para trabajar con animaciones y transiciones en Tailwind CSS. Cubre tanto las utilidades de animación integradas (como `animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce`) como la creación de fotogramas clave personalizados (`@keyframes`) a través del tema `@theme animate`. También incluye detalles sobre utilidades de transición (`transition`, `duration`, `ease`), transformaciones (`scale`, `rotate`, `translate`) combinadas con transiciones, y patrones de accesibilidad como `prefers-reduced-motion`. Además, explora la integración con librerías de animación como Framer Motion y Motion One, animaciones basadas en desplazamiento (`scroll-driven animations`), la API de transiciones de vista (`view transitions API`), transiciones interactivas (`hover`, `focus`, `group-hover`), y animaciones escalonadas para listas. Es útil para desarrolladores que buscan implementar animaciones fluidas y accesibles en proyectos con Tailwind CSS, ya sea en entornos con React, Vue o vanilla HTML/CSS.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-animations
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace tailwindcss-animations?

Animaciones y transiciones de Tailwind CSS, incluyendo utilidades integradas y fotogramas clave personalizados. ACTÍVALO PROACTIVAMENTE para: (1) utilidades animate-* (spin, ping, pulse, bounce), (2) @keyframes personalizados a través de @theme animate, (3) utilidades de transición (transition, duration, ease), (4) transformaciones (scale, rotate, translate) con transición, (5) prefers-reduced-motion: reduce, (6) integración de Framer Motion / Motion One con Tailwind, (7) animaciones CSS basadas en desplazamiento (animation-timeline), (8) API de transiciones de vista con Tailwind, (9) transiciones en hover, focus, group-hover, (10) animaciones escalonadas para listas. Proporciona: referencia de utilidades de animación, ejemplos de fotogramas clave personalizados, patrón de movimiento reducido, integración con Framer Motion y recetas de animación basadas en desplazamiento.

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.

Skills relacionados

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