@nockdev/awf 6.2.0 → 6.2.2

package/.agent/skills/cross-cutting/domyh-design/data/scroll-animation-patterns.yaml

@@ -0,0 +1,398 @@
+metadata:
+  skill: domyh-design
+  domain: scroll_animation_patterns
+  version: 6.2.2
+  updated: "2026-02-12"
+  description: "Scroll-driven animation patterns — parallax, reveal, pin, scrub, progress"
+  patterns_count: 26
+  columns:
+    - pattern_name
+    - category
+    - technique
+    - libraries
+    - code_example
+    - performance
+    - browser_support
+
+patterns:
+  # ── Reveal on Scroll ─────────────────────────────────────────
+
+  - id: scroll_001
+    pattern_name: Fade up on scroll
+    category: reveal
+    technique: intersection-observer
+    libraries: [vanilla-js]
+    code_example: |
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
+      }, { threshold: 0.1 });
+      document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+      /* CSS: .reveal { opacity: 0; transform: translateY(30px); transition: all 600ms ease; }
+         .reveal.visible { opacity: 1; transform: translateY(0); } */
+    performance: gpu-only-optimal
+    browser_support: all-modern
+
+  - id: scroll_002
+    pattern_name: Stagger reveal children
+    category: reveal
+    technique: intersection-observer + css-delay
+    libraries: [vanilla-js]
+    code_example: |
+      .container.visible .child { opacity: 1; transform: translateY(0); }
+      .child { opacity: 0; transform: translateY(20px); transition: all 400ms ease; }
+      .child:nth-child(1) { transition-delay: 0ms; }
+      .child:nth-child(2) { transition-delay: 100ms; }
+      .child:nth-child(3) { transition-delay: 200ms; }
+    performance: gpu-only
+    browser_support: all-modern
+
+  - id: scroll_003
+    pattern_name: Slide in from sides
+    category: reveal
+    technique: intersection-observer
+    libraries: [vanilla-js]
+    code_example: |
+      .reveal-left { opacity: 0; transform: translateX(-50px); transition: all 600ms ease; }
+      .reveal-right { opacity: 0; transform: translateX(50px); transition: all 600ms ease; }
+      .visible { opacity: 1; transform: translateX(0); }
+    performance: gpu-only
+    browser_support: all-modern
+
+  - id: scroll_004
+    pattern_name: Scale reveal
+    category: reveal
+    technique: intersection-observer
+    libraries: [vanilla-js]
+    code_example: |
+      .reveal-scale { opacity: 0; transform: scale(0.8); transition: all 600ms ease; }
+      .reveal-scale.visible { opacity: 1; transform: scale(1); }
+    performance: gpu-only
+    browser_support: all-modern
+
+  - id: scroll_005
+    pattern_name: Clip path reveal
+    category: reveal
+    technique: intersection-observer
+    libraries: [vanilla-js]
+    code_example: |
+      .clip-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 800ms ease; }
+      .clip-reveal.visible { clip-path: inset(0 0 0 0); }
+    performance: gpu-composited
+    browser_support: all-modern
+
+  # ── Parallax Effects ──────────────────────────────────────────
+
+  - id: scroll_006
+    pattern_name: Simple parallax background
+    category: parallax
+    technique: css-native
+    libraries: [css-only]
+    code_example: |
+      .parallax { background-attachment: fixed; background-position: center;
+        background-size: cover; min-height: 60vh; }
+    performance: avoid-on-mobile
+    browser_support: all-modern-except-ios
+
+  - id: scroll_007
+    pattern_name: Transform parallax layers
+    category: parallax
+    technique: js-scroll + transform
+    libraries: [vanilla-js, gsap]
+    code_example: |
+      /* Speed factor: 0.5 = half scroll speed, -0.3 = reverse */
+      window.addEventListener('scroll', () => {
+        const y = window.scrollY;
+        document.querySelector('.slow').style.transform = `translateY(${y * 0.3}px)`;
+        document.querySelector('.fast').style.transform = `translateY(${y * -0.2}px)`;
+      });
+    performance: use-raf-throttle
+    browser_support: all-modern
+
+  - id: scroll_008
+    pattern_name: GSAP parallax with ScrollTrigger
+    category: parallax
+    technique: gsap-scrolltrigger
+    libraries: [gsap, gsap/ScrollTrigger]
+    code_example: |
+      gsap.to('.parallax-bg', {
+        y: -200,
+        ease: 'none',
+        scrollTrigger: { trigger: '.section', start: 'top bottom', end: 'bottom top', scrub: true }
+      });
+    performance: gpu-optimized
+    browser_support: all-modern
+
+  # ── Pin / Sticky Effects ─────────────────────────────────────
+
+  - id: scroll_009
+    pattern_name: Pin section while scrolling content
+    category: pin
+    technique: gsap-scrolltrigger
+    libraries: [gsap, gsap/ScrollTrigger]
+    code_example: |
+      ScrollTrigger.create({
+        trigger: '.pinned-section',
+        start: 'top top',
+        end: '+=200%',
+        pin: true,
+        pinSpacing: true,
+      });
+    performance: gpu-composited
+    browser_support: all-modern
+
+  - id: scroll_010
+    pattern_name: CSS sticky header/sidebar
+    category: pin
+    technique: css-native
+    libraries: [css-only]
+    code_example: |
+      .sticky { position: sticky; top: 0; z-index: 10; }
+    performance: native-optimal
+    browser_support: all-modern
+
+  - id: scroll_011
+    pattern_name: Horizontal scroll section
+    category: pin
+    technique: gsap-scrolltrigger
+    libraries: [gsap, gsap/ScrollTrigger]
+    code_example: |
+      gsap.to('.panels', {
+        x: () => -(document.querySelector('.panels').scrollWidth - window.innerWidth),
+        ease: 'none',
+        scrollTrigger: {
+          trigger: '.horizontal-section', start: 'top top',
+          end: () => `+=${document.querySelector('.panels').scrollWidth}`,
+          pin: true, scrub: 1,
+        }
+      });
+    performance: gpu-3d-transform
+    browser_support: all-modern
+
+  # ── Scrub / Timeline Sync ────────────────────────────────────
+
+  - id: scroll_012
+    pattern_name: Progress bar scrub
+    category: scrub
+    technique: js-scroll
+    libraries: [vanilla-js]
+    code_example: |
+      window.addEventListener('scroll', () => {
+        const h = document.documentElement;
+        const progress = h.scrollTop / (h.scrollHeight - h.clientHeight);
+        document.querySelector('.progress-bar').style.width = `${progress * 100}%`;
+      });
+    performance: use-raf-throttle
+    browser_support: all-modern
+
+  - id: scroll_013
+    pattern_name: GSAP timeline scrub
+    category: scrub
+    technique: gsap-scrolltrigger
+    libraries: [gsap, gsap/ScrollTrigger]
+    code_example: |
+      const tl = gsap.timeline({
+        scrollTrigger: { trigger: '.section', start: 'top center', end: 'bottom center',
+          scrub: 1 }
+      });
+      tl.from('.title', { opacity: 0, y: 50 })
+        .from('.subtitle', { opacity: 0, y: 30 }, '-=0.3')
+        .from('.cta', { opacity: 0, scale: 0.8 }, '-=0.2');
+    performance: gpu-optimized
+    browser_support: all-modern
+
+  - id: scroll_014
+    pattern_name: CSS scroll-timeline scrub
+    category: scrub
+    technique: css-native
+    libraries: [css-only]
+    code_example: |
+      @keyframes grow { from { width: 0%; } to { width: 100%; } }
+      .progress-bar {
+        animation: grow linear;
+        animation-timeline: scroll();
+      }
+    performance: native-compositor-thread
+    browser_support: chrome-115-plus
+
+  # ── Text Animation on Scroll ─────────────────────────────────
+
+  - id: scroll_015
+    pattern_name: Word-by-word reveal
+    category: text
+    technique: gsap-scrolltrigger + splittype
+    libraries: [gsap, gsap/ScrollTrigger, split-type]
+    code_example: |
+      const split = new SplitType('.headline', { types: 'words' });
+      gsap.from(split.words, {
+        opacity: 0, y: 20, stagger: 0.05,
+        scrollTrigger: { trigger: '.headline', start: 'top 80%' }
+      });
+    performance: gpu-only
+    browser_support: all-modern
+
+  - id: scroll_016
+    pattern_name: Character-by-character color fill
+    category: text
+    technique: gsap-scrolltrigger + splitting
+    libraries: [gsap, gsap/ScrollTrigger, splitting]
+    code_example: |
+      Splitting({ target: '.text-fill', by: 'chars' });
+      gsap.to('.text-fill .char', {
+        color: 'var(--primary)', stagger: 0.02,
+        scrollTrigger: { trigger: '.text-fill', start: 'top 70%', end: 'bottom 30%', scrub: true }
+      });
+    performance: gpu-paint
+    browser_support: all-modern
+
+  # ── Image / Media Scroll Effects ──────────────────────────────
+
+  - id: scroll_017
+    pattern_name: Image scale on scroll
+    category: image
+    technique: gsap-scrolltrigger
+    libraries: [gsap, gsap/ScrollTrigger]
+    code_example: |
+      gsap.from('.hero-img', {
+        scale: 1.3,
+        scrollTrigger: { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true }
+      });
+    performance: gpu-3d-transform
+    browser_support: all-modern
+
+  - id: scroll_018
+    pattern_name: Video playback sync
+    category: media
+    technique: gsap-scrolltrigger
+    libraries: [gsap, gsap/ScrollTrigger]
+    code_example: |
+      const video = document.querySelector('video');
+      ScrollTrigger.create({
+        trigger: '.video-section', start: 'top top', end: 'bottom bottom',
+        onUpdate: (self) => { video.currentTime = self.progress * video.duration; }
+      });
+    performance: cpu-intensive
+    browser_support: all-modern
+
+  # ── Smooth Scroll ────────────────────────────────────────────
+
+  - id: scroll_019
+    pattern_name: Lenis smooth scroll
+    category: smooth
+    technique: lenis-library
+    libraries: [lenis]
+    code_example: |
+      import Lenis from 'lenis';
+      const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
+      function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }
+      requestAnimationFrame(raf);
+      /* GSAP integration: */
+      lenis.on('scroll', ScrollTrigger.update);
+      gsap.ticker.add((time) => lenis.raf(time * 1000));
+    performance: raf-driven
+    browser_support: all-modern
+
+  - id: scroll_020
+    pattern_name: CSS scroll-behavior smooth
+    category: smooth
+    technique: css-native
+    libraries: [css-only]
+    code_example: |
+      html { scroll-behavior: smooth; }
+      /* Respect reduced motion: */
+      @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
+    performance: native-optimal
+    browser_support: all-modern
+
+  # ── Scroll Snap ──────────────────────────────────────────────
+
+  - id: scroll_021
+    pattern_name: Full-page scroll snap
+    category: snap
+    technique: css-native
+    libraries: [css-only]
+    code_example: |
+      .container { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; }
+      .section { scroll-snap-align: start; height: 100vh; }
+    performance: native-optimal
+    browser_support: all-modern
+
+  - id: scroll_022
+    pattern_name: Horizontal card snap
+    category: snap
+    technique: css-native
+    libraries: [css-only]
+    code_example: |
+      .carousel { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory;
+        gap: 16px; -webkit-overflow-scrolling: touch; }
+      .card { scroll-snap-align: center; flex: 0 0 80%; }
+    performance: native-optimal
+    browser_support: all-modern
+
+  # ── Scroll Indicator / Progress ──────────────────────────────
+
+  - id: scroll_023
+    pattern_name: Reading progress bar
+    category: progress
+    technique: css-scroll-timeline
+    libraries: [css-only]
+    code_example: |
+      .reading-progress {
+        position: fixed; top: 0; left: 0; height: 3px;
+        background: var(--primary); transform-origin: left;
+        animation: progress-grow linear;
+        animation-timeline: scroll();
+      }
+      @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+    performance: native-compositor-thread
+    browser_support: chrome-115-plus
+
+  - id: scroll_024
+    pattern_name: Section nav dot indicator
+    category: progress
+    technique: intersection-observer
+    libraries: [vanilla-js]
+    code_example: |
+      const sections = document.querySelectorAll('section[id]');
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(e => {
+          if (e.isIntersecting) {
+            document.querySelectorAll('.nav-dot').forEach(d => d.classList.remove('active'));
+            document.querySelector(`.nav-dot[data-section="${e.target.id}"]`).classList.add('active');
+          }
+        });
+      }, { threshold: 0.5 });
+      sections.forEach(s => observer.observe(s));
+    performance: optimal
+    browser_support: all-modern
+
+  # ── Scroll-Driven View Transition ─────────────────────────────
+
+  - id: scroll_025
+    pattern_name: Scroll-linked opacity fade
+    category: css-scroll-driven
+    technique: css-native
+    libraries: [css-only]
+    code_example: |
+      @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+      .element {
+        animation: fade-in linear both;
+        animation-timeline: view();
+        animation-range: entry 0% entry 100%;
+      }
+    performance: native-compositor-thread
+    browser_support: chrome-115-plus
+
+  - id: scroll_026
+    pattern_name: Scroll-linked scale transform
+    category: css-scroll-driven
+    technique: css-native
+    libraries: [css-only]
+    code_example: |
+      @keyframes scale-up { from { transform: scale(0.8); } to { transform: scale(1); } }
+      .element {
+        animation: scale-up linear both;
+        animation-timeline: view();
+        animation-range: entry 0% cover 50%;
+      }
+    performance: native-compositor-thread
+    browser_support: chrome-115-plus

