@nockdev/awf 6.2.0 → 6.2.2

package/.agent/skills/cross-cutting/domyh-design/ADVANCED.md

@@ -0,0 +1,247 @@
+---
+name: domyh-design
+tier: 3
+description: "Advanced UI/UX reference: /visualize integration, desktop stacks, design thinking, component mapping, platform guidelines"
+---
+
+# UI/UX Pro Max — Advanced Reference (T3)
+
+> Detailed reference for complex UI/UX scenarios.
+> For quick reference and workflow, see `SKILL.md`.
+
+---
+
+## `/visualize` Command Integration
+
+> Map each `/visualize` sub-command to the correct skill data source
+
+| `/visualize` Command          | Data Source                                               | Lookup Method            |
+| ----------------------------- | --------------------------------------------------------- | ------------------------ |
+| `/visualize system`           | Multi-domain (product+style+color+typography+landing)     | Read multiple YAML files |
+| `/visualize web [page]`       | `data/stacks/html-tailwind.yaml`                          | Direct read              |
+| `/visualize mobile` (Flutter) | `data/stacks/flutter.yaml`                                | Direct read              |
+| `/visualize mobile` (SwiftUI) | `data/stacks/swiftui.yaml`                                | Direct read              |
+| `/visualize mobile` (RN)      | `data/stacks/react-native.yaml`                           | Direct read              |
+| `/visualize desktop`          | `data/stacks/desktop.yaml`                                | Direct read              |
+| `/visualize component [name]` | `data/component-decision.yaml` + `component-mapping.yaml` | Direct read              |
+| `/visualize a11y`             | `data/ux-guidelines.yaml`                                 | Direct read              |
+| `/visualize animation`        | `data/ux-guidelines.yaml`                                 | Direct read              |
+| `/visualize tokens`           | `data/design-tokens.yaml` (46 cross-platform tokens)      | Direct read              |
+| `/visualize dark-mode`        | `data/ux-guidelines.yaml`                                 | Direct read              |
+| `/visualize responsive`       | `data/ux-guidelines.yaml`                                 | Direct read              |
+
+---
+
+---
+
+## Search Reference — Available Domains
+
+| Domain       | Use For                              | Example Keywords                                         |
+| ------------ | ------------------------------------ | -------------------------------------------------------- |
+| `product`    | Product type recommendations         | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style`      | UI styles, colors, effects           | glassmorphism, minimalism, dark mode, brutalism          |
+| `typography` | Font pairings, Google Fonts          | elegant, playful, professional, modern                   |
+| `color`      | Color palettes by product type       | saas, ecommerce, healthcare, beauty, fintech, service    |
+| `landing`    | Page structure, CTA strategies       | hero, hero-centric, testimonial, pricing, social-proof   |
+| `chart`      | Chart types, library recommendations | trend, comparison, timeline, funnel, pie                 |
+| `ux`         | Best practices, anti-patterns        | animation, accessibility, z-index, loading               |
+| `react`      | React/Next.js performance            | waterfall, bundle, suspense, memo, rerender, cache       |
+| `web`        | Web interface guidelines             | aria, focus, keyboard, semantic, virtualize              |
+| `prompt`     | AI prompts, CSS keywords             | (style name)                                             |
+
+---
+
+## Desktop Stacks
+
+| Stack        | Category       | Language | Focus                                 |
+| ------------ | -------------- | -------- | ------------------------------------- |
+| `wpf`        | Windows        | C#/XAML  | MVVM, Fluent theme, easing animations |
+| `winui3`     | Windows        | C#/XAML  | DirectX 12, Mica, Acrylic, Windows 11 |
+| `webview2`   | Hybrid         | C++/C#   | Web+native, security patterns         |
+| `qt-widgets` | Cross-Platform | C++      | Native widgets, C++17/20              |
+| `qt-qml`     | Cross-Platform | C++/QML  | Material/Fluent styling               |
+| `imgui`      | Game/Debug     | C++      | Immediate-mode, debug overlays        |
+| `electron`   | Web-Desktop    | JS/TS    | Chromium, large ecosystem             |
+| `tauri`      | Web-Desktop    | Rust+JS  | <10MB binary, native WebView          |
+| `avalonia`   | .NET           | C#/XAML  | Skia rendering, cross-platform        |
+| `pyqt`       | Python         | Python   | PyQt6/PySide6, professional           |
+
+### Architecture Patterns
+
+| Pattern | Best For                 | Data Binding |
+| ------- | ------------------------ | ------------ |
+| `mvvm`  | Complex apps (WPF/WinUI) | Auto two-way |
+| `mvp`   | Testable desktop (Qt)    | Manual       |
+| `mvc`   | Simple apps              | Manual       |
+
+### Animation Domains
+
+| Domain                 | Use For                           |
+| ---------------------- | --------------------------------- |
+| `desktop-animation`    | DirectX, WPF easing, Qt animation |
+| `desktop-colors`       | Platform color palettes           |
+| `desktop-architecture` | MVC/MVP/MVVM patterns             |
+
+---
+
+## Implementation Strategy
+
+| Phase      | Component Priority                      | Approach           | Directory       |
+| ---------- | --------------------------------------- | ------------------ | --------------- |
+| MVP        | 20% most-used (Button/Input/Card/Modal) | Library + Headless | Simple          |
+| Growth     | Extend + Complex components             | Headless + Custom  | Feature-Sliced  |
+| Scale      | Design system + Variants                | Custom + Tokens    | Monorepo        |
+| Enterprise | Multi-brand + Theming                   | Token-based        | Micro-frontends |
+
+## Directory Structure Patterns
+
+| Pattern         | Best For               | Structure                                  |
+| --------------- | ---------------------- | ------------------------------------------ |
+| `fsd`           | Large apps (50+ pages) | app/pages/widgets/features/entities/shared |
+| `fsd-lite`      | Medium apps            | app/pages/features/shared                  |
+| `atomic`        | Design systems         | atoms/molecules/organisms/templates/pages  |
+| `simple`        | Small apps/MVPs        | components/pages/utils/hooks               |
+| `colocation`    | Next.js App Router     | (feature)/page+components+hooks            |
+| `domain-driven` | Business logic heavy   | domains/user/product/order + shared        |
+
+## Component Decision Matrix
+
+| Need       | → Use               | Examples                       |
+| ---------- | ------------------- | ------------------------------ |
+| Speed      | Library             | MUI, Ant Design, Chakra        |
+| Brand      | Headless + Tailwind | Radix + shadcn                 |
+| Control    | Custom              | Hand-built components          |
+| A11y       | Headless            | Radix, React Aria, Headless UI |
+| Data-heavy | Specialized         | TanStack Table, TipTap         |
+
+## Platform Guidelines
+
+| Platform   | Design System   | Touch Target | Spacing  |
+| ---------- | --------------- | ------------ | -------- |
+| Web        | Custom/shadcn   | 44x44px      | 4px base |
+| Windows    | Fluent/WinUI3   | 32x32px      | 4px base |
+| macOS      | Human Interface | 22x22px      | 8px base |
+| iOS        | SwiftUI/UIKit   | 44x44pt      | 4px base |
+| Android    | Material 3      | 48x48dp      | 4dp base |
+| Desktop Qt | Qt Quick        | 32x32px      | 4px base |
+
+## Component Mapping Strategy
+
+```yaml
+workflow: 1. Index existing components in project
+  2. Match request to library (70-90% token savings)
+  3. Generate props only, not full code
+  4. Compose from primitives for gaps
+
+decision_matrix:
+  headless: 85-90% saved (Radix, React Aria)
+  library: 70-85% saved (shadcn, MUI)
+  custom: 50-60% saved (tokens + patterns)
+```
+
+---
+
+## Example Workflow
+
+**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
+
+### Step 1: Analyze Requirements
+
+- Product type: Beauty/Spa service
+- Style keywords: elegant, professional, soft
+- Industry: Beauty/Wellness
+- Stack: html-tailwind (default)
+
+### Step 2: Generate Design System (REQUIRED)
+
+Read data files directly:
+
+- `data/products.yaml` → match "beauty spa wellness" → get style/font/palette recommendations
+- `data/colors.yaml` → get industry-specific palette
+- `data/typography.yaml` → get font pairing for "elegant" keyword
+
+### Step 3: Supplement
+
+Read additional domain files:
+
+- `data/ux-guidelines.yaml` → animation + accessibility rules
+- `data/typography.yaml` → search for "elegant luxury serif" pairings
+
+### Step 4: Stack Guidelines
+
+Read `data/stacks/html-tailwind.yaml` for layout, responsive, and form patterns.
+
+---
+
+## Common Rules for Professional UI
+
+### Icons & Visual Elements
+
+| Rule                       | Do                                              | Don't                                  |
+| -------------------------- | ----------------------------------------------- | -------------------------------------- |
+| **No emoji icons**         | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons   |
+| **Stable hover states**    | Use color/opacity transitions on hover          | Use scale transforms that shift layout |
+| **Correct brand logos**    | Research official SVG from Simple Icons         | Guess or use incorrect logo paths      |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6          | Mix different icon sizes randomly      |
+
+### Light/Dark Mode Contrast
+
+| Rule                      | Do                                  | Don't                                   |
+| ------------------------- | ----------------------------------- | --------------------------------------- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent)     |
+| **Text contrast light**   | Use `#0F172A` (slate-900) for text  | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light**      | Use `#475569` (slate-600) minimum   | Use gray-400 or lighter                 |
+| **Border visibility**     | Use `border-gray-200` in light mode | Use `border-white/10` (invisible)       |
+
+---
+
+## 🎨 Design Thinking — Anthropic Guidelines
+
+> **Philosophy**: Create DISTINCTIVE interfaces, not generic AI aesthetics
+
+### Before Coding — BOLD Aesthetic Direction (REQUIRED)
+
+| Question            | Why It Matters                                                            |
+| ------------------- | ------------------------------------------------------------------------- |
+| **Purpose**         | What problem does this interface solve?                                   |
+| **Tone**            | Pick an EXTREME (brutally minimal, maximalist chaos, retro-futuristic...) |
+| **Constraints**     | What CAN'T you do? (branding, technical, accessibility)                   |
+| **Differentiation** | What makes this UNFORGETTABLE?                                            |
+
+### Frontend Aesthetics Rules
+
+```yaml
+typography:
+  avoid: [Arial, Helvetica, system-default, Inter (overused)]
+  choose: "Distinctive, characterful fonts that elevate design"
+
+color:
+  use_css_variables: true
+  rule: "Dominant colors with SHARP accents outperform timid palettes"
+
+motion:
+  page_load: "Staggered reveals, choreographed entrance"
+  micro: "Purposeful hover states, smooth transitions"
+
+spatial_composition:
+  rule: "Generous whitespace, asymmetry, overlapping planes"
+  avoid: "Cramped layouts, center-everything defaults"
+
+backgrounds:
+  options: ["gradient meshes", "noise textures", "depth patterns"]
+  avoid: "Plain white backgrounds"
+```
+
+### 🚫 Anti-Patterns
+
+| Anti-Pattern             | Why It Fails           |
+| ------------------------ | ---------------------- |
+| System fonts everywhere  | Looks like a prototype |
+| Generic purple gradients | "AI aesthetic" cliché  |
+| Cookie-cutter layouts    | Forgettable            |
+| No motion or personality | Dead interface         |
+| White background only    | No atmosphere          |
+
+---
+
+_DOMYH Awesome Code • UI/UX Pro Max • T3 Advanced Reference_

