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: Jul 10, 2026, 7:34 AM152.4s2 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
Style with utility classes only, and prefer v4 utilities over v3 idioms and hand-written CSS.
Design tokens (theme-safe)
Every color, background, and border class uses a semantic token so theme and dark-mode switching stays automatic. Reach for a token, never a literal like bg-white or bg-blue-500:
- Backgrounds —
bg-background,bg-card,bg-muted,bg-popover - Text —
text-foreground,text-muted-foreground,text-card-foreground - Borders —
border-border,border-input,border-ring - Actions —
bg-primary text-primary-foreground,bg-secondary text-secondary-foreground - States —
bg-destructive text-destructive-foreground,bg-accent text-accent-foreground - Shades — tune with the opacity modifier (
bg-primary/90), not a new color.
Class conventions
- Break class strings over 100 characters into a logical array joined into
cn()/clsx(). - Compose conflicting classes through
tailwind-mergeso the last value wins. - Use complete, static class names — a lookup map for variants, never an interpolated
bg-${color}-500. - Extract shared styles by composing utilities; reserve
@applyfor element defaults in@layer base. - Resolve specificity through class order and merging, not
!important.
Reach for v4
Default to v4 utilities: size-10 over w-10 h-10, h-dvh/h-svh for viewport height, @container queries, bg-(--var) for CSS variables, text-shadow-*, text-balance/text-pretty. Build layouts mobile-first, adding sm:/md:/lg: for larger screens.
Before finishing
- Colors, backgrounds, and borders all use semantic tokens.
- Long class strings broken into arrays; class names static;
@applyonly in the base layer; no!important. focus-visible:used for keyboard focus rings.pnpm run lintandpnpm run typecheckpass.
For copy-ready examples and the full utility/variant catalog — extended v4 utilities, focus/peer/group/ARIA variants, dark mode, and anti-pattern examples — see references/patterns.md; when a utility or variant you need is not listed above, read it before choosing classes.
Related Skills
pedronauck/deep-review
development
VerifiedTrustedCommunity
Deep review of branch diffs, working trees, or GitHub PRs at any size. Use when the user asks for CodeRabbit-grade review, an incremental re-review after new pushes, publication of findings to a PR, a cross-LLM peer-review verdict round, or conformance review against spec artifacts. Don't use for applying fixes, reviewing specs or PRDs as documents, or quick single-file feedback.
520SKILL.mdUpdated Jul 18, 2026
pedronauck/herdr-orchestration
tools
VerifiedTrustedCommunity
Orchestrate Claude and Codex worker TUIs from a controller agent through herdr panes and the herdr socket CLI. Use when delegating bounded tasks to herdr worker panes, running user-activated plan-first delegations (Claude Code plan mode, Codex Plan mode), waiting on native agent status (idle, working, blocked, done), or verifying worker reports. Workers launch as interactive TUIs via herdr agent start — never through headless runners (compozy exec, claude -p, codex exec). Not for cmux workspaces (see cmux-orchestration) and not for end-user herdr control.
520SKILL.mdUpdated Jul 11, 2026
pedronauck/tanstack
tools
VerifiedTrustedCommunity
TanStack Query, Router, and Form patterns for React. Use when writing useQuery/queryOptions, mutations, caching, file-based routes, search params, loaders, or TanStack Form validation. Don't use for TanStack Start, TanStack DB/collections, Zustand client state, or non-TanStack routing.
520SKILL.mdUpdated Jun 13, 2026
pedronauck/impeccable
development
VerifiedTrustedCommunity
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
520SKILL.mdUpdated May 14, 2026