Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

iberi22/Tailwind CSS

Name: Tailwind CSS
Author: iberi22

skills/tailwindcss/SKILL.md

npx skillsauth add iberi22/swal-skills Tailwind CSS

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Content Configuration

content array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production
Glob patterns: "./src/**/*.{js,jsx,ts,tsx,html}" covers nested directories
Dynamic class names like bg-${color}-500 won't be detected—use complete class names or safelist
Check production build size—if unexpectedly small, content paths are wrong

Responsive Prefixes

Mobile-first: unprefixed styles apply to all sizes, md: applies at medium AND above
sm:hidden md:block means hidden on small, visible on medium+—not "only on medium"
Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)
Custom breakpoints in config override defaults—use extend.screens to add without replacing

Dark Mode

dark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle
Dark class on <html> or <body>, not on individual components
dark:bg-gray-900 only applies when ancestor has class="dark"
System preference: darkMode: 'media' uses prefers-color-scheme

State Variants

hover:, focus:, active: work as expected
group-hover: requires group class on parent—child reacts to parent hover
peer-focus: requires peer class on sibling AND sibling must come first in DOM
Stack variants: dark:hover:bg-gray-700 applies on hover in dark mode

Arbitrary Values

bg-[#1da1f2] for one-off colors—brackets for any arbitrary value
w-[calc(100%-2rem)] for calc expressions
grid-cols-[1fr_2fr_1fr] underscores for spaces in values
Arbitrary properties: [mask-type:alpha] for unsupported CSS properties

@apply Traps

@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected
Order in @apply matters unlike HTML classes—later utilities override earlier
Prefer HTML classes over @apply—easier to maintain, better tree-shaking
If you must use @apply, keep it simple: base styles only

Configuration

extend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colors
Top-level replaces defaults: colors: { brand: '#xxx' } removes all default colors
theme() function in CSS: border-color: theme('colors.gray.200')
Plugin order matters—later plugins can override earlier ones

Important Modifier

! prefix forces important: !mt-4 generates margin-top: 1rem !important
Use sparingly—usually indicates specificity battle that should be fixed
important: true in config makes ALL utilities important—avoid, breaks third-party CSS
important: '#app' scopes specificity to selector—better than global important

Common Mistakes

class="px-4 px-6" last one wins in stylesheet, not in HTML—both get applied, cascade decides
Forgetting overflow-hidden with rounded-* on parent with absolute children
h-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)
truncate needs width constraint or max-w-* to actually truncate

Performance

JIT is default since v3—generates only used classes, no purge needed
Avoid safelist with patterns like bg-*—defeats tree-shaking
@layer components for reusable component styles—proper cascade order
Large arbitrary values generate unique classes—extract to config if repeated

iberi22/Tailwind CSS

skills/tailwindcss/SKILL.md

Write Tailwind utility classes with proper responsive design, dark mode, and configuration.

tools

Updated Apr 23, 2026

$ install --global

skillsauth

npx skillsauth add iberi22/swal-skills Tailwind CSS

Install 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.

Scanners Passed

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 23, 2026, 5:32 PM25.9s2 files scanned

SKILL.md

name:: Tailwind CSS
description:: Write Tailwind utility classes with proper responsive design, dark mode, and configuration.
license:: MIT
author:: swal
version:: 1.0.0
emoji:: 🌊

Content Configuration

content array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production
Glob patterns: "./src/**/*.{js,jsx,ts,tsx,html}" covers nested directories
Dynamic class names like bg-${color}-500 won't be detected—use complete class names or safelist
Check production build size—if unexpectedly small, content paths are wrong

Responsive Prefixes

Mobile-first: unprefixed styles apply to all sizes, md: applies at medium AND above
sm:hidden md:block means hidden on small, visible on medium+—not "only on medium"
Breakpoints: sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)
Custom breakpoints in config override defaults—use extend.screens to add without replacing

Dark Mode

dark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle
Dark class on <html> or <body>, not on individual components
dark:bg-gray-900 only applies when ancestor has class="dark"
System preference: darkMode: 'media' uses prefers-color-scheme

State Variants

hover:, focus:, active: work as expected
group-hover: requires group class on parent—child reacts to parent hover
peer-focus: requires peer class on sibling AND sibling must come first in DOM
Stack variants: dark:hover:bg-gray-700 applies on hover in dark mode

Arbitrary Values

bg-[#1da1f2] for one-off colors—brackets for any arbitrary value
w-[calc(100%-2rem)] for calc expressions
grid-cols-[1fr_2fr_1fr] underscores for spaces in values
Arbitrary properties: [mask-type:alpha] for unsupported CSS properties

@apply Traps

@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected
Order in @apply matters unlike HTML classes—later utilities override earlier
Prefer HTML classes over @apply—easier to maintain, better tree-shaking
If you must use @apply, keep it simple: base styles only

Configuration

extend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colors
Top-level replaces defaults: colors: { brand: '#xxx' } removes all default colors
theme() function in CSS: border-color: theme('colors.gray.200')
Plugin order matters—later plugins can override earlier ones

Important Modifier

! prefix forces important: !mt-4 generates margin-top: 1rem !important
Use sparingly—usually indicates specificity battle that should be fixed
important: true in config makes ALL utilities important—avoid, breaks third-party CSS
important: '#app' scopes specificity to selector—better than global important

Common Mistakes

class="px-4 px-6" last one wins in stylesheet, not in HTML—both get applied, cascade decides
Forgetting overflow-hidden with rounded-* on parent with absolute children
h-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)
truncate needs width constraint or max-w-* to actually truncate

Performance

JIT is default since v3—generates only used classes, no purge needed
Avoid safelist with patterns like bg-*—defeats tree-shaking
@layer components for reusable component styles—proper cascade order
Large arbitrary values generate unique classes—extract to config if repeated

Related Skills

iberi22/xavier2-context

testing

VerifiedTrustedCommunity

Xavier2 as the central context engine for SWAL - intelligent memory, decision-making, and context orchestration. Xavier2 is the CEO brain that stores memories, coordinates agents, and maintains project state.

SKILL.mdUpdated Apr 30, 2026

iberi22/xavier2-context

iberi22/coding-agent

tools

VerifiedTrustedCommunity

Delegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (spawn in temp dir), (3) refactoring large codebases, (4) iterative coding that needs file exploration. NOT for: simple one-liner fixes (just edit), reading code (use read tool), thread-bound ACP harness requests in chat (for example spawn/run Codex or Claude Code in a Discord thread; use sessions_spawn with runtime:"acp"), or any work in ~/clawd workspace (never spawn agents here). Claude Code: use --print --permission-mode bypassPermissions (no PTY). Codex/Pi/OpenCode: pty:true required.

SKILL.mdUpdated Apr 30, 2026

iberi22/worldexams-validator

testing

VerifiedTrustedCommunity

Validador automático para WorldExams. Verifica integridad técnica y calidad pedagógica, activando regeneración automática si es necesario.

SKILL.mdUpdated Apr 23, 2026

iberi22/worldexams-validator

iberi22/worldexams-generator

tools

VerifiedTrustedCommunity

Generador de bundles de preguntas ICFES Colombia (Matemáticas, Lectura Crítica, Ciencias, Sociales, Inglés) para grados 6, 9 y 11 usando MiniMax MCP.

SKILL.mdUpdated Apr 23, 2026

iberi22/worldexams-generator

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/iberi22/swal-skills.git

# Copy into Claude Code skills folder (global)
cp -r swal-skills/skills/tailwindcss ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

iberi22/swal-skills

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT