fusengine/tailwindcss-responsive
plugins/tailwindcss/skills/tailwindcss-responsive/SKILL.md
Responsive design utilities in Tailwind CSS v4: default breakpoints (sm/md/lg/xl/2xl), custom breakpoints via @theme, container queries (@container, @md, @lg), and mobile-first patterns. Use when: applying responsive variants at different screen widths, defining a custom breakpoint, or building container-query-based responsive components.
$ install --global
skillsauthnpx skillsauth add fusengine/agents tailwindcss-responsiveInstall 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:45 AM177.3s1 file scanned
SKILL.md
- name:
- tailwindcss-responsive
- description:
- Responsive design utilities in Tailwind CSS v4: default breakpoints (sm/md/lg/xl/2xl), custom breakpoints via @theme, container queries (@container, @md, @lg), and mobile-first patterns. Use when: applying responsive variants at different screen widths, defining a custom breakpoint, or building container-query-based responsive components.
- user-invocable:
- false
Responsive Design
Default Breakpoints
| Variant | Size | CSS |
|---------|--------|-----|
| sm: | 40rem (640px) | @media (width >= 40rem) |
| md: | 48rem (768px) | @media (width >= 48rem) |
| lg: | 64rem (1024px) | @media (width >= 64rem) |
| xl: | 80rem (1280px) | @media (width >= 80rem) |
| 2xl: | 96rem (1536px) | @media (width >= 96rem) |
Custom breakpoint
@theme {
--breakpoint-3xl: 120rem;
}
/* Usage: 3xl:grid-cols-6 */
Container Queries v4
<div class="@container">
<div class="@md:grid-cols-2 @lg:grid-cols-3">
<!-- Responsive to container -->
</div>
</div>
Mobile-first
<div class="text-sm md:text-base lg:text-lg">
<!-- Small screens first -->
</div>
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