Tailwind CSS 進階版面技巧，包含 CSS Grid 與 Flexbox 模式。主動啟用於：建立複雜 CSS Grid 版面、使用 Tailwind v4 任意值設定 grid-template-areas、響應式網格、Flexbox 模式、固定頁首頁尾、聖盃版面、瀑布流版面、容器查詢、子網格、長寬比工具以及多欄雜誌風格版面。提供網格模板配方、容器查詢模式、聖盃模板、瀑布流替代方案與長寬比範例。
這個技能專為使用 Tailwind CSS 進行進階版面設計的開發者而設計，特別是在 CSS Grid 和 Flexbox 的複雜佈局場景中。它涵蓋了從響應式網格（grid-cols-*、auto-fit、minmax）到進階模式如聖盃佈局（Holy Grail layout）、瀑布流佈局（Masonry-style）及容器查詢（@container）的廣泛技巧。該技能支援 Tailwind v4 的任意值語法（如 grid-template-areas）以及子網格（subgrid）和長寬比（aspect-ratio）工具。透過提供現成的模板與模式，開發者可以快速搭建專業級的多欄版面、固定頁首頁尾與雜誌風格設計，大幅減少手寫 CSS 的時間。此技能可在所有支援技能的平台（如 Claude Code、Cursor、Codex）上使用，強烈建議在涉及進階 Tailwind 版面問題時主動啟用。
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 任意值設定 grid-template-areas；(3) 響應式網格（grid-cols-*、auto-fit、minmax）；(4) Flexbox 模式（flex-1、flex-grow、gap）；(5) 固定頁首與頁尾（sticky）；(6) 聖盃版面（Holy Grail layout）；(7) 瀑布流風格版面（Masonry-style）；(8) 搭配 Tailwind 使用容器查詢（@container）；(9) 子網格（Subgrid）用法；(10) 長寬比工具（aspect-ratio）；(11) 雜誌風格多欄版面。提供：網格模板配方、容器查詢模式、聖盃模板、瀑布流替代方案與長寬比範例。
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".