Communitygithub.com

josiahsiegel/tailwindcss-mobile-first

Patrons de conception mobile-first avec Tailwind CSS v4 (2025-2026).

Qu'est-ce que tailwindcss-mobile-first ?

Cette compétence fournit un guide complet pour appliquer le responsive design mobile-first avec Tailwind CSS v4 (2025-2026). Elle inclut les points d'arrêt Tailwind (sm, md, lg, xl, 2xl), l'ordre des utilitaires responsifs (mobile par défaut, puis points d'arrêt), la typographie responsive, les grilles et flexbox adaptatifs, le masquage/affichage entre points d'arrêt, et les points d'arrêt max-* pour les dérogations desktop. Elle couvre également les requêtes de conteneur (@container) pour une réactivité au niveau du composant, la gestion des encarts de zone sécurisée (safe-area insets) et des encoches, ainsi que les orientations paysage/portrait et le comportement tactile vs survol (hover avec @media). Idéale pour les développeurs Frontend utilisant Tailwind CSS, elle s'intègre parfaitement dans les flux de travail avec des outils comme Claude Code, Cursor ou Codex, en fournissant des exemples concrets et des recettes optimisées pour les environnements mobiles. Son activation est proactive pour tous les projets nécessitant une approche mobile-first, garantissant des interfaces utilisateur performantes et adaptées.

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

Patrons de conception responsive mobile-first avec Tailwind CSS v4 (2025-2026). Activez PROACTIVEMENT pour : (1) conception mobile-first avec les points d'arrêt Tailwind (sm:, md:, lg:, xl:, 2xl:), (2) ordre des utilitaires responsifs (défaut = mobile, puis points d'arrêt), (3) typographie responsive (text-base sm:text-lg lg:text-xl), (4) grilles et flexbox responsifs, (5) masquage/affichage entre points d'arrêt (hidden md:block), (6) points d'arrêt max-* pour dérogations desktop, (7) requêtes de conteneur (@container) pour réactivité au niveau du composant, (8) gestion des encarts de zone sécurisée et des encoches, (9) orientation paysage vs portrait, (10) tactile vs survol (hover: avec @media). Fournit : référence des points d'arrêt, patrons mobile-first, exemples de requêtes de conteneur, recettes de zone sécurisée, et gestion tactile/survol.

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.

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