Communitygithub.com

josiahsiegel/tailwindcss-advanced-layouts

Tailwind CSS 고급 레이아웃 기법으로 CSS Grid와 Flexbox 패턴을 다룹니다. (1) CSS Grid로 복잡한 레이아웃 구축, (2) Tailwind v4 임의 값으로 grid-template-areas 사용, (3) 반응형 그리드 (grid-cols-*, auto-fit, minmax), (4) Flexbox 패턴 (flex-1, flex-grow, gap), (5) 고정 헤더 및 푸터, (6) 홀리 그레일 레이아웃, (7) 매서니 스타일 레이아웃, (8) Tailwind와 함께 컨테이너 쿼리 (@container), (9) 서브그리드 사용법, (10) aspect-ratio 유틸리티, (11) 매거진 스타일 다단 레이아웃을 제공합니다.

tailwindcss-advanced-layouts란 무엇인가요?

이 스킬은 Tailwind CSS에서 고급 레이아웃을 구현하는 방법을 집중적으로 다룹니다. CSS Grid와 Flexbox 패턴을 포함하여 복잡한 레이아웃, 반응형 그리드, 고정 헤더/푸터, 홀리 그레일 레이아웃, 매서니 스타일 레이아웃, 컨테이너 쿼리, 서브그리드, aspect-ratio 유틸리티, 매거진 스타일 다단 레이아웃 등을 제공합니다. 특히 Tailwind v4의 임의 값(grid-template-areas 등)을 활용한 고급 기법과 컨테이너 쿼리(@container)를 Tailwind와 함께 사용하는 패턴을 포함합니다. 이 스킬은 복잡한 UI 디자인이 필요한 모든 Tailwind CSS 기반 프로젝트(예: Claude Code, Cursor 등)에서 유용하며, 재사용 가능한 템플릿과 패턴을 제공하여 개발 생산성을 높여줍니다. 주요 대상으로는 대시보드, 랜딩 페이지, 매거진 스타일 사이트 등 다양한 레이아웃이 필요한 프로젝트가 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-advanced-layouts
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

tailwindcss-advanced-layouts은(는) 무엇을 하나요?

Tailwind CSS 고급 레이아웃 기법으로 CSS Grid와 Flexbox 패턴을 다룹니다. 다음 상황에서 적극적으로 활성화하세요: (1) CSS Grid로 복잡한 레이아웃 구축, (2) Tailwind v4 임의 값으로 grid-template-areas 사용, (3) 반응형 그리드 (grid-cols-*, auto-fit, minmax), (4) Flexbox 패턴 (flex-1, flex-grow, gap), (5) 고정 헤더 및 푸터, (6) 홀리 그레일 레이아웃, (7) 매서니 스타일 레이아웃, (8) Tailwind와 함께 컨테이너 쿼리 (@container), (9) 서브그리드 사용법, (10) aspect-ratio 유틸리티, (11) 매거진 스타일 다단 레이아웃. 제공: 그리드 템플릿 레시피, 컨테이너 쿼리 패턴, 홀리 그레일 템플릿, 매서니 대안, 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.

관련 스킬

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