Communitygithub.com

josiahsiegel/tailwindcss-advanced-layouts

Técnicas avanzadas de diseño con Tailwind CSS, incluyendo patrones de CSS Grid y Flexbox.

¿Qué es tailwindcss-advanced-layouts?

Esta habilidad proporciona un conjunto completo de técnicas avanzadas de maquetación para Tailwind CSS, cubriendo tanto CSS Grid como Flexbox. Está diseñada para desarrolladores que necesitan construir diseños complejos, como rejillas responsivas, layouts de tipo 'santo grial', diseños tipo masonry (sin CSS Grid nativo) y diseños de estilo revista con múltiples columnas. Soporta las últimas características de Tailwind v4, como valores arbitrarios para `grid-template-areas`, consultas de contenedor (`@container`) y utilidades de relación de aspecto. Incluye recetas de plantillas de rejilla, patrones de consultas de contenedor, alternativas a masonry y ejemplos prácticos para layouts con encabezados y pies de página fijos. Al activarse proactivamente para estos casos de uso, ahorra tiempo y reduce la fricción al implementar maquetaciones no triviales, permitiendo a los desarrolladores centrarse en la funcionalidad en lugar de en la sintaxis específica de Tailwind.

Compatible con~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-advanced-layouts
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace tailwindcss-advanced-layouts?

Técnicas avanzadas de maquetación con Tailwind CSS, incluyendo patrones de CSS Grid y Flexbox. ACTÍVALO DE MANERA PROACTIVA para: (1) construir diseños complejos con CSS Grid, (2) áreas de plantilla de rejilla (grid-template-areas) mediante valores arbitrarios de Tailwind v4, (3) rejillas responsivas (grid-cols-*, auto-fit, minmax), (4) patrones de Flexbox (flex-1, flex-grow, gap), (5) encabezados y pies de página fijos, (6) diseño de santo grial, (7) diseños tipo masonry, (8) consultas de contenedor (@container) con Tailwind, (9) uso de subgrid, (10) utilidades de relación de aspecto, (11) diseños de múltiples columnas estilo revista. Proporciona: recetas de plantillas de rejilla, patrones de consultas de contenedor, plantillas de santo grial, alternativas a masonry y ejemplos de relación de aspecto.

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 relacionados

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