Communitygithub.com

josiahsiegel/tailwindcss-animations

Tailwind CSS Animationen und Übergänge inklusive eingebauter Hilfsklassen und benutzerdefinierter Keyframes.

Was ist tailwindcss-animations?

Diese Fähigkeit (Skill) bietet eine umfassende Referenz für Animationen und Übergänge mit Tailwind CSS. Sie deckt die eingebauten `animate-*` Hilfsklassen (spin, ping, pulse, bounce) ab, zeigt die Erstellung benutzerdefinierter `@keyframes` über das `@theme animate` Direktive und erläutert die Verwendung von Übergangs-Hilfsklassen (`transition`, `duration`, `ease`). Zudem behandelt sie die Implementierung von CSS-scroll-gesteuerten Animationen (`animation-timeline`), die View Transitions API und die Integration von Animationsbibliotheken wie Framer Motion oder Motion One. Ein besonderer Fokus liegt auf der Zugänglichkeit durch die Unterstützung der `prefers-reduced-motion: reduce` Media Query und auf der Erstellung von gestaffelten Listenanimationen. Der Skill ist ideal für Entwickler, die mit Tailwind CSS arbeiten und ihre Benutzeroberflächen mit flüssigen, performanten Animationen und Übergängen anreichern möchten.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-animations
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht tailwindcss-animations?

Tailwind CSS Animationen und Übergänge inklusive eingebauter Hilfsklassen und benutzerdefinierter Keyframes. PROAKTIV aktivieren für: (1) animate-* Hilfsklassen (spin, ping, pulse, bounce), (2) benutzerdefinierte @keyframes via @theme animate, (3) Übergangs-Hilfsklassen (transition, duration, ease), (4) Transformationen (scale, rotate, translate) mit Übergang, (5) prefers-reduced-motion: reduce, (6) Framer Motion / Motion One Integration mit Tailwind, (7) CSS scroll-gesteuerte Animationen (animation-timeline), (8) View Transitions API mit Tailwind, (9) Hover-, Focus- und Group-Hover-Übergänge, (10) gestaffelte Listenanimationen. Bietet: Referenz für Animationshilfsklassen, Beispiele für benutzerdefinierte Keyframes, Muster für reduzierte Bewegung, Framer Motion Integration und Rezepte für scroll-gesteuerte Animationen.

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.

Verwandte Skills

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