Communitygithub.com

josiahsiegel/tailwindcss-mobile-first

Padrões de design responsivo mobile-first com Tailwind CSS v4 (2025-2026). Ative proativamente para design mobile-first com breakpoints Tailwind, ordenação de utilitários responsivos, tipografia responsiva, grids e flexbox, ocultar/exibir entre breakpoints, sobrescritas desktop-down, consultas de contêiner, insets de área segura e tratamento de toque/hover.

O que é tailwindcss-mobile-first?

Esta skill fornece um guia completo e prático para implementar design responsivo mobile-first utilizando Tailwind CSS v4, com foco em padrões modernos de 2025-2026. Ela é ativada proativamente sempre que o desenvolvedor precisa lidar com breakpoints (sm:, md:, lg:, xl:, 2xl:), ordenação de utilitários responsivos (padrão mobile, depois breakpoints), tipografia responsiva (text-base sm:text-lg lg:text-xl), grids e flexbox responsivos, ocultar/exibir elementos entre breakpoints com hidden md:block, sobrescritas para desktop-down usando max-* breakpoints, consultas de contêiner (@container) para responsividade em nível de componente, tratamento de insets de área segura e entalhes (safe-area insets), orientação paisagem vs retrato, e interações de toque vs hover (hover: com @media). A skill oferece uma referência completa de breakpoints, padrões mobile-first, exemplos de consulta de contêiner, receitas para área segura e tratamento de toque/hover. É compatível com qualquer ambiente que execute Tailwind CSS v4, como Claude Code, Cursor, Codex e outras ferramentas de desenvolvimento, e funciona extraindo informações do arquivo SKILL.md para orientar as respostas do assistente.

Funciona com~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-mobile-first
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que tailwindcss-mobile-first faz?

Padrões de design responsivo mobile-first com Tailwind CSS v4 (2025-2026). ATIVE PROATIVAMENTE para: (1) design mobile-first com breakpoints Tailwind (sm:, md:, lg:, xl:, 2xl:), (2) ordenação de utilitários responsivos (padrão = mobile, depois breakpoints), (3) tipografia responsiva (text-base sm:text-lg lg:text-xl), (4) grids e flexbox responsivos, (5) ocultar/exibir entre breakpoints (hidden md:block), (6) breakpoints max-* para sobrescritas desktop-down, (7) consultas de contêiner (@container) para responsividade em nível de componente, (8) insets de área segura e tratamento de entalhes, (9) orientação paisagem vs retrato, (10) toque vs hover (hover: com @media). Fornece: referência de breakpoints, padrões mobile-first, exemplos de consulta de contêiner, receitas de área segura e tratamento de toque/hover.

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.

Habilidades Relacionadas

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