@nockdev/awf 6.2.0

package/.agent/skills/cross-cutting/tailwind/META.yaml

@@ -0,0 +1,72 @@
+name: tailwind
+version: "7.0.0"
+display: Tailwind CSS 4.0
+category: styling
+tier: 1
+priority: 2
+
+desc: "Utility-first CSS framework for Tailwind CSS 4.0 (Jan 2025). Covers CSS-first config, Oxide engine, new variants, 3D transforms,"
+
+  ## HSA Integration (v1.0.0 - YAML-based)
+  Uses DOMYH HSA BM25 search engine for pattern retrieval.
+  
+  ### Data Files (8 domains, 51 patterns)
+  - `config.yaml`: @theme, @utility, @source, @import, @variant (6)
+  - `variants.yaml`: not-*, starting, inert, nth-*, descendant (8)
+  - `utilities.yaml`: 3D transforms, gradients, field-sizing (8)
+  - `responsive.yaml`: container queries, pointer, breakpoints (6)
+  - `theme.yaml`: dark mode, CSS variables, P3 colors (5)
+  - `build.yaml`: Vite plugin, Oxide engine, Lightning CSS (6)
+  - `migration.yaml`: v3→v4 upgrade, breaking changes (6)
+  - `states.yaml`: group, peer, focus, disabled, aria (6)
+
+hsa:
+  enabled: true
+  adapter: `hsa.adapters.tailwind_adapter.TailwindAdapter`
+
+triggers:
+  file_patterns:
+    - "tailwind.config.js"
+    - "tailwind.config.ts"
+    - "*.css"
+    - "postcss.config.js"
+    - "vite.config.ts"
+  keywords:
+    # Core
+    - tailwind
+    - tailwindcss
+    - tailwind 4
+    - "@tailwindcss"
+    # v4 Features
+    - "@theme"
+    - "@utility"
+    - "@source"
+    - container query
+    # Variants
+    - utility class
+    - dark:
+    - responsive
+    - not-*
+    - starting:
+  intents:
+    - tailwind styling
+    - utility classes
+    - tailwind design
+    - css-first config
+    - tailwind migration
+
+related_skills:
+  - react
+  - vue
+  - nextjs
+  - svelte
+
+caps:
+  - Tailwind CSS 4.0 (Jan 2025)
+  - CSS-first configuration (@theme, @utility, @source)
+  - Oxide engine (5x faster builds)
+  - New variants (not-*, starting, inert, nth-*)
+  - 3D transforms & gradients
+  - Container queries
+  - P3 color palette
+  - Migration from v3

package/.agent/skills/cross-cutting/tailwind/SKILL.md

