ihj04982/tailwind-css-patterns
skills/tailwind-css-patterns/SKILL.md
Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
tools
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add ihj04982/my-cursor-settings tailwind-css-patternsInstall 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 5, 2026, 8:22 PM4.0s2 files scanned
SKILL.md
- name:
- tailwind-css-patterns
- description:
- Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
- language:
- html,tsx,jsx,vue,svelte
- framework:
- tailwindcss
- license:
- MIT
Tailwind CSS Development Patterns
Expert guide for building modern, responsive UIs with Tailwind CSS. Covers v4.1+ (CSS-first config, custom utilities).
When to Use
- Styling React/HTML components with utility classes
- Building responsive layouts with breakpoints
- Flexbox and grid layouts, spacing, typography, colors
- Custom design systems, mobile-first, dark mode
Core Concepts
Utility-first: Apply styles in markup (e.g. bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded).
Responsive: Mobile-first breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. Example: w-full md:w-1/2 lg:w-1/3.
Additional Resources
For layout utilities (flexbox, grid), spacing, typography, colors, component patterns, responsive patterns, dark mode, animations, and performance optimization, see reference.md.
Related Skills
ihj04982/wcag-audit-patterns
development
VerifiedTrustedCommunity
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
SKILL.mdUpdated Apr 5, 2026
ihj04982/vs-research-ideate
research
VerifiedTrustedCommunity
Generate high-entropy research (자료조사) and ideas (아이디어) using Verbalized Sampling to avoid mode collapse and maximize creativity and novelty.
SKILL.mdUpdated Apr 5, 2026
ihj04982/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
SKILL.mdUpdated Apr 5, 2026
ihj04982/update-docs
documentation
VerifiedTrustedCommunity
Sync documentation from source-of-truth (package.json, .env.example). Generates CONTRIB.md, RUNBOOK.md. Use when updating project docs or after adding scripts/env vars.
SKILL.mdUpdated Apr 5, 2026