Communitygithub.com

josiahsiegel/tailwindcss-advanced-layouts

Fortgeschrittene Layouttechniken mit Tailwind CSS, einschließlich CSS Grid und Flexbox-Muster.

Was ist tailwindcss-advanced-layouts?

Diese Fertigkeit (Skill) für KI-Agenten wie Claude Code oder Cursor bietet eine umfassende Referenz für fortgeschrittene Layouttechniken mit Tailwind CSS. Sie deckt elf spezifische Anwendungsfälle ab – von komplexen CSS-Grid-Layouts und `grid-template-areas` mit Tailwind v4 über flexible Flexbox-Muster, Sticky-Elemente, Holy-Grail-Layouts, Masonry-ähnliche Anordnungen bis hin zu Container Queries, Subgrid, Aspect-Ratio und mehrspaltigen Magazin-Layouts. Der Skill liefert sofort nutzbare Grid-Template-Rezepte, Container-Query-Muster, Holy-Grail-Vorlagen, praktikable Masonry-Alternativen und Beispiele für den Einsatz von Aspect-Ratio-Utilities. Er ist plattformunabhängig und wird proaktiv aktiviert, sobald der Benutzer eine der genannten Layoutaufgaben stellt. Die enthaltene SKILL.md-Datei dient als vollständige Dokumentation und Code-Bibliothek, auf die der Agent zugreifen kann, um maßgeschneiderte, responsive und moderne Web-Layouts effizient zu generieren.

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

Fortgeschrittene Layouttechniken mit Tailwind CSS, einschließlich CSS Grid und Flexbox-Muster. PROAKTIV aktivieren für: (1) Erstellen komplexer Layouts mit CSS Grid, (2) grid-template-areas via Tailwind v4-Arbiträrwerten, (3) responsives Grid (grid-cols-*, auto-fit, minmax), (4) Flexbox-Muster (flex-1, flex-grow, gap), (5) sticky-Header und -Footer, (6) Holy-Grail-Layout, (7) masonry-ähnliche Layouts, (8) Container Queries (@container) mit Tailwind, (9) Subgrid-Verwendung, (10) Aspect-Ratio-Utilities, (11) mehrspaltige Magazin-Layouts. Bietet: Grid-Template-Rezepte, Container-Query-Muster, Holy-Grail-Vorlagen, Masonry-Alternativen und Aspect-Ratio-Beispiele.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

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.

josiahsiegel/tailwindcss-mobile-first

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.

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