@@ -0,0 +1,344 @@
+---
+name: tailwind
+detect:
+  [
+    "tailwind.config.js",
+    "tailwind.config.ts",
+    "@tailwind",
+    '@import "tailwindcss"',
+  ]
+version: "6.1.2"
+category: styling
+tier: 1
+---
+
+# Tailwind CSS Patterns — DOMYH Awesome Code
+
+> **Version**: Tailwind CSS 4.1 (2025-2026)
+> **Philosophy**: CSS-first configuration, utility-first styling
+
+---
+
+## 🎯 When to Use This Skill
+
+Use for: Utility-first CSS, rapid UI development, design systems.
+**NOT for**: CSS-in-JS (→ styled-components), traditional CSS.
+
+---
+
+## 📦 What's New in Tailwind CSS 4.1 (2025)
+
+| Feature                   | Description           |
+| ------------------------- | --------------------- |
+| **text-shadow-\***        | Text shadow utilities |
+| **mask-\***               | Image/gradient masks  |
+| **pointer-\***            | Input device queries  |
+| **drop-shadow-\<color\>** | Colored drop shadows  |
+| **noscript variant**      | No-JS styling         |
+| **@source not**           | Ignore directories    |
+
+---
+
+## 📦 Recommended Stack
+
+| Tool                 | Use Case              |
+| -------------------- | --------------------- |
+| **Tailwind CSS 4.1** | Utility-first 🏆      |
+| **Vite plugin**      | Bundler integration   |
+| **shadcn/ui**        | Radix + Tailwind 🏆   |
+| **Headless UI**      | Accessible primitives |
+
+---
+
+## 🆕 CSS-First Configuration (v4+)
+
+```css
+/* app.css - No more tailwind.config.js! */
+@import "tailwindcss";
+
+@theme {
+  /* Colors */
+  --color-primary: #3b82f6;
+  --color-secondary: #8b5cf6;
+  --color-accent: #06b6d4;
+
+  /* Typography */
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* Spacing */
+  --spacing-18: 4.5rem;
+  --spacing-22: 5.5rem;
+
+  /* Animation */
+  --animate-slide-in: slide-in 0.3s ease-out;
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+```
+
+---
+
+## 🆕 Text Shadow Utilities (v4.1)
+
+```html
+<!-- Text shadows with size variants -->
+<h1 class="text-shadow-sm">Subtle shadow</h1>
+<h1 class="text-shadow-md">Medium shadow</h1>
+<h1 class="text-shadow-lg">Large shadow</h1>
+
+<!-- Colored text shadows -->
+<h1 class="text-shadow-lg text-shadow-blue-500/50">Blue glow effect</h1>
+
+<!-- Dark mode compatible -->
+<h1 class="text-shadow-lg dark:text-shadow-white/20">Adaptive shadow</h1>
+```
+
+---
+
+## 🆕 Mask Utilities (v4.1)
+
+```html
+<!-- Gradient masks -->
+<div class="mask-linear-to-b">Fades to transparent at bottom</div>
+
+<div class="mask-radial">Circular fade from center</div>
+
+<!-- Image masks -->
+<div class="mask-[url('/mask.svg')]">Custom shape mask</div>
+
+<!-- Combine with gradients -->
+<img src="/photo.jpg" class="mask-linear-to-r from-black to-transparent" />
+```
+
+---
+
+## 🆕 Pointer Media Queries (v4.1)
+
+```html
+<!-- Target touch devices -->
+<button
+  class="
+  p-2 pointer-fine:p-1
+  pointer-coarse:p-4 pointer-coarse:text-lg
+"
+>
+  Touch-friendly button
+</button>
+
+<!-- Hover only on pointer devices -->
+<div
+  class="
+  any-pointer-fine:hover:scale-105
+  any-pointer-coarse:active:scale-95
+"
+>
+  Adaptive interaction
+</div>
+```
+
+---
+
+## 🆕 Colored Drop Shadows (v4.1)
+
+```html
+<!-- Colored drop shadows -->
+<div class="drop-shadow-lg drop-shadow-blue-500/50">Blue shadow</div>
+
+<!-- Multiple shadows -->
+<div
+  class="
+  drop-shadow-md drop-shadow-red-500/30
+  hover:drop-shadow-lg hover:drop-shadow-red-500/50
+"
+>
+  Hover glow effect
+</div>
+```
+
+---
+
+## 🔧 Core Patterns
+
+### Component Styling
+
+```html
+<button
+  class="
+  /* Layout */
+  inline-flex items-center justify-center gap-2
+  /* Sizing */
+  px-4 py-2 min-w-32
+  /* Typography */
+  text-sm font-medium
+  /* Colors */
+  bg-primary text-white
+  /* Effects */
+  rounded-lg shadow-md
+  /* 🆕 Text shadow */
+  text-shadow-sm
+  /* States */
+  hover:bg-primary/90 focus:ring-2 focus:ring-primary/50
+  /* Transition */
+  transition-all duration-200
+  /* Disabled */
+  disabled:opacity-50 disabled:cursor-not-allowed
+"
+>
+  Click me
+</button>
+```
+
+### Responsive Design
+
+```html
+<!-- Mobile-first approach -->
+<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
+"
+></div>
+```
+
+### Container Queries
+
+```html
+<div class="@container">
+  <div class="@lg:flex @md:grid @sm:block">Adapts to container size</div>
+</div>
+```
+
+### Dark Mode
+
+```html
+<html class="dark:bg-gray-900 dark:text-white">
+  <button
+    class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+    onclick="document.documentElement.classList.toggle('dark')"
+  >
+    Toggle Theme
+  </button>
+</html>
+```
+
+---
+
+## 🎨 Design Tokens
+
+```css
+@theme {
+  /* Color Scales */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-900: #111827;
+
+  /* Semantic Colors */
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1);
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+}
+```
+
+---
+
+## 🆕 New Variants (v4.1)
+
+```html
+<!-- noscript variant -->
+<div class="hidden noscript:block">JavaScript is disabled</div>
+
+<!-- user-valid/user-invalid -->
+<input
+  class="
+  border-gray-300
+  user-valid:border-green-500
+  user-invalid:border-red-500
+"
+/>
+
+<!-- inverted-colors -->
+<div class="inverted-colors:invert">Respects OS accessibility setting</div>
+```
+
+---
+
+## ⚡ Build Optimization
+
+```css
+/* Limit theme scope */
+@theme {
+  --color-*: initial; /* Remove unused colors */
+}
+
+/* Content configuration */
+@source "./src/**/*.{html,js,ts,jsx,tsx,vue,svelte}";
+
+/* Ignore directories */
+@source not "./src/legacy/*";
+```
+
+---
+
+## ✅ Best Practices Checklist
+
+### Code Quality
+
+- [ ] Mobile-first responsive design
+- [ ] Organized utility groups
+- [ ] Minimal @apply usage
+- [ ] Consistent spacing scale
+
+### Performance
+
+- [ ] Configure content sources
+- [ ] Remove unused color scales
+- [ ] Use JIT (default in v4)
+- [ ] @source not for unused paths
+
+### Design System
+
+- [ ] Define semantic colors in @theme
+- [ ] Use CSS variables for theming
+- [ ] Document design tokens
+
+---
+
+## 🔌 HSA Integration
+
+```python
+from .agent.scripts.hsa.adapters import (
+    search_tailwind_patterns,
+    get_tailwind_utility,
+)
+
+# Search patterns
+results = search_tailwind_patterns("text shadow glow")
+
+# Get utility info
+util = get_tailwind_utility("mask-linear-to-b")
+```
+
+---
+
+_DOMYH Awesome Code • Tailwind CSS 4.1 • 2026_

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

