agentsclimarketplace

Tailwindcss interactivity

Skill fusengine/agents/plugins/tailwindcss/skills/tailwindcss-interactivity

Redefining development through cognitive automation and collaborative agent systems.

Install
npx -y skills add fusengine/agents --skill tailwindcss-interactivity

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Interactivity utilities Tailwind CSS v4.1. Cursor (cursor-*), Scroll (scroll-smooth, scroll-snap-*, overscroll-*), User select (select-*), Pointer events (pointer-events-*), Touch action, Resize, Caret color, Accent color. Use when: controlling cursor appearance, scroll snap/smooth behavior, text selection, pointer-events, touch actions, resize handles, or caret/accent colors on form controls.

SKILL.md

4.8 KB, as published. Nobody here has run it

Tailwind CSS Interactivity Utilities

Comprehensive utilities for controlling user interaction behaviors and cursor styles in Tailwind CSS v4.1.

Categories

Cursor Utilities

Control the cursor appearance on elements

  • cursor-* - Standard cursors (auto, default, pointer, wait, text, move, help, not-allowed, none, etc.)
  • Support for resize cursors (col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize)
  • Zoom cursors (zoom-in, zoom-out)
  • Grab cursors (grab, grabbing)
  • Special cursors (context-menu, progress, cell, crosshair, vertical-text, alias, copy, no-drop, all-scroll)

Scroll Behavior & Snap

Manage scrolling and snap behavior

  • scroll-smooth - Enable smooth scrolling
  • scroll-snap-type - Define snap container behavior (snap-none, snap-x, snap-y, snap-both)
  • scroll-snap-align - Position snap points (snap-start, snap-center, snap-end)
  • scroll-snap-stop - Force snap stops (snap-always, snap-normal)
  • overscroll-behavior - Control overscroll area (overscroll-auto, overscroll-contain, overscroll-none)
  • Support for axis-specific variants (x, y)

User Selection

Control text selection behavior

  • select-none - Disable text selection
  • select-text - Allow text selection
  • select-all - Select all text when clicked
  • select-auto - Browser default selection

Pointer Events

Control element interactivity

  • pointer-events-none - Element cannot be interacted with
  • pointer-events-auto - Element is interactive (default)

Touch Action

Define how touch gestures are handled

  • touch-auto - Browser default touch handling
  • touch-none - Disable all touch behaviors
  • touch-pan-x - Allow horizontal panning only
  • touch-pan-y - Allow vertical panning only
  • touch-manipulation - Allow panning and zoom only (no double-tap zoom)
  • Support for directional variants (pan-up, pan-down, pan-left, pan-right, pinch-zoom)

Resize

Control element resize behavior

  • resize-none - Disable resizing
  • resize - Allow resizing in both directions
  • resize-y - Allow vertical resizing only
  • resize-x - Allow horizontal resizing only

Caret Color

Set text input cursor color

  • caret-* - Color utilities for input/textarea cursor
  • Supports all Tailwind colors and opacity modifiers
  • Full dark mode support

Accent Color

Define accent color for form controls

  • accent-* - Color utilities for checkboxes, radios, and range inputs
  • Supports all Tailwind colors and opacity modifiers
  • Full dark mode support

Pseudo-class State Variants

Style elements based on interaction state with hover:, focus:, active:, and disabled: prefixes.

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
  Click me
</button>

<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />
  • hover: - Applies on mouse hover
  • focus: - Applies when element has keyboard/pointer focus
  • active: - Applies during the click/tap
  • disabled: - Applies when the element has the disabled attribute
  • Chainable with responsive and dark-mode prefixes: md:hover:bg-blue-700, dark:hover:bg-blue-400

Resources

Detailed References

  • cursor.md - Load when picking a specific cursor value (resize, zoom, grab, special cursors)
  • scroll.md - Load when configuring scroll-snap, smooth scrolling, or overscroll containment
  • states.md - Load when styling user-select, pointer-events, touch-action, resize, caret-color, or accent-color on form controls

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.