Tailwind CSS 高级布局技术，涵盖CSS Grid和Flexbox模式。
该技能提供了Tailwind CSS中用于构建复杂布局的高级技术，包括CSS Grid和Flexbox的详细模式与配方。它涵盖了从网格模板区域、响应式网格到圣杯布局、瀑布流式布局和杂志风格多列布局等丰富场景。此外，还包含了容器查询（@container）、subgrid、aspect-ratio工具以及粘性页眉和页脚等实用模式。支持Tailwind v4的任意值语法，帮助开发者高效实现现代Web布局。该技能适用于任何基于Tailwind CSS的项目，无论是使用CLI还是集成到框架中。提供了可复用的代码示例和最佳实践，确保布局在不同屏幕尺寸和设备上表现一致。通过激活此技能，开发人员可以快速参考和实现常见的复杂布局模式，减少重复工作，提升开发效率。
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-advanced-layoutsTailwind CSS 高级布局技术，涵盖CSS Grid和Flexbox模式。主动激活用于：(1) 使用CSS Grid构建复杂布局，(2) 通过Tailwind v4任意值实现网格模板区域，(3) 响应式网格（grid-cols-*, auto-fit, minmax），(4) Flexbox模式（flex-1, flex-grow, gap），(5) 粘性页眉和页脚，(6) 圣杯布局，(7) 瀑布流式布局，(8) 与Tailwind配合使用容器查询（@container），(9) subgrid的使用，(10) aspect-ratio工具，(11) 杂志风格多列布局。提供：网格模板配方、容器查询模式、圣杯布局模板、瀑布流替代方案以及aspect-ratio示例。
This repo contains 2 individual skills — each has its own dedicated page.
Tailwind CSS animations and transitions including built-in utilities and custom keyframes. PROACTIVELY activate for: (1) animate-* utilities (spin, ping, pulse, bounce), (2) custom @keyframes via @theme animate, (3) transition utilities (transition, duration, ease), (4) transforms (scale, rotate, translate) with transition, (5) prefers-reduced-motion: reduce, (6) Framer Motion / Motion One integration with Tailwind, (7) CSS scroll-driven animations (animation-timeline), (8) view transitions API with Tailwind, (9) hover, focus, group-hover transitions, (10) staggered list animations. Provides: animation utility reference, custom keyframe examples, reduced-motion pattern, Framer Motion integration, and scroll-driven animation recipes.
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.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".