@@ -0,0 +1,143 @@
+# Tailwind CSS 4.0 - Build & Performance Patterns
+# Vite plugin, Oxide engine, Lightning CSS, optimization
+# Source: tailwindcss.com/docs/installation (Jan 2025)
+
+metadata:
+  skill: tailwind
+  domain: build
+  version: "4.0.0"
+  updated: "2026-02-05"
+  patterns_count: 6
+
+patterns:
+  - id: build001
+    name: "Vite Plugin"
+    category: build
+    version: "4.0+"
+    description: |
+      First-party Vite plugin for optimal performance.
+      Replaces PostCSS setup. No autoprefixer needed.
+    text: "@tailwindcss/vite vite plugin performance bundler"
+    example: |
+      // vite.config.ts
+      import tailwindcss from '@tailwindcss/vite'
+
+      export default defineConfig({
+        plugins: [tailwindcss()],
+      })
+
+      /* app.css */
+      @import "tailwindcss";
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/installation/vite"
+
+  - id: build002
+    name: "PostCSS Plugin"
+    category: build
+    version: "4.0+"
+    description: |
+      PostCSS plugin for non-Vite build tools.
+      Use @tailwindcss/postcss package.
+    text: "@tailwindcss/postcss webpack next.js nuxt bundler"
+    example: |
+      // postcss.config.js
+      export default {
+        plugins: {
+          '@tailwindcss/postcss': {},
+        },
+      }
+
+      /* No autoprefixer needed - built in */
+      /* No postcss-import needed - built in */
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/installation/postcss"
+
+  - id: build003
+    name: "Oxide Engine"
+    category: performance
+    version: "4.0+"
+    description: |
+      Rust-based engine for blazing fast builds.
+      5x faster full builds, 100x faster incremental.
+    text: "oxide engine rust performance fast build speed"
+    example: |
+      /* Performance stats for v4 Oxide engine */
+
+      | Metric          | v3      | v4 Oxide |
+      |-----------------|---------|----------|
+      | Full build      | 960ms   | 105ms    |
+      | Incremental     | 10ms    | <0.2ms   |
+      | Install size    | -       | 35% less |
+
+      /* No configuration needed - automatic */
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/blog/tailwindcss-v4"
+
+  - id: build004
+    name: "Lightning CSS"
+    category: performance
+    version: "4.0+"
+    description: |
+      Built-in modern CSS processing via Lightning CSS.
+      Handles imports, prefixes, and transforms.
+    text: "lightning css autoprefixer vendor prefix modern syntax"
+    example: |
+      /* Features handled automatically by Lightning CSS */
+
+      ✓ @import bundling
+      ✓ Vendor prefixes (autoprefixer replacement)
+      ✓ CSS nesting
+      ✓ Modern color functions
+      ✓ Media query ranges
+      ✓ Custom media queries
+
+      /* No additional plugins needed */
+    severity: MEDIUM
+    docs_url: "https://lightningcss.dev/"
+
+  - id: build005
+    name: "Content Detection"
+    category: build
+    version: "4.0+"
+    description: |
+      Automatic template file detection.
+      No manual content configuration needed.
+    text: "content auto detect template source file scan"
+    example: |
+      /* v4 auto-detects these files: */
+      *.html, *.js, *.ts, *.jsx, *.tsx
+      *.vue, *.svelte, *.astro
+
+      /* Override with @source if needed */
+      @source "./src/**/*.{html,js,jsx,tsx}";
+      @source not "./src/deprecated/*";
+      @source not "./node_modules";
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/detecting-classes-in-source-files"
+
+  - id: build006
+    name: "Production Build"
+    category: optimization
+    version: "4.0+"
+    description: |
+      Optimize for production with tree-shaking
+      and minification. Remove unused styles.
+    text: "production build minify tree-shake optimize css size"
+    example: |
+      /* Optimization strategies */
+
+      /* 1. Remove unused color scales */
+      @theme {
+        --color-*: initial;
+        --color-blue-*: #...;  /* Keep only needed */
+      }
+
+      /* 2. Exclude directories */
+      @source not "./examples/*";
+      @source not "./tests/*";
+
+      /* 3. Use safelist sparingly */
+      @source inline;
+      .dynamic-class { @apply bg-blue-500; }
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/optimizing-for-production"

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

