Communitygithub.com

josiahsiegel/tailwindcss-mobile-first

Mobile-First-Responsive-Designmuster mit Tailwind CSS v4 (2025-2026). Proaktiv aktivieren für: Mobile-First-Design mit Tailwind-Breakpoints, Responsive-Utility-Reihenfolge, Responsive-Typografie, Responsive-Grids und Flexbox, Ein-/Ausblenden über Breakpoints, max-*-Breakpoints für Desktop-Down-Überschreibungen, Container-Queries, Safe-Area-Insets, Landscape-/Portrait-Ausrichtung sowie Touch-/Hover-Unterstützung.

Was ist tailwindcss-mobile-first?

Diese Skill bietet eine umfassende Referenz und praktische Beispiele für Mobile-First-Responsive-Design mit Tailwind CSS v4 (2025-2026). Sie ist speziell dafür konzipiert, Entwicklern zu helfen, responsive Benutzeroberflächen zu erstellen, die auf mobilen Geräten beginnen und sich nahtlos an größere Bildschirme anpassen. Die Skill unterstützt gängige Tailwind-Breakpoints (sm:, md:, lg:, xl:, 2xl:) für aufsteigende Breakpoints, max-*-Breakpoints für Desktop-Down-Überschreibungen, sowie Container-Queries (@container) für komponentenbasierte Responsivität. Darüber hinaus enthält sie Rezepte für Safe-Area-Insets (notch handling), Landscape-/Portrait-Orientierung und Touch-vs.-Hover-Interaktionen (hover: mit @media). Entwickler können damit konsistente, barrierefreie und performante responsive Layouts erstellen, ohne ständig die Dokumentation durchsuchen zu müssen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-mobile-first
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-mobile-first?

Mobile-First-Responsive-Designmuster mit Tailwind CSS v4 (2025-2026). Proaktiv aktivieren für: (1) Mobile-First-Design mit Tailwind-Breakpoints (sm:, md:, lg:, xl:, 2xl:), (2) Responsive-Utility-Reihenfolge (Standard = mobil, dann Breakpoints), (3) Responsive-Typografie (text-base sm:text-lg lg:text-xl), (4) Responsive-Grids und Flexbox, (5) Ein-/Ausblenden über Breakpoints (hidden md:block), (6) max-*-Breakpoints für Desktop-Down-Überschreibungen, (7) Container-Queries (@container) für komponentenbasierte Responsivität, (8) Safe-Area-Insets und Notch-Handling, (9) Landscape- vs. Portrait-Ausrichtung, (10) Touch vs. Hover (hover: mit @media). Bietet: Breakpoint-Referenz, Mobile-First-Muster, Container-Query-Beispiele, Safe-Area-Rezepte und Touch-/Hover-Handling.

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-animations

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.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

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".

community

mattpocock/prototype

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.

community

mattpocock/grill-me

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".

community