Communitygithub.com

josiahsiegel/tailwindcss-advanced-layouts

Techniques avancées de mise en page Tailwind CSS incluant des motifs CSS Grid et Flexbox.

Qu'est-ce que tailwindcss-advanced-layouts ?

Cette compétence fournit des techniques avancées de mise en page avec Tailwind CSS, en se concentrant sur CSS Grid et Flexbox pour créer des layouts complexes. Elle est conçue pour être activée de manière proactive lors de la construction de grilles responsives (grid-cols-*, auto-fit, minmax), de dispositions flexbox, de mises en page sticky (en-têtes/pieds de page), du 'holy grail layout', de layouts en style masonry, de requêtes de conteneur (@container) avec Tailwind, de l'utilisation de subgrid, des utilitaires aspect-ratio, et de layouts multi-colonnes façon magazine. La compétence fournit des recettes de grille, des motifs de requêtes de conteneur, des templates holy-grail, des alternatives au masonry, et des exemples d'aspect-ratio. Elle s'applique à tous les projets utilisant Tailwind CSS v3 ou v4, et convient aux agents IA comme Claude Code, Cursor, ou Codex qui ont besoin de générer ou d'analyser du code CSS avancé.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-advanced-layouts
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait tailwindcss-advanced-layouts ?

Techniques avancées de mise en page Tailwind CSS incluant des motifs CSS Grid et Flexbox. Activée de manière proactive pour : (1) construire des mises en page complexes avec CSS Grid, (2) les zones de grille (grid-template-areas) via les valeurs arbitraires de Tailwind v4, (3) la grille responsive (grid-cols-*, auto-fit, minmax), (4) les motifs Flexbox (flex-1, flex-grow, gap), (5) les en-têtes et pieds de page sticky, (6) la mise en page saint-graal (holy grail), (7) les mises en page de type masonry, (8) les requêtes de conteneur (@container) avec Tailwind, (9) l'utilisation de subgrid, (10) les utilitaires aspect-ratio, (11) les mises en page multi-colonnes façon magazine. Fournit : des recettes de template de grille, des motifs de requêtes de conteneur, des templates saint-graal, des alternatives au masonry, et des exemples d'aspect-ratio.

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.

Skills associés

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