@@ -0,0 +1,109 @@
+# Tailwind CSS 4.0 - Configuration Patterns
+# @theme, @utility, @source directives for CSS-first config
+# Source: tailwindcss.com/docs/v4 (Jan 2025)
+
+metadata:
+  skill: tailwind
+  domain: config
+  version: "4.0.0"
+  updated: "2026-02-05"
+  patterns_count: 6
+
+patterns:
+  - id: cfg001
+    name: "@theme"
+    category: config
+    version: "4.0+"
+    description: |
+      CSS-first theme configuration. Define design tokens as CSS variables
+      that Tailwind uses to generate utilities. Replaces tailwind.config.js.
+    text: "@theme css variable design token color spacing font custom property"
+    example: |
+      @theme {
+        --color-primary: #3b82f6;
+        --font-sans: "Inter", sans-serif;
+        --spacing-18: 4.5rem;
+        --animate-slide-in: slide-in 0.3s ease-out;
+      }
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/theme"
+
+  - id: cfg002
+    name: "@utility"
+    category: config
+    version: "4.0+"
+    description: |
+      Define custom utility classes in CSS. Replaces @layer utilities.
+      Utilities support variants like hover:, dark:, etc.
+    text: "@utility custom class define extend plugin"
+    example: |
+      @utility no-scrollbar {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        &::-webkit-scrollbar { display: none; }
+      }
+      /* Usage: <div class="no-scrollbar hover:no-scrollbar" /> */
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/adding-custom-styles"
+
+  - id: cfg003
+    name: "@source"
+    category: config
+    version: "4.0+"
+    description: |
+      Configure content paths for utility generation. Auto-detects most files.
+      Use 'not' to exclude directories.
+    text: "@source content path glob tree shaking purge exclude"
+    example: |
+      @source "./src/**/*.{html,js,ts,jsx,tsx,vue,svelte}";
+      @source not "./src/legacy/*";
+      @source not "./node_modules";
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/detecting-classes-in-source-files"
+
+  - id: cfg004
+    name: "@import"
+    category: config
+    version: "4.0+"
+    description: |
+      Import Tailwind CSS. Replaces @tailwind base/components/utilities.
+      Lightning CSS handles import processing.
+    text: "@import tailwindcss import css entry"
+    example: |
+      /* app.css - v4 style */
+      @import "tailwindcss";
+
+      /* Legacy v3 style (deprecated) */
+      /* @tailwind base; @tailwind components; @tailwind utilities; */
+    severity: HIGH
+    docs_url: "https://tailwindcss.com/docs/installation"
+
+  - id: cfg005
+    name: "@variant"
+    category: config
+    version: "4.0+"
+    description: |
+      Define custom variants for conditional styling.
+      Works with @utility and native utilities.
+    text: "@variant custom selector pseudo class media query"
+    example: |
+      @variant hocus (&:hover, &:focus);
+      @variant touch (@media (pointer: coarse));
+      /* Usage: hocus:bg-blue-500 touch:p-4 */
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/hover-focus-and-other-states"
+
+  - id: cfg006
+    name: "@plugin"
+    category: config
+    version: "4.0+"
+    description: |
+      Load Tailwind plugins in CSS-first configuration.
+      Replaces plugins array in tailwind.config.js.
+    text: "@plugin import load typography forms container-queries"
+    example: |
+      @plugin "@tailwindcss/typography";
+      @plugin "@tailwindcss/forms";
+      @plugin "@tailwindcss/container-queries";
+    severity: MEDIUM
+    docs_url: "https://tailwindcss.com/docs/plugins"