fusengine/tailwindcss-interactivity
plugins/tailwindcss/skills/tailwindcss-interactivity/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add fusengine/agents tailwindcss-interactivityInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 17, 2026, 2:44 AM136.1s4 files scanned
SKILL.md
- name:
- tailwindcss-interactivity
- description:
- 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.
- user-invocable:
- false
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 scrollingscroll-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 selectionselect-text- Allow text selectionselect-all- Select all text when clickedselect-auto- Browser default selection
Pointer Events
Control element interactivity
pointer-events-none- Element cannot be interacted withpointer-events-auto- Element is interactive (default)
Touch Action
Define how touch gestures are handled
touch-auto- Browser default touch handlingtouch-none- Disable all touch behaviorstouch-pan-x- Allow horizontal panning onlytouch-pan-y- Allow vertical panning onlytouch-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 resizingresize- Allow resizing in both directionsresize-y- Allow vertical resizing onlyresize-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 hoverfocus:- Applies when element has keyboard/pointer focusactive:- Applies during the click/tapdisabled:- Applies when the element has thedisabledattribute- Chainable with responsive and dark-mode prefixes:
md:hover:bg-blue-700,dark:hover:bg-blue-400
Resources
- Official Tailwind CSS Docs
- Cursor Documentation
- Scroll Behavior Documentation
- Scroll Snap Documentation
- User Select Documentation
- Pointer Events Documentation
- Touch Action Documentation
- Resize Documentation
- Caret Color Documentation
- Accent Color Documentation
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
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026