Communitygithub.com

josiahsiegel/tailwindcss-advanced-layouts

CSS Grid や Flexbox パターンを用いた Tailwind CSS の高度なレイアウトテクニックを提供します。

tailwindcss-advanced-layouts とは?

このスキルは、Tailwind CSS を使用して複雑なレイアウトを構築するための高度なテクニックを集めたものです。CSS Grid や Flexbox を駆使した具体的なパターン(グリッドテンプレート、コンテナクエリ、Holy Grail レイアウト、メイソンリーレイアウト代替案、アスペクト比ユーティリティなど)を提供します。特に Tailwind v4 の任意値(arbitrary values)を利用した `grid-template-areas` の設定方法や、`@container` を用いたコンテナクエリパターン、`auto-fit` や `minmax` を使用したレスポンシブグリッドの実装例などが含まれています。このスキルを活用することで、開発者は従来の Tailwind CSS のユーティリティクラスを超えた、より洗練されたレイアウトを効率的に実現できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace/tree/main/skills/tailwindcss-advanced-layouts

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

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) Holy Grail レイアウト、(7) メイソンリーレイアウトスタイル、(8) コンテナクエリ(@container)の Tailwind での使用、(9) subgrid の使用方法、(10) アスペクト比ユーティリティ、(11) 雑誌スタイルのマルチカラムレイアウト。提供内容:グリッドテンプレートレシピ、コンテナクエリパターン、Holy Grail テンプレート、メイソンリーレイアウトの代替案、アスペクト比の例。

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.

関連スキル