package/.agent/skills/cross-cutting/{ui-ux-pro-max → domyh-design}/META.yaml

@@ -1,11 +1,11 @@
-name: ui-ux-pro-max
-version: "6.2.0"
+name: domyh-design
+version: "6.2.2"
 display: UI/UX Pro Max
-category: support
+category: cross-cutting
 tier: 1
 priority: 2
 
-desc: "UI/UX design intelligence with 50+ styles, 130+ color palettes, 57 font pairings. Covers React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui."
+desc: "UI/UX design intelligence with 50+ styles, 130+ color palettes, 57 font pairings, 250+ animation patterns, AI image gen prompt optimization (PRISM framework). Covers React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, WebView2, Tauri, Qt."
 
 triggers:
   file_patterns:
@@ -53,6 +53,24 @@ triggers:
     - spacing
     - shadow
     - gradient
+    # Animation
+    - micro interaction
+    - scroll animation
+    - parallax
+    - gsap
+    - framer motion
+    - lottie
+    - webview animation
+    - css animation
+    - transition effect
+    # AI Image Generation
+    - image generation
+    - mockup
+    - prompt optimization
+    - ai design
+    - PRISM framework
+    - generate screenshot
+    - design system prompt
   intents:
     - design ui
     - create landing page
@@ -60,6 +78,11 @@ triggers:
     - improve ux
     - choose colors
     - pick fonts
