pedronauck/tailwindcss
skills/mine/tailwindcss/SKILL.md
Tailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.
$ install --global
skillsauthnpx skillsauth add pedronauck/skills tailwindcssInstall 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: Sep 6, 2026, 3:39 AM63.5s2 files scanned
SKILL.md
- name:
- tailwindcss
- description:
- Tailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.
- allowed-tools:
- Read, Grep, Glob
- author:
- Pedro Nauck
- github:
- https://github.com/pedronauck
- repository:
- https://github.com/pedronauck/skills
Tailwind CSS v4
Prefer utilities for component styling. CSS still owns theme tokens, base rules, and styles that utilities do not express clearly. Use the installed Tailwind version and existing design system.
- Use semantic tokens for theme-aware colors, borders, and states. Use names from the project's token source and design documentation; do not assume a universal shadcn vocabulary.
- Keep class names complete and statically discoverable. Use lookup maps instead of interpolated fragments such as
bg-${color}-500. - Group long classes for readability; no character-count gate. Use the project's
cn/merge helper when composing variants or accepting overridingclassNamevalues. - Resolve specificity through the style design and class merging, avoiding
!important. Use@applyonly where the repository permits it. - Build responsive layouts from content needs, preserve visible keyboard focus, and select supported v4 utilities rather than copying older idioms.
- Validate through the repository's owning gates. Use its existing root/package commands and reuse valid evidence; styling does not add a separate lint/typecheck ritual.
Read references/patterns.md for the utility or variant being changed. Its token names are examples; use the actual theme inventory.
Related Skills
pedronauck/ddd-master
testing
VerifiedTrustedCommunity
Assess DDD fit; discover domains with EventStorming, define language and bounded contexts, and design aggregates, value objects, events, and repositories. Excludes architecture-only audits, product specs, and CQRS/Event Sourcing catalogs.
604SKILL.mdUpdated Sep 6, 2026
pedronauck/ratatui-tui
development
VerifiedTrustedCommunity
Build terminal UIs with ratatui following 2026 Rust best practices. Use when: (1) Creating new TUI apps, (2) Adding widgets/layouts, (3) Keyboard navigation/state management, (4) Image integration via ratatui-image, (5) Async event handling, (6) Release optimization. Covers v0.30.0+ API, Elm Architecture, StatefulWidget, color-eyre.
604SKILL.mdUpdated Sep 6, 2026
pedronauck/game-changing-features
development
VerifiedTrustedCommunity
Find 10x product opportunities and high-leverage improvements. Use when user wants strategic product thinking, mentions '10x', wants to find high-impact features, or says 'what would make this 10x better', 'product strategy', or 'what should we build next'.
604SKILL.mdUpdated Sep 6, 2026
pedronauck/brainstorming
development
VerifiedTrustedCommunity
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
604SKILL.mdUpdated Sep 6, 2026