Skip to content

/tailwindcss-utilities

Use when needing a single entry point to find which categorical tailwindcss-* skill covers a given utility class. Router/index only - do NOT use for actual class content.

shell
$ npx -y skills add fusengine/agents --skill tailwindcss-utilities --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/tailwindcss-utilities
How auto-invocation works

Context preview

The summary Claude sees to decide when to auto-load this skill.

Use when needing a single entry point to find which categorical tailwindcss-* skill covers a given utility class. Router/index only - do NOT use for actual class content.

SKILL.md

tailwindcss-utilities.SKILL.md
name: tailwindcss-utilities
description: "Use when needing a single entry point to find which categorical tailwindcss-* skill covers a given utility class. Router/index only - do NOT use for actual class content."
user-invocable: false

<objective> A routing index over the categorical Tailwind CSS skills — layout, spacing, typography, backgrounds, effects, borders, transforms — mapping utility-class families (flexbox/grid, padding/margin, font/text, colors, shadows, borders, transforms/transitions) to the specific `tailwindcss-*` skill and section that documents them.

Contains no utility-class content itself; every entry links straight to the category skill that owns the worked examples. </objective>

Tailwind CSS Utilities Reference

Layout

  • Flexbox, Grid, Position, Display -> [tailwindcss-layout](../tailwindcss-layout/SKILL.md)

Spacing

  • Padding -> [tailwindcss-spacing](../tailwindcss-spacing/SKILL.md#padding-classes)
  • Margin -> [tailwindcss-spacing](../tailwindcss-spacing/SKILL.md#margin-classes)
  • Width -> [tailwindcss-sizing](../tailwindcss-sizing/SKILL.md#width-utilities)
  • Height -> [tailwindcss-sizing](../tailwindcss-sizing/SKILL.md#height-utilities)

Typography

  • Font size, font weight, text align, line height -> [tailwindcss-typography](../tailwindcss-typography/SKILL.md)

Colors & Effects

  • Color palette, background color -> [tailwindcss-backgrounds](../tailwindcss-backgrounds/SKILL.md#background-colors)
  • Box shadow -> [tailwindcss-effects](../tailwindcss-effects/SKILL.md#box-shadow)
  • Opacity -> [tailwindcss-effects](../tailwindcss-effects/SKILL.md#opacity)

Borders

  • Border width, border radius, outline -> [tailwindcss-borders](../tailwindcss-borders/SKILL.md)

Transforms

  • Transform, translate, rotate, scale -> [tailwindcss-transforms](../tailwindcss-transforms/SKILL.md#transform-utilities)

Transitions

  • Transition property, animation -> [tailwindcss-transforms](../tailwindcss-transforms/SKILL.md#transition-utilities)
Read more
Read it on GitHub ↗
Ships withfusengine-agents

A plugin ecosystem that turns Claude Code into a supervised, multi-agent development environment.

Get the whole plugin, auto-invoked
Stats
22
Stars
0
Views
3
Forks
Active
Maintenance
CSS
Language
MIT
License
1d ago
Last commit
6mo ago
Created

Repo: fusengine/agents