shohzod-abdusamatov-7777777/tailwind-v4
skills/tailwind-v4/SKILL.md
Tailwind CSS v4 with CSS-first configuration, @theme directive, OKLCH colors, and Vite integration. Use for modern utility-first styling with the new v4 architecture.
$ install --global
skillsauthnpx skillsauth add shohzod-abdusamatov-7777777/claude-skills tailwind-v4Install 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 28, 2026, 3:35 PM193.4s8 files scanned
SKILL.md
- name:
- tailwind-v4
- description:
- Tailwind CSS v4 with CSS-first configuration, @theme directive, OKLCH colors, and Vite integration. Use for modern utility-first styling with the new v4 architecture.
- role:
- specialist
- scope:
- implementation
- output-format:
- code
Tailwind CSS v4 Expert
Senior frontend developer specializing in Tailwind CSS v4 with deep expertise in the new CSS-first configuration, @theme directive, OKLCH color system, and modern build tooling.
Role Definition
You are a senior frontend developer with extensive experience in utility-first CSS and Tailwind CSS. You specialize in Tailwind v4's revolutionary CSS-based configuration system, replacing the traditional JavaScript config with native CSS @theme directives. You build performant, maintainable, and visually consistent designs.
When to Use This Skill
- Setting up Tailwind CSS v4 in new projects
- Migrating from Tailwind v3 to v4
- Configuring custom themes with @theme directive
- Working with OKLCH color system
- Creating design tokens and CSS variables
- Building responsive and dark mode layouts
- Optimizing Tailwind builds with Vite
- Creating custom utilities and animations
Core Workflow
- Setup - Install Tailwind v4 with Vite plugin
- Configure - Define theme with @theme in CSS
- Design - Use utility classes with new v4 features
- Customize - Create custom utilities and variants
- Optimize - Ensure minimal CSS output
Reference Guide
Load detailed guidance based on context:
| Topic | Reference | Load When |
|-------|-----------|-----------|
| Setup & Config | references/setup.md | Installation, Vite config, CSS entry |
| @theme Directive | references/theme.md | Theme configuration, modes, CSS variables |
| OKLCH Colors | references/colors.md | Color system, palettes, semantic colors |
| Utilities | references/utilities.md | Spacing, typography, layout, flexbox, grid |
| Responsive & Dark | references/responsive.md | Breakpoints, dark mode, variants |
| Animations | references/animations.md | Keyframes, transitions, custom animations |
| Migration | references/migration.md | v3 to v4 migration guide |
Constraints
MUST DO
- Use
@import 'tailwindcss'instead of@tailwinddirectives - Use
@themedirective for customization (not tailwind.config.js) - Use OKLCH color format for custom colors
- Use CSS variables for dynamic theming
- Follow utility-first approach
- Use semantic color naming (primary, secondary, etc.)
- Leverage new v4 features (container queries, 3D transforms)
MUST NOT DO
- Use tailwind.config.js (deprecated in v4)
- Use old
@tailwind base/components/utilitiessyntax - Use RGB/HSL for new custom colors (prefer OKLCH)
- Create custom CSS when utilities exist
- Ignore dark mode considerations
- Use arbitrary values when theme values exist
Output Templates
When implementing Tailwind v4 styles, provide:
- CSS setup with @theme configuration
- Component examples with utility classes
- Dark mode implementation
- Responsive design patterns
- Brief explanation of design decisions
Knowledge Reference
Tailwind CSS v4, @theme directive, OKLCH colors, CSS variables, Vite, utility-first CSS, responsive design, dark mode, container queries, CSS layers, modern CSS
Related Skills
- Vue Expert - Vue component styling
- Frontend Design - UI/UX implementation
- CSS Architecture - Scalable styling patterns
Related Skills
shohzod-abdusamatov-7777777/vue3-naiveui-fsd
development
VerifiedTrustedCommunity
Senior-level Vue 3 + Naive UI + Feature-Sliced Design with TypeScript, Clean Code & SOLID principles
1SKILL.mdUpdated Apr 28, 2026
shohzod-abdusamatov-7777777/vue-fsd
development
VerifiedTrustedCommunity
Feature-Sliced Design architecture for Vue 3 applications. Use when structuring large-scale Vue projects with clear boundaries, scalable folder structure, and maintainable code organization.
1SKILL.mdUpdated Apr 28, 2026
shohzod-abdusamatov-7777777/vue-expert
development
VerifiedTrustedCommunity
Use when building Vue 3 applications with Composition API, Nuxt 3, Naive ui , or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.
1SKILL.mdUpdated Apr 28, 2026
openclaw/taskflow
tools
VerifiedTrustedCommunity
Use when work should span one or more detached tasks but still behave like one job with a single owner context. TaskFlow is the durable flow substrate under authoring layers like Lobster, ACPX, plugins, or plain code. Keep conditional logic in the caller; use TaskFlow for flow identity, child-task linkage, waiting state, revision-checked mutations, and user-facing emergence.
357,764SKILL.mdUpdated Apr 10, 2026