Refactors Tailwind CSS utility classes for v4 migration, deprecated utility cleanup, verbose pattern consolidation, @apply removal, and syntax modernization without changing visual output.
npx claudepluginhub joshuarweaver/cascade-code-general-misc-1 --plugin pproenca-dot-skills-1This skill uses the workspace's default tool permissions.
Comprehensive code quality refactoring guide for Tailwind CSS applications targeting v4. Contains 50 rules across 8 categories, prioritized by migration urgency. Every transformation preserves the existing look and feel — this skill is purely about cleaner code, modern syntax, and v4 compatibility.
Applies Acme Corporation brand guidelines including colors, fonts, layouts, and messaging to generated PowerPoint, Excel, and PDF documents.
Builds DCF models with sensitivity analysis, Monte Carlo simulations, and scenario planning for investment valuation and risk assessment.
Calculates profitability (ROE, margins), liquidity (current ratio), leverage, efficiency, and valuation (P/E, EV/EBITDA) ratios from financial statements in CSV, JSON, text, or Excel for investment analysis.
Comprehensive code quality refactoring guide for Tailwind CSS applications targeting v4. Contains 50 rules across 8 categories, prioritized by migration urgency. Every transformation preserves the existing look and feel — this skill is purely about cleaner code, modern syntax, and v4 compatibility.
Companion skills: Use tailwind-ui-refactor for visual design improvements and tailwind-responsive-ui for responsive layout patterns.
Before manual migration: Run npx @tailwindcss/upgrade first — it handles most configuration and renamed utility changes automatically. Then use this skill for patterns the automated tool does not cover.
Reference these guidelines when:
@apply overuse in CSS files| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Configuration Migration | CRITICAL | config- |
| 2 | Deprecated Utility Replacement | CRITICAL | dep- |
| 3 | Renamed Utility Updates | HIGH | rename- |
| 4 | Class Consolidation | HIGH | class- |
| 5 | Arbitrary Value Cleanup | MEDIUM-HIGH | arb- |
| 6 | Syntax Modernization | MEDIUM | syntax- |
| 7 | @apply & Architecture Cleanup | MEDIUM | arch- |
| 8 | Modern Feature Adoption | LOW-MEDIUM | adopt- |
config-import-directive - Replace @tailwind directives with @importconfig-css-theme - Migrate tailwind.config.js to CSS @themeconfig-theme-function - Replace theme() function with CSS variablesconfig-theme-inline - Use @theme inline for non-utility design tokensconfig-utility-directive - Replace @layer utilities with @utilityconfig-postcss-plugin - Update PostCSS plugin to @tailwindcss/postcssconfig-content-autodetect - Remove manual content configurationconfig-custom-variant - Migrate addVariant to @custom-variantconfig-preflight-defaults - Account for Preflight default changes in v4dep-opacity-modifiers - Replace -opacity- with opacity modifiers (/50)dep-flex-shorthand - Replace flex-shrink/flex-grow with shrink/growdep-text-ellipsis - Replace overflow-ellipsis with text-ellipsisdep-decoration-utilities - Replace decoration-slice/clone with box-decoration-*dep-transform-composites - Replace transform-none with individual resetsdep-transition-properties - Update transition-[transform] to individual propertiesrename-shadow-scale - Update shadow utilities to new scalerename-blur-scale - Update blur utilities to new scalerename-rounded-scale - Update border radius utilities to new scalerename-ring-width - Replace ring with ring-3 for v3 defaultrename-gradient-utilities - Replace bg-gradient-* with bg-linear-*rename-outline-hidden - Replace outline-none with outline-hiddenclass-size-utility - Replace matching w-* h-* with size-*class-gap-over-space - Prefer gap-* over space-x/y-* in flex/gridclass-inset-shorthand - Replace top/right/bottom/left with inset-*class-border-color-explicit - Add explicit border color for v4 default changeclass-ring-color-explicit - Add explicit ring color for v4 default changeclass-redundant-display - Remove redundant display classesclass-hidden-priority - Remove display overrides for hidden attributeclass-container-utility - Replace container plugin config with @utilityarb-hex-to-theme - Replace arbitrary hex colors with theme tokensarb-spacing-to-scale - Replace arbitrary spacing with theme scalearb-dynamic-classes - Avoid dynamic class name constructionarb-breakpoint-to-theme - Replace arbitrary breakpoints with @themearb-zindex-to-scale - Replace arbitrary z-index with defined scalesyntax-css-variable-parens - Update CSS variable syntax from brackets to parenthesessyntax-variant-stacking - Update variant stacking to left-to-right ordersyntax-important-modifier - Use trailing ! for important modifiersyntax-grid-arbitrary - Use underscores in grid arbitrary valuessyntax-gradient-preservation - Reset gradient stops explicitly in variantssyntax-hover-media-query - Account for hover variant media query wrappingarch-apply-to-component - Extract @apply blocks into framework componentsarch-layer-to-utility - Replace @layer components with @utilityarch-scoped-reference - Use @reference for @apply in scoped stylesarch-safelist-to-source - Replace safelist with @source inline()arch-domain-composition - Reserve Tailwind for primitives, compose for domainadopt-container-queries - Use container queries instead of viewport breakpointsadopt-not-variant - Use not-* variant for negated conditionsadopt-in-variant - Use in-* variant to simplify parent-state stylingadopt-field-sizing - Use field-sizing-content for auto-resizing textareasadopt-starting-variant - Use starting variant for entry animations without JSRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |