fusengine/plugins/tailwindcss/skills/tailwindcss-custom-styles
plugins/tailwindcss/skills/tailwindcss-custom-styles/SKILL.md
--- name: tailwindcss-custom-styles description: @utility, @variant, @apply, custom CSS user-invocable: false --- # Custom Styles ## @utility - Create a utility ```css @utility glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); } /* Usage: class="glass-effect hover:glass-effect" */ ``` ## @variant - Conditional style ```css .card { background: white; @variant dark { background: #1a1a2e; } @variant hover { transform: scale(1.05); } } ``` ## @custom-var
$ install --global
skillsauthnpx skillsauth add fusengine/agents plugins/tailwindcss/skills/tailwindcss-custom-stylesInstall 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: Apr 4, 2026, 11:47 PM58.3s1 file scanned
SKILL.md
- name:
- tailwindcss-custom-styles
- description:
- @utility, @variant, @apply, custom CSS
- user-invocable:
- false
Custom Styles
@utility - Create a utility
@utility glass-effect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
}
/* Usage: class="glass-effect hover:glass-effect" */
@variant - Conditional style
.card {
background: white;
@variant dark { background: #1a1a2e; }
@variant hover { transform: scale(1.05); }
}
@custom-variant - New variant
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
/* Usage: theme-midnight:bg-black */
@apply - Inline utilities
.btn-primary {
@apply bg-blue-500 text-white px-4 py-2 rounded-lg;
}
@layer - CSS organization
@layer components {
.card { @apply bg-white shadow-md rounded-xl p-4; }
}
Related Skills
fusengine/seo-entity
development
VerifiedTrustedCommunity
Use when optimizing entity-based / semantic SEO 2026. Covers entity maps, Google Knowledge Graph resolution, salience scoring, passage-level ranking, about/sameAs/knowsAbout schema, Cloud Natural Language API validation.
13SKILL.mdUpdated Jun 4, 2026
fusengine/seo
development
VerifiedTrustedCommunity
Use when running SEO, GEO, schema, Core Web Vitals, sitemap, hreflang, E-E-A-T, AI Overviews, technical SEO, or structured data tasks. Covers full-site audits, single-page analysis, schema markup, content quality, AI search optimization, local SEO, sitemap/robots, internal linking, semantic clustering, and search experience.
13SKILL.mdUpdated May 17, 2026
fusengine/seo-sxo
development
VerifiedTrustedCommunity
Use when optimizing search experience (SXO). Covers intent matching, user personas, user stories, page-type analysis, dwell time, scroll depth, pogo-sticking prevention.
13SKILL.mdUpdated May 17, 2026
fusengine/seo-local
development
VerifiedTrustedCommunity
Use when optimizing local SEO. Covers Google Business Profile, NAP consistency, citations, reviews acquisition, Local Pack ranking, location pages, LocalBusiness schema.
13SKILL.mdUpdated May 17, 2026