package/.agent/skills/cross-cutting/domyh-design/data/stacks/desktop.yaml

@@ -0,0 +1,228 @@
+metadata:
+  skill: domyh-design
+  domain: desktop
+  version: 6.2.2
+  updated: "2026-02-05"
+  migrated_from: desktop.yaml
+  patterns_count: 19
+  columns:
+    - category
+    - stack_id
+    - name
+    - focus
+    - language
+    - patterns
+    - architecture
+    - animation
+    - dark_mode
+    - docs_url
+patterns:
+  - id: item_001
+    category: native
+    stack_id: wpf
+    name: WPF
+    focus: .NET
+    language: C#/XAML
+    patterns: MVVM, Dependency Properties, Commands, Styles, Triggers
+    architecture: Data Templates, User Controls, Content Presenters
+    animation: "Storyboard, DoubleAnimation, EasingFunctions (BackEase, BounceEase, ElasticEase), GPU-friendly: RenderTransform, Opacity"
+    dark_mode: "ThemeMode.Dark, ResourceDictionary: Light.xaml/Dark.xaml, ThemeResource"
+    docs_url: https://docs.microsoft.com/wpf
+  - id: item_002
+    category: native
+    stack_id: winui3
+    name: WinUI 3
+    focus: Windows 11 Native
+    language: C#/XAML
+    patterns: DirectX 12, Mica, Acrylic, Fluent Design, WASDK
+    architecture: App.xaml.cs, MainWindow, NavigationView, ContentFrame
+    animation: CompositionTarget.Rendering, SmoothTransitions, PointerPressed/Released, Implicit animations
+    dark_mode: "Mica backdrop, Acrylic brush, Auto-detect: Application.RequestedTheme"
+    docs_url: https://docs.microsoft.com/windows/apps/winui
+  - id: item_003
+    category: native
+    stack_id: winforms
+    name: WinForms
+    focus: Legacy .NET
+    language: C#
+    patterns: TableLayoutPanel, FlowLayoutPanel, Data Binding, Designer patterns
+    architecture: Form inheritance, UserControl, MVP pattern, Event-driven
+    animation: "GDI+ (limited), Timer-based, Double buffering: SetStyle(ControlStyles.OptimizedDoubleBuffer)"
+    dark_mode: "DarkMode.Explorer: DwmSetWindowAttribute, Manual theme toggle, SystemColors override"
+    docs_url: https://docs.microsoft.com/dotnet/desktop/winforms
+  - id: item_004
+    category: hybrid
+    stack_id: webview2
+    name: WebView2
+    focus: Web+Native Hybrid
+    language: C++/C#
+    patterns: CoreWebView2, PostWebMessage, AddHostObjectToScript, ExecuteScriptAsync
+    architecture: "Evergreen runtime, NavigationStarting event, Security: ValidateOrigin"
+    animation: "CSS animations in WebView, Native: CoreWebView2CompositionController"
+    dark_mode: CSS prefers-color-scheme + Native sync, User data folder per theme
+    docs_url: https://docs.microsoft.com/microsoft-edge/webview2
+  - id: item_005
+    category: cross
+    stack_id: qt-widgets
+    name: Qt Widgets
+    focus: Native Cross-Platform
+    language: C++
+    patterns: QMainWindow, QWidget, Signals/Slots, QStyle, Q_OBJECT macro
+    architecture: Model/View (QAbstractItemModel), QProxyModel, Plugin architecture
+    animation: QPropertyAnimation, QSequentialAnimationGroup, QEasingCurve
+    dark_mode: QPalette::Dark, QStyleFactory::create('Fusion'), Custom QSS
+    docs_url: https://doc.qt.io/qt-6/qtwidgets-index.html
+  - id: item_006
+    category: cross
+    stack_id: qt-qml
+    name: Qt QML
+    focus: Declarative UI
+    language: C++/QML
+    patterns: Item, Rectangle, MouseArea, states, transitions, Loader
+    architecture: QQmlApplicationEngine, C++ backend + QML frontend, Property binding
+    animation: Behavior on, NumberAnimation, SequentialAnimation, Easing.InOutQuad
+    dark_mode: "QtQuick.Controls Material.theme: Material.Dark, Accent colors"
+    docs_url: https://doc.qt.io/qt-6/qmlapplications.html
+  - id: item_007
+    category: cross
+    stack_id: qt-python
+    name: Qt Python
+    focus: Python Qt Bindings
+    language: Python
+    patterns: PySide6/PyQt6, QMainWindow, QTreeView, Signals, QFluentWidgets
+    architecture: Designer .ui files, resources_rc.py, uic.loadUi
+    animation: QPropertyAnimation (same as Qt Widgets), QParallelAnimationGroup
+    dark_mode: setStyle('Fusion'), setPalette(dark_palette), QFluentWidgets themes
+    docs_url: https://doc.qt.io/qtforpython
+  - id: item_008
+    category: game
+    stack_id: imgui
+    name: Dear ImGui
+    focus: Immediate Mode GUI
+    language: C++
+    patterns: ImGui::Begin, ImGui::Button, ImGui::InputText, custom rendering
+    architecture: "Renderer-agnostic, DirectX/OpenGL/Vulkan backends, Platform: Win32/GLFW"
+    animation: ImGuiCol colors, Smooth transitions via lerp(), No built-in animation
+    dark_mode: ImGui::StyleColorsDark(), ImGui::StyleColorsLight(), Custom themes
+    docs_url: https://github.com/ocornut/imgui
+  - id: item_009
+    category: cross
+    stack_id: wxwidgets
+    name: wxWidgets
+    focus: Native Look
+    language: C++
+    patterns: wxFrame, wxPanel, wxSizer, event table macros, DECLARE_EVENT_TABLE
+    architecture: Document/View, XRC (XML resources), wxApp lifecycle
+    animation: wxAnimationCtrl (GIF), Timer-based, Native platform animations
+    dark_mode: wxSystemSettings::GetColour, wxAuiManager, Platform-native dark
+    docs_url: https://www.wxwidgets.org/docs/
+  - id: item_010
+    category: audio
+    stack_id: juce
+    name: JUCE
+    focus: Audio Applications
+    language: C++
+    patterns: Component, AudioProcessor, PluginProcessor, ValueTree
+    architecture: Audio plugin (VST/AU/AAX), Standalone app, ProJucer project
+    animation: LookAndFeel, ComponentAnimator, Desktop::setKioskModeComponent
+    dark_mode: LookAndFeel_V4::getDarkColorScheme(), setColour methods
+    docs_url: https://docs.juce.com
+  - id: item_011
+    category: cross
+    stack_id: nana
+    name: Nana C++
+    focus: Modern C++ GUI
+    language: C++
+    patterns: form, button, panel, place layout, events::click
+    architecture: place layout (div/vert/hort), internationalization, Modern C++11/14
+    animation: animation class, effect::fade_in, effect::fade_out
+    dark_mode: appearance::bground('#1E1E1E'), Custom color scheme
+    docs_url: https://nana.sourceforge.io
+  - id: item_012
+    category: web
+    stack_id: electron
+    name: Electron
+    focus: Web Technology Desktop
+    language: JS/TS
+    patterns: BrowserWindow, ipcMain/ipcRenderer, preload scripts, contextBridge
+    architecture: Main process + Renderer, NodeJS integration, Chromium sandbox
+    animation: CSS animations, Framer Motion, React Spring, requestAnimationFrame
+    dark_mode: "nativeTheme.themeSource, CSS prefers-color-scheme, Tailwind dark:"
+    docs_url: https://www.electronjs.org/docs
+  - id: item_013
+    category: web
+    stack_id: tauri
+    name: Tauri
+    focus: Lightweight Web Desktop
+    language: Rust+JS
+    patterns: tauri::command, invoke, Window, Menu, Tray
+    architecture: Rust backend + WebView2/WebKit frontend, Command pattern
+    animation: "CSS animations, Native: window effects, Vibrancy/Mica via tauri-plugin"
+    dark_mode: prefers-color-scheme + Rust theme detection, <10MB binary
+    docs_url: https://tauri.app/v2/guides
+  - id: item_014
+    category: dotnet
+    stack_id: avalonia
+    name: Avalonia UI
+    focus: Cross-Platform .NET
+    language: C#/XAML
+    patterns: Window, UserControl, Styles, ControlTemplates, DataTemplates
+    architecture: MVVM (ReactiveUI), Skia rendering, Platform detection
+    animation: Transitions, RenderTransformOrigin, Animation, Easing
+    dark_mode: FluentTheme Mode=Dark, SimpleTheme, <StyleInclude>
+    docs_url: https://docs.avaloniaui.net
+  - id: item_015
+    category: dotnet
+    stack_id: maui
+    name: .NET MAUI
+    focus: Mobile-First .NET
+    language: C#/XAML
+    patterns: ContentPage, Shell, CollectionView, BindableProperty
+    architecture: MVVM (CommunityToolkit), Dependency Injection, Handlers
+    animation: Animation class, TranslateTo, FadeTo, ScaleTo, Easing.SpringOut
+    dark_mode: AppThemeBinding, Application.Current.RequestedTheme, DynamicResource
+    docs_url: https://docs.microsoft.com/dotnet/maui
+  - id: item_016
+    category: python
+    stack_id: pyqt
+    name: PyQt6/PySide6
+    focus: Professional Python GUI
+    language: Python
+    patterns: QMainWindow, QWidget, pyqtSignal, connect, QThread
+    architecture: Designer UI files, Model/View, QStyledItemDelegate
+    animation: QPropertyAnimation, QGraphicsOpacityEffect, QTimeLine
+    dark_mode: setStyle('Fusion'), setPalette, QFluentWidgets, qt_material
+    docs_url: https://doc.qt.io/qtforpython
+  - id: item_017
+    category: python
+    stack_id: customtkinter
+    name: CustomTkinter
+    focus: Modern Tkinter
+    language: Python
+    patterns: CTk, CTkFrame, CTkButton, CTkEntry, appearance_mode
+    architecture: Pack/Grid/Place, variable linking, command callbacks
+    animation: No built-in animation, After-based timer animations
+    dark_mode: set_appearance_mode('dark'), set_default_color_theme
+    docs_url: https://customtkinter.tomschimansky.com
+  - id: item_018
+    category: python
+    stack_id: kivy
+    name: Kivy
+    focus: Touch/IoT GUI
+    language: Python
+    patterns: Widget, BoxLayout, GridLayout, kv language, properties
+    architecture: App lifecycle, Screen manager, Kivy language separation
+    animation: Animation class, Animation(property=value).start(), Clock.schedule
+    dark_mode: "kivy.config: theme, Color properties, Canvas instructions"
+    docs_url: https://kivy.org/doc/stable
+  - id: item_019
+    category: python
+    stack_id: flet
+    name: Flet
+    focus: Flutter-style Python
+    language: Python
+    patterns: Page, controls, on_click, update(), Client storage
+    architecture: Page-based routing, Pubsub, Session state
+    animation: animate_* properties, AnimatedSwitcher, implicit animations
+    dark_mode: ThemeMode.DARK, theme.color_scheme, ColorScheme
+    docs_url: https://flet.dev/docs