Tailwind CSS动画和过渡效果，包括内置工具类和自定义关键帧。主动激活场景：animate-*工具类（旋转、脉冲、弹跳等）、自定义@keyframes、过渡工具类、变换效果、无障碍偏好减少动画、Framer Motion集成、滚动驱动动画、视图过渡API、交互状态过渡和列表交错动画。
这是一个专为Tailwind CSS设计的动画技能，全面覆盖从内置动画工具类（如animate-spin、animate-ping、animate-pulse、animate-bounce）到高级自定义关键帧的完整生态。它支持通过@theme animate指令定义自定义动画，并提供transition、duration、ease等过渡工具类的快速参考。技能特别强调无障碍实践，内置了prefers-reduced-motion降低动画的模式。对于现代Web开发，它整合了Framer Motion/Motion One库与Tailwind的联合使用，以及CSS scroll-driven animations（animation-timeline）和View Transitions API。此外，还涵盖了hover、focus、group-hover等交互状态过渡，以及列表交错动画的实现模式。该技能适用于Claude Code、Cursor、Codex等AI编程助手，帮助开发者快速查找动画用法、生成关键帧示例、实现无障碍动画策略，并集成流行动画库。
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-animationsTailwind 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) 使用 Tailwind 的视图过渡 API
(9) hover、focus、group-hover 过渡
(10) 交错列表动画
提供：动画工具类参考、自定义关键帧示例、减少运动模式、Framer Motion 集成、以及滚动驱动动画方案。
This repo contains 2 individual skills — each has its own dedicated page.
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.
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.
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
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.
Obra superpowers agent skills.
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...
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.