使用 Tailwind CSS v4（2025-2026）的行動優先響應式設計模式。
這項技能提供了一套全面的 Tailwind CSS v4 行動優先響應式設計模式與最佳實踐，專為 2025-2026 年的專案設計。它能主動協助開發者處理十個核心領域，包括使用標準中斷點（sm:, md:, lg:, xl:, 2xl:）進行行動優先設計、正確的響應式工具類排序（預設為行動版，然後是中斷點）、響應式排版（text-base sm:text-lg lg:text-xl）、響應式 Grid 與 Flexbox、跨中斷點的隱藏/顯示（hidden md:block）、用於桌面版向下覆蓋的 max-* 中斷點、使用容器查詢（@container）實現元件級響應性、安全區域內邊距與瀏海屏處理、橫向與直向方向切換，以及觸控與懸停狀態的處理（搭配 @media 的 hover:）。這項技能支援所有主流平台（如 Claude Code、Cursor、Codex 等），並提供中斷點參考、行動優先模式、容器查詢範例、安全區域配方以及觸控/懸停處理的實用程式碼片段，幫助開發者建立相容於最新裝置與瀏覽器的現代、高效響應式介面。
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-mobile-first使用 Tailwind CSS v4（2025-2026）的行動優先響應式設計模式。主動啟用以處理： (1) 使用 Tailwind 中斷點（sm:、md:、lg:、xl:、2xl:）的行動優先設計，(2) 響應式工具類排序（預設=行動版，然後是中斷點），(3) 響應式排版（text-base sm:text-lg lg:text-xl），(4) 響應式 Grid 和 Flexbox，(5) 跨中斷點的隱藏/顯示（hidden md:block），(6) 用於桌面版向下覆蓋的 max-* 中斷點，(7) 用於元件級響應性的容器查詢（@container），(8) 安全區域內邊距與瀏海屏處理，(9) 橫向 vs 直向方向，(10) 觸控 vs 懸停（搭配 @media 的 hover:）。提供：中斷點參考、行動優先模式、容器查詢範例、安全區域配方，以及觸控/懸停處理。
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.
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.
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".