@nockdev/awf 6.2.0

package/.agent/skills/cross-cutting/tailwind/data/migration.yaml

@@ -0,0 +1,149 @@
+# Tailwind CSS 4.0 - Migration Patterns
+# v3 to v4 breaking changes and upgrade guide
+# Source: tailwindcss.com/docs/upgrade-guide (Jan 2025)
+
+metadata:
+  skill: tailwind
+  domain: migration
+  version: "4.0.0"
+  updated: "2026-02-05"
+  patterns_count: 6
+
+patterns:
+  - id: mig001
+    name: "Upgrade Tool"
+    category: migration
+    version: "4.0"
+    description: |
+      Automated upgrade from v3 to v4.
+      Handles config migration, class renames, and syntax changes.
+    text: "upgrade migrate v3 v4 tool automated npx cli"
+    example: |
+      # Run upgrade tool
+      npx @tailwindcss/upgrade
+
+      # What it does:
+      # ✓ Updates dependencies
+      # ✓ Migrates tailwind.config.js → CSS @theme
+      # ✓ Renames utilities (shadow-sm → shadow-xs)
+      # ✓ Updates @tailwind directives → @import
+      # ✓ Converts @layer utilities → @utility
+
+      # Requires Node.js 20+
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/upgrade-guide"
+
+  - id: mig002
+    name: "Renamed Utilities"
+    category: breaking-change
+    version: "4.0"
+    description: |
+      Several utilities renamed for consistency.
+      Run upgrade tool or manually update.
+    text: "renamed utility shadow blur rounded outline breaking change"
+    example: |
+      /* Shadow scale shifted */
+      shadow-sm  →  shadow-xs
+      shadow     →  shadow-sm
+      shadow-md  →  shadow (same)
+      shadow-lg  →  shadow-md
+
+      /* Blur scale shifted */
+      blur-sm   →  blur-xs
+      blur      →  blur-sm
+
+      /* Rounded scale shifted */
+      rounded-sm →  rounded-xs
+      rounded    →  rounded-sm
+
+      /* Outline */
+      outline-none  →  outline-hidden
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/upgrade-guide#renamed-utilities"
+
+  - id: mig003
+    name: "Default Values Changed"
+    category: breaking-change
+    version: "4.0"
+    description: |
+      Default colors and widths changed.
+      Border and ring now use currentColor.
+    text: "default value border ring color current breaking change"
+    example: |
+      /* Border default color */
+      v3: border-gray-200 (implicit)
+      v4: currentColor (explicit gray needed)
+
+      /* Ring default */
+      v3: ring-3 ring-blue-500
+      v4: ring-1 currentColor
+
+      /* Fix: Be explicit */
+      <div class="border border-gray-200" />
+      <div class="ring ring-3 ring-blue-500" />
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/upgrade-guide#default-border-color"
+
+  - id: mig004
+    name: "Import Syntax"
+    category: breaking-change
+    version: "4.0"
+    description: |
+      @tailwind directives replaced by @import.
+      Simpler, more standard CSS syntax.
+    text: "@tailwind @import directive entry point breaking change"
+    example: |
+      /* v3 (deprecated) */
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      /* v4 */
+      @import "tailwindcss";
+
+      /* With Vite - even simpler */
+      /* Just configure vite.config.ts */
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/upgrade-guide#import-syntax"
+
+  - id: mig005
+    name: "Important Modifier"
+    category: breaking-change
+    version: "4.0"
+    description: |
+      ! modifier moved to end of class.
+      More intuitive and consistent.
+    text: "important ! modifier syntax breaking change override"
+    example: |
+      /* v3 */
+      <div class="!flex !text-red-500" />
+
+      /* v4 */
+      <div class="flex! text-red-500!" />
+
+      /* With variants */
+      /* v3: hover:!flex */
+      /* v4: hover:flex! */
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/upgrade-guide#important-modifier"
+
+  - id: mig006
+    name: "Browser Support"
+    category: breaking-change
+    version: "4.0"
+    description: |
+      v4 targets modern browsers only.
+      Safari 16.4+, Chrome 111+, Firefox 128+.
+    text: "browser support compatibility modern safari chrome firefox ie"
+    example: |
+      /* v4 browser requirements */
+      Safari 16.4+   (March 2023)
+      Chrome 111+    (March 2023)
+      Firefox 128+   (July 2024)
+
+      /* For older browsers, stay on v3 */
+      npm install tailwindcss@3.4
+
+      /* Or use transpilation manually */
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/upgrade-guide#browser-support"