+    - add animation
+    - animate component
+    - generate mockup
+    - create ui screenshot
+    - design visualization
 
 caps:
   - UI component design
@@ -67,15 +90,11 @@ caps:
   - Typography pairing
   - Accessibility review
   - Animation patterns
-
-hsa:
-  enabled: true
-  adapter: ui_ux_adapter.py
-  functions:
-    - search_ui_patterns
-    - get_style_patterns
-    - get_color_palettes
-    - get_typography_pairings
+  - Scroll animation
+  - Micro-interaction design
+  - WebView optimization
+  - AI image generation prompt optimization
+  - Multi-screen design consistency
 
 related_skills:
   - react
@@ -106,3 +125,15 @@ data_files:
   - data/desktop-animation.yaml
   - data/desktop-architecture.yaml
   - data/desktop-colors.yaml
+  # Animation & Visual
+  - data/web-animation-libraries.yaml
+  - data/component-effects.yaml
+  - data/micro-interactions.yaml
+  - data/scroll-animation-patterns.yaml
+  - data/tailwind-animation-plugins.yaml
+  - data/animation-ui-kits.yaml
+  - data/webview-animation-optimization.yaml
+  # AI Image Generation
+  - data/image-gen-prompts.yaml
+  - data/image-gen-workflows.yaml
+  - data/design-system-prompts.yaml

