agent-creator
Use when creating expert agents. Generates agent.md with frontmatter, hooks, required sections, and skill references.
@fusengineInstall SkillDevelopment
Skill
/tailwindcss-layout
Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries.
Claude Code
$ npx -y skills add fusengine/claude-plugins --skill tailwindcss-layout --agent claude-code
Codex
$ npx skills add fusengine/claude-plugins --skill tailwindcss-layout -a codex -y
Cursor
$ npx skills add fusengine/claude-plugins --skill tailwindcss-layout -a cursor -y
Gemini CLI
$ npx skills add fusengine/claude-plugins --skill tailwindcss-layout -a gemini-cli -y
GitHub Copilot
$ npx skills add fusengine/claude-plugins --skill tailwindcss-layout -a github-copilot -y
OpenCode
$ npx skills add fusengine/claude-plugins --skill tailwindcss-layout -a opencode -y
Windsurf
$ npx skills add fusengine/claude-plugins --skill tailwindcss-layout -a windsurf -y
SKILL.md
tailwindcss-layout.SKILL.mdname: tailwindcss-layout
description: "Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries."
user-invocable: false
<objective> Layout utilities for Tailwind CSS v4.3: Flexbox (`flex`, direction, `justify-*`, `items-*`, `gap`), Grid (`grid-cols-*`, `grid-rows-*`, `place-*`), Position (`absolute`/`relative`/`fixed`/`sticky`, `inset-*`, `z-*`), Display (`block`/`inline`/`flex`/`grid`/`hidden`), and Container Queries (`@container`, `@md`/`@lg` container-relative breakpoints).
Also covers multi-directional spacing (`gap`, `space-x`/`space-y`) and multi-axis alignment utilities. </objective>
Tailwind CSS Layout Utilities (v4.3)
Layout utilities for building responsive layouts with Flexbox, Grid, Positioning, and Container Queries.
Core Topics
- **Flexbox**: `flex`, `flex-direction`, `justify-content`, `align-items`, `gap`
- **Grid**: `grid`, `grid-template-columns`, `grid-template-rows`, `place-items`, `place-content`
- **Position**: `absolute`, `relative`, `fixed`, `sticky`, `inset`, `z-index`
- **Display**: `block`, `inline`, `inline-block`, `flex`, `grid`, `hidden`
- **Container Queries**: `@container`, `@container-size` (since v4.3, size container for `cqb`/`cqh` units), `@md`, `@lg`, responsive container sizing
- **Spacing**: `gap`, `space-x`, `space-y`, multi-directional spacing
- **Alignment**: `justify-start`, `items-center`, `place-content`, multi-axis alignment
- **Inset**: `inset`, `inset-x`, `inset-y`, `top`, `right`, `bottom`, `left`, logical `inset-s`/`inset-e`/`inset-bs`/`inset-be` (since v4.2; `start-*`/`end-*` deprecated)
Display
<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>
References
- `/flexbox.md` - Flexbox utilities, flex direction, flex grow/shrink
- `/grid.md` - Grid layout, columns, rows, gaps, placement
- `/position.md` - Position utilities, absolute/relative/fixed/sticky, stacking
Read more
name: tailwindcss-layout description: "Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries." user-invocable: false
<objective> Layout utilities for Tailwind CSS v4.3: Flexbox (`flex`, direction, `justify-*`, `items-*`, `gap`), Grid (`grid-cols-*`, `grid-rows-*`, `place-*`), Position (`absolute`/`relative`/`fixed`/`sticky`, `inset-*`, `z-*`), Display (`block`/`inline`/`flex`/`grid`/`hidden`), and Container Queries (`@container`, `@md`/`@lg` container-relative breakpoints).
Also covers multi-directional spacing (`gap`, `space-x`/`space-y`) and multi-axis alignment utilities. </objective>
Tailwind CSS Layout Utilities (v4.3)
Layout utilities for building responsive layouts with Flexbox, Grid, Positioning, and Container Queries.
Core Topics
- **Flexbox**: `flex`, `flex-direction`, `justify-content`, `align-items`, `gap`
- **Grid**: `grid`, `grid-template-columns`, `grid-template-rows`, `place-items`, `place-content`
- **Position**: `absolute`, `relative`, `fixed`, `sticky`, `inset`, `z-index`
- **Display**: `block`, `inline`, `inline-block`, `flex`, `grid`, `hidden`
- **Container Queries**: `@container`, `@container-size` (since v4.3, size container for `cqb`/`cqh` units), `@md`, `@lg`, responsive container sizing
- **Spacing**: `gap`, `space-x`, `space-y`, multi-directional spacing
- **Alignment**: `justify-start`, `items-center`, `place-content`, multi-axis alignment
- **Inset**: `inset`, `inset-x`, `inset-y`, `top`, `right`, `bottom`, `left`, logical `inset-s`/`inset-e`/`inset-bs`/`inset-be` (since v4.2; `start-*`/`end-*` deprecated)
Display
<div class="block">Block</div> <div class="inline">Inline</div> <div class="inline-block">Inline-block</div> <div class="flex">Flex</div> <div class="grid">Grid</div> <div class="hidden">Hidden</div>
References
- `/flexbox.md` - Flexbox utilities, flex direction, flex grow/shrink
- `/grid.md` - Grid layout, columns, rows, gaps, placement
- `/position.md` - Position utilities, absolute/relative/fixed/sticky, stacking
Stats
36
Stars
6
Forks
Active
Maintenance
CSS
Language
MIT
License
Last commit
Created
Ships withfusengine-claude-plugins
A plugin ecosystem that turns Claude Code into a supervised, multi-agent development environment.
34200 skills40 agents
Stars on GitHub
Momentum
- stars in total
- 34
Other skills on fusengine-claude-plugins.
@fusengineInstall Skillapex-methodology
Use when starting ANY development task -- feature, bug fix, refactor, hotfix (triggers: implement, create, build, fix, add…
@fusengineInstall Skillbrainstorming
Use when creating a feature/component or adding functionality. Fires BEFORE APEX Analyze to refine requirements via structured…
@fusengineInstall Skillchallenge
Use before a root-cause, done/verified claim, irreversible action, or 2nd-time fix reaches the owner (APEX or plain…
@fusengineInstall Skillcode-quality
Use when validating code quality after modifications -- SOLID compliance, DRY duplication, linter errors, architecture…
@fusengineInstall Skillelicitation
Use when an expert agent self-reviews and self-corrects code after the Execute phase, before sniper validation (BMAD-METHOD…
@fusengineInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about tailwindcss-layout.
- Which coding agents can use tailwindcss-layout?
- tailwindcss-layout installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.