package/.agent/skills/cross-cutting/tailwind/data/responsive.yaml

@@ -0,0 +1,148 @@
+# Tailwind CSS 4.0 - Responsive & Container Patterns
+# Breakpoints, container queries, pointer media queries
+# Source: tailwindcss.com/docs/responsive-design (Jan 2025)
+
+metadata:
+  skill: tailwind
+  domain: responsive
+  version: "4.0.0"
+  updated: "2026-02-05"
+  patterns_count: 6
+
+patterns:
+  - id: resp001
+    name: "Container Queries"
+    category: responsive
+    version: "4.0+"
+    description: |
+      Style elements based on container size, not viewport.
+      Built-in v4 support. No plugin needed.
+    text: "@container container query width size parent responsive"
+    example: |
+      <!-- Define container -->
+      <div class="@container">
+        <!-- Respond to container size -->
+        <div class="@md:flex @lg:grid @xl:grid-cols-3">
+          Adapts to container width
+        </div>
+      </div>
+
+      <!-- Named container -->
+      <div class="@container/sidebar">
+        <nav class="@lg/sidebar:flex">Named container</nav>
+      </div>
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/container-queries"
+
+  - id: resp002
+    name: "Pointer Queries"
+    category: responsive
+    version: "4.0+"
+    description: |
+      Detect input device type. Style differently for
+      touch (coarse) vs mouse (fine) devices.
+    text: "pointer-coarse pointer-fine touch mouse device input media query"
+    example: |
+      <!-- Touch-friendly buttons -->
+      <button class="
+        p-2 pointer-fine:p-1
+        pointer-coarse:p-4 pointer-coarse:text-lg
+      ">
+        Adapts to device
+      </button>
+
+      <!-- Hover only for mouse users -->
+      <div class="
+        any-pointer-fine:hover:scale-105
+        any-pointer-coarse:active:scale-95
+      ">
+        Adaptive interaction
+      </div>
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states#pointer"
+
+  - id: resp003
+    name: "Breakpoints"
+    category: responsive
+    version: "3.0+"
+    description: |
+      Mobile-first responsive breakpoints.
+      Default: sm(640), md(768), lg(1024), xl(1280), 2xl(1536).
+    text: "responsive sm md lg xl 2xl breakpoint mobile first screen"
+    example: |
+      <!-- Mobile-first pattern -->
+      <div class="
+        flex flex-col gap-4 p-4
+        md:flex-row md:gap-6 md:p-6
+        lg:gap-8 lg:p-8
+        xl:max-w-7xl xl:mx-auto
+      " />
+
+      <!-- Custom breakpoint -->
+      <div class="min-[940px]:grid-cols-3" />
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/responsive-design"
+
+  - id: resp004
+    name: "Max-width Breakpoints"
+    category: responsive
+    version: "3.0+"
+    description: |
+      Target screens below a breakpoint.
+      Use max-* prefix for desktop-first patterns.
+    text: "max-sm max-md max-lg responsive below under breakpoint"
+    example: |
+      <!-- Hide on mobile only -->
+      <nav class="max-md:hidden">Desktop nav</nav>
+
+      <!-- Stack on tablet and below -->
+      <div class="flex max-lg:flex-col" />
+
+      <!-- Custom max breakpoint -->
+      <div class="max-[800px]:text-sm" />
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range"
+
+  - id: resp005
+    name: "Arbitrary Breakpoints"
+    category: responsive
+    version: "3.0+"
+    description: |
+      One-off responsive values using bracket notation.
+      No need to extend theme.
+    text: "arbitrary breakpoint min max bracket notation custom"
+    example: |
+      <!-- Custom breakpoint -->
+      <div class="min-[768px]:grid min-[768px]:grid-cols-2" />
+
+      <!-- Range targeting -->
+      <div class="min-[600px]:max-[900px]:bg-blue-500" />
+
+      <!-- Arbitrary container query -->
+      <div class="@[400px]:flex @[600px]:grid" />
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/responsive-design#arbitrary-values"
+
+  - id: resp006
+    name: "prefers-reduced-motion"
+    category: accessibility
+    version: "3.0+"
+    description: |
+      Respect user's motion preferences.
+      Disable animations for sensitive users.
+    text: "motion-reduce motion-safe animation accessibility a11y preference"
+    example: |
+      <!-- Disable animations for sensitive users -->
+      <div class="
+        animate-bounce
+        motion-reduce:animate-none
+      " />
+
+      <!-- Only animate if user allows -->
+      <div class="
+        transition-none
+        motion-safe:transition-all
+        motion-safe:duration-300
+      " />
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion"