package/.agent/skills/cross-cutting/domyh-design/SKILL.md

@@ -0,0 +1,171 @@
+---
+name: domyh-design
+description: "UI/UX design intelligence. 50+ styles, 130+ palettes, 57 fonts, 9 stacks. React, Next.js, Vue, Svelte, SwiftUI, RN, Flutter, Tailwind, shadcn/ui."
+---
+
+# UI/UX Pro Max - Design Intelligence
+
+> Design guide for web, desktop, and mobile. Searchable database with priority-based recommendations.
+> For detailed reference, desktop stacks, /visualize integration, see `ADVANCED.md`.
+
+## When to Apply
+
+- Designing new UI components or pages
+- Choosing color palettes and typography
+- Reviewing code for UX issues
+- Building landing pages or dashboards
+- Implementing accessibility requirements
+
+## Rule Categories by Priority
+
+| Priority | Category            | Impact   | Domain                |
+| -------- | ------------------- | -------- | --------------------- |
+| 1        | Accessibility       | CRITICAL | `ux`                  |
+| 2        | Touch & Interaction | CRITICAL | `ux`                  |
+| 3        | Performance         | HIGH     | `ux`                  |
+| 4        | Layout & Responsive | HIGH     | `ux`                  |
+| 5        | Typography & Color  | MEDIUM   | `typography`, `color` |
+| 6        | Animation           | MEDIUM   | `ux`                  |
+| 7        | Style Selection     | MEDIUM   | `style`, `product`    |
+| 8        | Charts & Data       | LOW      | `chart`               |
+
+## Quick Reference
+
+### 1. Accessibility (CRITICAL)
+
+- `color-contrast` - Minimum 4.5:1 ratio for normal text
+- `focus-states` - Visible focus rings on interactive elements
+- `alt-text` - Descriptive alt text for meaningful images
+- `aria-labels` - aria-label for icon-only buttons
+- `keyboard-nav` - Tab order matches visual order
+- `form-labels` - Use label with for attribute
+- 🆕 `focus-not-obscured` - Focus not hidden by sticky/fixed elements (WCAG 2.2)
+- 🆕 `dragging-alternative` - Single pointer alternative for drag ops (WCAG 2.2)
+- 🆕 `accessible-auth` - No cognitive test for login (WCAG 2.2)
+
+### 2. Touch & Interaction (CRITICAL)
+
+- `touch-target-size` - Minimum 44x44px touch targets
+- `hover-vs-tap` - Use click/tap for primary interactions
+- `loading-buttons` - Disable button during async operations
+- `error-feedback` - Clear error messages near problem
+- `cursor-pointer` - Add cursor-pointer to clickable elements
+
+### 3. Performance (HIGH)
+
+- `image-optimization` - Use WebP, srcset, lazy loading
+- `reduced-motion` - Check prefers-reduced-motion
+- `content-jumping` - Reserve space for async content
+
+### 4. Layout & Responsive (HIGH)
+
+- `viewport-meta` - width=device-width initial-scale=1
+- `readable-font-size` - Minimum 16px body text on mobile
+- `horizontal-scroll` - Ensure content fits viewport width
+- `z-index-management` - Define z-index scale (10, 20, 30, 50)
+
+### 5-8. Typography, Animation, Style, Charts
+
+- `line-height` - Use 1.5-1.75 for body text
+- `duration-timing` - Use 150-300ms for micro-interactions
+- `no-emoji-icons` - Use SVG icons, not emojis
+- `chart-type` - Match chart type to data type
+
+## How to Use
+
+### Step 1: Analyze Requirements
+
+Extract: **product type**, **style keywords**, **industry**, **stack** (default: html-tailwind)
+
+### Step 2: Generate Design System (REQUIRED)
+
+Read data files directly for recommendations:
+
+- **Product type** → `data/products.yaml` (50+ product types with style/font/palette mappings)
+- **Color palette** → `data/colors.yaml` (130+ palettes by industry)
+- **Typography** → `data/typography.yaml` (57 font pairings)
+- **Style pattern** → `data/styles.yaml` (50+ UI styles)
+
+### Step 3: Supplement with Domain Data
+
+| Domain     | Data File                 | Content                      |
+| ---------- | ------------------------- | ---------------------------- |
+| Product    | `data/products.yaml`      | Product type recommendations |
+| Style      | `data/styles.yaml`        | UI styles, effects           |
+| Typography | `data/typography.yaml`    | Font pairings                |
+| Color      | `data/colors.yaml`        | Palettes by industry         |
+| Landing    | `data/landing.yaml`       | Page structure, CTA          |
+| Chart      | `data/charts.yaml`        | Chart types, libraries       |
+| UX         | `data/ux-guidelines.yaml` | Best practices               |
+| Icons      | `data/icons.yaml`         | Icon sets, guidelines        |
+
+### Step 4: Stack Guidelines
+
+Read stack-specific file from `data/stacks/` directory:
+
+Stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`
+
+## Pre-Delivery Checklist
+
+### Visual Quality
+
+- [ ] No emojis as icons (use SVG: Heroicons/Lucide)
+- [ ] Hover states don't cause layout shift
+- [ ] Transitions smooth (150-300ms)
+
+### Interaction
+
+- [ ] All clickable elements have `cursor-pointer`
+- [ ] Focus states visible for keyboard navigation
+
+### Light/Dark Mode
+
+- [ ] Light mode text contrast ≥ 4.5:1
+- [ ] Glass elements visible in both modes
+- [ ] Test both modes before delivery
+
+### Layout
+
+- [ ] Responsive at 375px, 768px, 1024px, 1440px
+- [ ] No content hidden behind fixed navbars
+- [ ] No horizontal scroll on mobile
+
+### Accessibility (WCAG 2.2)
+
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color not the only indicator
+- [ ] `prefers-reduced-motion` respected
+- [ ] Focus not obscured by sticky elements (2.4.11)
+- [ ] Drag alternatives provided (2.5.7)
+- [ ] Target size ≥ 44×44px (2.5.8)
+- [ ] Accessible authentication (3.3.8)
+
+### AI Image Generation (PRISM Framework)
+
+> 📁 Data: `data/image-gen-prompts.yaml` • `data/image-gen-workflows.yaml` • `data/design-system-prompts.yaml`
+
+**PRISM Prompt Structure**: Persona → Reference → Intent → Structure → Modifiers
+
+**Quick Flow**:
+
+1. Detect platform → select preset (desktop_dashboard, mobile_app, tablet_app, landing_page_hero, component_preview)
+2. Pick component template (15 types: dashboard, landing, login, settings, mobile, nav, card, modal, table, form, pricing, profile, e-commerce, chat, onboarding)
+3. Select design system fragment (Material 3, Apple HIG, Fluent 2, shadcn/ui, Ant Design, Chakra UI)
+4. Assemble PRISM prompt from template + style variant
+5. Append negative prompts (always_apply + component-specific)
+6. Generate with `generate_image` tool
+
+**Realism Boosters**: `screenshot` ⭐⭐⭐ | `UI design mockup` ⭐⭐⭐ | `high-fidelity` ⭐⭐ | `pixel-perfect` ⭐⭐
+
+**Multi-Screen**: Same seed + color pinning (hex) + font pinning + reference image chaining
+
+- [ ] Prompt follows PRISM framework
+- [ ] Negative prompts appended (no device frames, no lorem ipsum)
+- [ ] enhancePrompt=false for complex prompts (>30 words)
+- [ ] Aspect ratio matches target platform
+- [ ] Design system fragment included if applicable
+
+---
+
+_DOMYH Awesome Code • UI/UX Pro Max • T2 Skill_