package/.agent/skills/cross-cutting/tailwind/data/states.yaml

@@ -0,0 +1,152 @@
+# Tailwind CSS 4.0 - State & Interaction Patterns
+# Hover, focus, group, peer, and form states
+# Source: tailwindcss.com/docs/hover-focus-and-other-states (Jan 2025)
+
+metadata:
+  skill: tailwind
+  domain: states
+  version: "4.0.0"
+  updated: "2026-02-05"
+  patterns_count: 6
+
+patterns:
+  - id: state001
+    name: "Group Hover"
+    category: state
+    version: "3.0+"
+    description: |
+      Style child elements when parent is hovered.
+      Add 'group' class to parent.
+    text: "group hover parent child nested interaction"
+    example: |
+      <a href="#" class="group block">
+        <img class="group-hover:opacity-75 transition" />
+        <span class="group-hover:text-blue-500">Link text</span>
+      </a>
+
+      <!-- Named groups -->
+      <div class="group/sidebar">
+        <span class="group-hover/sidebar:text-white" />
+      </div>
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover"
+
+  - id: state002
+    name: "Peer"
+    category: state
+    version: "3.0+"
+    description: |
+      Style elements based on sibling state.
+      Add 'peer' class to source sibling.
+    text: "peer sibling adjacent state validation error"
+    example: |
+      <label>
+        <input type="email" class="peer" required />
+        <span class="hidden peer-invalid:block text-red-500">
+          Invalid email
+        </span>
+      </label>
+
+      <!-- Named peers -->
+      <input type="checkbox" class="peer/toggle" />
+      <div class="hidden peer-checked/toggle:block">
+        Shown when checked
+      </div>
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states#peer"
+
+  - id: state003
+    name: "Focus States"
+    category: state
+    version: "3.0+"
+    description: |
+      Style focus states for accessibility.
+      Use focus-visible for keyboard-only focus.
+    text: "focus focus-visible focus-within keyboard accessibility ring"
+    example: |
+      <!-- Focus ring on keyboard only -->
+      <button class="
+        focus:outline-none
+        focus-visible:ring-2 focus-visible:ring-blue-500
+      ">
+        Keyboard focus ring
+      </button>
+
+      <!-- Focus within container -->
+      <div class="focus-within:ring-2 focus-within:ring-blue-500">
+        <input type="text" />
+      </div>
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states#focus"
+
+  - id: state004
+    name: "Disabled State"
+    category: state
+    version: "3.0+"
+    description: |
+      Style disabled form elements.
+      Works with disabled attribute.
+    text: "disabled state form button input opacity cursor"
+    example: |
+      <button 
+        disabled
+        class="
+          bg-blue-500 text-white
+          disabled:opacity-50
+          disabled:cursor-not-allowed
+          disabled:pointer-events-none
+        "
+      >
+        Submit
+      </button>
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states#disabled"
+
+  - id: state005
+    name: "Aria States"
+    category: state
+    version: "3.3+"
+    description: |
+      Style based on ARIA attributes.
+      Enhances accessibility patterns.
+    text: "aria accessibility a11y attribute expanded selected checked"
+    example: |
+      <!-- Accordion with aria-expanded -->
+      <button aria-expanded="true" class="aria-expanded:bg-blue-500">
+        Panel header
+      </button>
+
+      <!-- Custom aria states -->
+      <div 
+        aria-busy="true" 
+        class="aria-busy:opacity-50 aria-busy:pointer-events-none"
+      >
+        Loading state
+      </div>
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states#aria-states"
+
+  - id: state006
+    name: "Data Attributes"
+    category: state
+    version: "3.2+"
+    description: |
+      Style based on data-* attributes.
+      Useful for JavaScript-driven states.
+    text: "data attribute state active open loading js driven"
+    example: |
+      <!-- Boolean data attribute -->
+      <div data-active class="data-[active]:bg-blue-500">
+        Active item
+      </div>
+
+      <!-- Data attribute with value -->
+      <div data-size="lg" class="data-[size=lg]:text-xl">
+        Large text
+      </div>
+
+      <!-- From JavaScript -->
+      element.dataset.loading = 'true';
+      <div class="data-[loading=true]:animate-pulse" />
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes"

package/.agent/skills/cross-cutting/tailwind/data/theme.yaml

@@ -0,0 +1,126 @@
+# Tailwind CSS 4.0 - Dark Mode & Theme Patterns
+# Class-based toggling, CSS variables, semantic colors
+# Source: tailwindcss.com/docs/dark-mode (Jan 2025)
+
+metadata:
+  skill: tailwind
+  domain: theme
+  version: "4.0.0"
+  updated: "2026-02-05"
+  patterns_count: 5
+
+patterns:
+  - id: theme001
+    name: "Dark Mode (Class)"
+    category: theme
+    version: "3.0+"
+    description: |
+      Class-based dark mode toggling.
+      Add 'dark' class to html element to activate.
+    text: "dark mode class toggle theme switch light"
+    example: |
+      <html class="dark">
+        <body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+          <button 
+            class="bg-gray-200 dark:bg-gray-700"
+            onclick="document.documentElement.classList.toggle('dark')"
+          >
+            Toggle Theme
+          </button>
+        </body>
+      </html>
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/dark-mode"
+
+  - id: theme002
+    name: "CSS Variables Theme"
+    category: theme
+    version: "4.0+"
+    description: |
+      Use CSS variables for runtime theming.
+      Switch themes without class changes.
+    text: "css variable custom property runtime theme dynamic"
+    example: |
+      @theme {
+        --color-surface: #ffffff;
+        --color-text: #0f172a;
+      }
+
+      @theme dark {
+        --color-surface: #0f172a;
+        --color-text: #f8fafc;
+      }
+
+      /* Usage: <div class="bg-surface text-text" /> */
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/theme"
+
+  - id: theme003
+    name: "Semantic Colors"
+    category: theme
+    version: "4.0+"
+    description: |
+      Define semantic color tokens instead of raw values.
+      Makes theming easier across components.
+    text: "semantic color token primary secondary accent success error warning"
+    example: |
+      @theme {
+        /* Semantic colors */
+        --color-primary: #3b82f6;
+        --color-secondary: #8b5cf6;
+        --color-accent: #06b6d4;
+        
+        /* Status colors */
+        --color-success: #10b981;
+        --color-warning: #f59e0b;
+        --color-error: #ef4444;
+        
+        /* Surfaces */
+        --color-surface: #ffffff;
+        --color-surface-elevated: #f8fafc;
+      }
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/customizing-colors"
+
+  - id: theme004
+    name: "P3 Color Palette"
+    category: theme
+    version: "4.0+"
+    description: |
+      Modernized color palette using P3 wide gamut.
+      More vivid colors on supported displays.
+    text: "p3 color oklch wide gamut modern display vivid"
+    example: |
+      /* v4 uses OKLCH color space internally */
+      /* Fallback to sRGB on unsupported displays */
+
+      @theme {
+        --color-blue-500: oklch(0.58 0.22 250);
+        --color-purple-500: oklch(0.55 0.27 305);
+      }
+
+      /* Usage remains same */
+      <div class="bg-blue-500 text-purple-500" />
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/customizing-colors"
+
+  - id: theme005
+    name: "Color Opacity"
+    category: theme
+    version: "3.0+"
+    description: |
+      Apply opacity to any color using /opacity syntax.
+      Uses color-mix() in v4 for better performance.
+    text: "opacity alpha transparency color slash"
+    example: |
+      <!-- Opacity modifier -->
+      <div class="bg-blue-500/50">50% opacity blue</div>
+      <div class="text-white/80">80% white text</div>
+
+      <!-- Arbitrary opacity -->
+      <div class="bg-blue-500/[0.15]">15% opacity</div>
+
+      <!-- With dark mode -->
+      <div class="bg-black/50 dark:bg-white/50" />
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/background-color#changing-the-opacity"