@nockdev/awf 6.2.0 → 6.2.2

package/.agent/skills/cross-cutting/domyh-design/data/animation-ui-kits.yaml

@@ -0,0 +1,198 @@
+metadata:
+  skill: domyh-design
+  domain: animation_ui_kits
+  version: 6.2.2
+  updated: "2026-02-12"
+  description: "Animated UI component kit registry — copy-paste component libraries"
+  patterns_count: 10
+  columns:
+    - name
+    - url
+    - framework
+    - component_count
+    - style
+    - install_method
+    - best_for
+
+kits:
+  - id: kit_001
+    name: Magic UI
+    url: https://magicui.design
+    framework: [react, nextjs, tailwind]
+    component_count: 150+
+    style: Modern SaaS, landing pages
+    install_method: copy-paste (shadcn style)
+    license: MIT
+    best_for: Landing pages, SaaS marketing sites
+    notable_components:
+      - animated-beam
+      - bento-grid
+      - blur-fade
+      - dock
+      - globe
+      - marquee
+      - number-ticker
+      - particles
+      - shimmer-button
+      - sparkles-text
+      - typing-animation
+    decision_trigger: Need wow-factor animated sections for React/Next.js marketing site
+
+  - id: kit_002
+    name: Aceternity UI
+    url: https://ui.aceternity.com
+    framework: [react, nextjs, tailwind]
+    component_count: 200+
+    style: Trendy, dark mode, premium
+    install_method: copy-paste
+    license: MIT
+    best_for: Hero sections, portfolios, premium landing pages
+    notable_components:
+      - 3d-card-effect
+      - aurora-background
+      - background-beams
+      - card-hover-effect
+      - floating-navbar
+      - hero-parallax
+      - infinite-moving-cards
+      - lamp-effect
+      - sparkles
+      - spotlight
+      - text-generate-effect
+      - tracing-beam
+      - wavy-background
+    decision_trigger: Need premium animated hero/background sections in Next.js
+
+  - id: kit_003
+    name: Motion Primitives
+    url: https://motion-primitives.com
+    framework: [react, nextjs, tailwind, framer-motion]
+    component_count: 50+
+    style: Composable, minimal
+    install_method: copy-paste
+    license: MIT
+    best_for: Building custom animated components from primitives
+    notable_components:
+      - accordion
+      - animated-number
+      - cursor
+      - disclosure
+      - in-view
+      - morphing-dialog
+      - scroll-progress
+      - text-effect
+      - transition-panel
+    decision_trigger: Need composable animation building blocks, not full components
+
+  - id: kit_004
+    name: Inspira UI
+    url: https://inspira-ui.com
+    framework: [vue, nuxt, tailwind]
+    component_count: 60+
+    style: Modern, animated Vue components
+    install_method: copy-paste
+    license: MIT
+    best_for: Vue/Nuxt projects needing animated components similar to Magic UI
+    notable_components:
+      - animated-gradient-text
+      - blur-fade
+      - globe
+      - marquee
+      - number-ticker
+      - particles
+      - sparkles-text
+      - text-reveal
+      - typing-animation
+    decision_trigger: Vue/Nuxt project — equivalent of Magic UI for Vue ecosystem
+
+  - id: kit_005
+    name: Animate UI
+    url: https://animate-ui.com
+    framework: [react, shadcn, tailwind, framer-motion]
+    component_count: 80+
+    style: shadcn variant with animation
+    install_method: copy-paste (npx animate-ui)
+    license: MIT
+    best_for: Extending shadcn/ui with animated variants
+    notable_components:
+      - animated-accordion
+      - animated-dialog
+      - animated-dropdown
+      - animated-tabs
+      - animated-tooltip
+      - text-morphing
+      - cursor-glow
+    decision_trigger: Already using shadcn/ui and want animated component variants
+
+  - id: kit_006
+    name: Framer Motion Recipes
+    url: https://www.framer.com/motion
+    framework: [react]
+    component_count: official
+    style: Reference implementation
+    install_method: npm install framer-motion
+    license: MIT
+    best_for: Learning animation patterns, reference for custom implementations
+    notable_components:
+      - layout-animation
+      - page-transitions
+      - shared-layout
+      - gesture-animations
+      - scroll-animations
+    decision_trigger: Need official Framer Motion example patterns
+
+  - id: kit_007
+    name: Lottie Files
+    url: https://lottiefiles.com
+    framework: [any, react, vue, web]
+    component_count: 100K+ animations
+    style: Vector animation marketplace
+    install_method: npm install @lottiefiles/dotlottie-web
+    license: Various (per animation)
+    best_for: Micro-illustrations, loading states, onboarding, empty states
+    notable_components:
+      - loading-spinners
+      - success-check
+      - error-alerts
+      - onboarding-illustrations
+      - empty-state-animations
+    decision_trigger: Need vector illustrations or micro-animations without After Effects
+
+  - id: kit_008
+    name: Rive
+    url: https://rive.app
+    framework: [any, react, vue, flutter, ios, android]
+    component_count: varies
+    style: Interactive runtime animations
+    install_method: npm install @rive-app/react-canvas
+    license: Freemium
+    best_for: Interactive animations, game-like UI, state machines
+    notable_components:
+      - interactive-buttons
+      - character-animations
+      - loading-states
+      - toggle-switches
+      - pull-to-refresh
+    decision_trigger: Need interactive state-machine-driven animations (Lottie alternative)
+
+  - id: kit_009
+    name: Tailwind Animations (by cruip)
+    url: https://tw-animations.vercel.app
+    framework: [tailwind]
+    component_count: 20+
+    style: Curated Tailwind animation examples
+    install_method: copy-paste
+    license: MIT
+    best_for: Quick reference for common Tailwind animation patterns
+    decision_trigger: Need quick Tailwind-only animation code snippets
+
+  - id: kit_010
+    name: Animista
+    url: https://animista.net
+    framework: [css-only]
+    component_count: 100+
+    style: CSS-only animation generator
+    install_method: copy-paste CSS
+    license: Free
+    best_for: Generate custom CSS @keyframes animations interactively
+    decision_trigger: Need custom CSS animation without any library

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

@@ -0,0 +1,331 @@
+metadata:
+  skill: domyh-design
+  domain: charts
+  version: 6.2.2
+  updated: "2026-02-05"
+  migrated_from: charts.yaml
+  patterns_count: 25
+  columns:
+    - "No"
+    - Data Type
+    - Keywords
+    - Best Chart Type
+    - Secondary Options
+    - Color Guidance
+    - Performance Impact
+    - Accessibility Notes
+    - Library Recommendation
+    - Interactive Level
+patterns:
+  - id: "1"
+    data_type: Trend Over Time
+    keywords:
+      - trend
+      - time-series
+      - line
+      - growth
+      - timeline
+      - progress
+    best_chart_type: Line Chart
+    secondary_options: Area Chart, Smooth Area
+    color_guidance: "Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity"
+    performance_impact: ⚡ Excellent (optimized)
+    accessibility_notes: ✓ Clear line patterns for colorblind users. Add pattern overlays.
+    library_recommendation: Chart.js, Recharts, ApexCharts
+    interactive_level: Hover + Zoom
+  - id: "2"
+    data_type: Compare Categories
+    keywords:
+      - compare
+      - categories
+      - bar
+      - comparison
+      - ranking
+    best_chart_type: Bar Chart (Horizontal or Vertical)
+    secondary_options: Column Chart, Grouped Bar
+    color_guidance: "Each bar: distinct color. Category: grouped same color. Sorted: descending order"
+    performance_impact: ⚡ Excellent
+    accessibility_notes: ✓ Easy to compare. Add value labels on bars for clarity.
+    library_recommendation: Chart.js, Recharts, D3.js
+    interactive_level: Hover + Sort
+  - id: "3"
+    data_type: Part-to-Whole
+    keywords:
+      - part-to-whole
+      - pie
+      - donut
+      - percentage
+      - proportion
+      - share
+    best_chart_type: Pie Chart or Donut
+    secondary_options: Stacked Bar, Treemap
+    color_guidance: "Colors: 5-6 max. Contrasting palette. Large slices first. Use labels."
+    performance_impact: ⚡ Good (limit 6 slices)
+    accessibility_notes: "⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items."
+    library_recommendation: Chart.js, Recharts, D3.js
+    interactive_level: Hover + Drill
+  - id: "4"
+    data_type: Correlation/Distribution
+    keywords:
+      - correlation
+      - distribution
+      - scatter
+      - relationship
+      - pattern
+    best_chart_type: Scatter Plot or Bubble Chart
+    secondary_options: Heat Map, Matrix
+    color_guidance: "Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density"
+    performance_impact: ⚠ Moderate (many points)
+    accessibility_notes: ⚠ Provide data table alternative. Use pattern + color distinction.
+    library_recommendation: D3.js, Plotly, Recharts
+    interactive_level: Hover + Brush
+  - id: "5"
+    data_type: Heatmap/Intensity
+    keywords:
+      - heatmap
+      - heat-map
+      - intensity
+      - density
+      - matrix
+    best_chart_type: Heat Map or Choropleth
+    secondary_options: Grid Heat Map, Bubble Heat
+    color_guidance: "Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data"
+    performance_impact: ⚡ Excellent (color CSS)
+    accessibility_notes: "⚠ Colorblind: Use pattern overlay. Provide numerical legend."
+    library_recommendation: D3.js, Plotly, ApexCharts
+    interactive_level: Hover + Zoom
+  - id: "6"
+    data_type: Geographic Data
+    keywords:
+      - geographic
+      - map
+      - location
+      - region
+      - geo
+      - spatial
+    best_chart_type: Choropleth Map, Bubble Map
+    secondary_options: Geographic Heat Map
+    color_guidance: "Regional: single color gradient or categorized colors. Legend: clear scale"
+    performance_impact: ⚠ Moderate (rendering)
+    accessibility_notes: ⚠ Include text labels for regions. Provide data table alternative.
+    library_recommendation: D3.js, Mapbox, Leaflet
+    interactive_level: Pan + Zoom + Drill
+  - id: "7"
+    data_type: Funnel/Flow
+    keywords: funnel/flow
+    best_chart_type: Funnel Chart, Sankey
+    secondary_options: Waterfall (for flows)
+    color_guidance: "Stages: gradient (starting color → ending color). Show conversion %"
+    performance_impact: ⚡ Good
+    accessibility_notes: ✓ Clear stage labels + percentages. Good for accessibility if labeled.
+    library_recommendation: D3.js, Recharts, Custom SVG
+    interactive_level: Hover + Drill
+  - id: "8"
+    data_type: Performance vs Target
+    keywords: performance-vs-target
+    best_chart_type: Gauge Chart or Bullet Chart
+    secondary_options: Dial, Thermometer
+    color_guidance: "Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors"
+    performance_impact: ⚡ Good
+    accessibility_notes: ✓ Add numerical value + percentage label beside gauge.
+    library_recommendation: D3.js, ApexCharts, Custom SVG
+    interactive_level: Hover
+  - id: "9"
+    data_type: Time-Series Forecast
+    keywords: time-series-forecast
+    best_chart_type: Line with Confidence Band
+    secondary_options: Ribbon Chart
+    color_guidance: "Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading"
+    performance_impact: ⚡ Good
+    accessibility_notes: ✓ Clearly distinguish actual vs forecast. Add legend.
+    library_recommendation: Chart.js, ApexCharts, Plotly
+    interactive_level: Hover + Toggle
+  - id: "10"
+    data_type: Anomaly Detection
+    keywords: anomaly-detection
+    best_chart_type: Line Chart with Highlights
+    secondary_options: Scatter with Alert
+    color_guidance: "Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert"
+    performance_impact: ⚡ Good
+    accessibility_notes: ✓ Circle/marker for anomalies. Add text alert annotation.
+    library_recommendation: D3.js, Plotly, ApexCharts
+    interactive_level: Hover + Alert
+  - id: "11"
+    data_type: Hierarchical/Nested Data
+    keywords: hierarchical/nested-data
+    best_chart_type: Treemap
+    secondary_options: Sunburst, Nested Donut, Icicle
+    color_guidance: "Parent: distinct hues. Children: lighter shades. White borders 2-3px."
+    performance_impact: ⚠ Moderate
+    accessibility_notes: ⚠ Poor - provide table alternative. Label large areas.
+    library_recommendation: D3.js, Recharts, ApexCharts
+    interactive_level: Hover + Drilldown
+  - id: "12"
+    data_type: Flow/Process Data
+    keywords: flow/process-data
+    best_chart_type: Sankey Diagram
+    secondary_options: Alluvial, Chord Diagram
+    color_guidance: Gradient from source to target. Opacity 0.4-0.6 for flows.
+    performance_impact: ⚠ Moderate
+    accessibility_notes: ⚠ Poor - provide flow table alternative.
+    library_recommendation: D3.js (d3-sankey), Plotly
+    interactive_level: Hover + Drilldown
+  - id: "13"
+    data_type: Cumulative Changes
+    keywords: cumulative-changes
+    best_chart_type: Waterfall Chart
+    secondary_options: Stacked Bar, Cascade
+    color_guidance: "Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1."
+    performance_impact: ⚡ Good
+    accessibility_notes: ✓ Good - clear directional colors with labels.
+    library_recommendation: ApexCharts, Highcharts, Plotly
+    interactive_level: Hover
+  - id: "14"
+    data_type: Multi-Variable Comparison
+    keywords: multi-variable-comparison
+    best_chart_type: Radar/Spider Chart
+    secondary_options: Parallel Coordinates, Grouped Bar
+    color_guidance: "Single: #0080FF 20% fill. Multiple: distinct colors per dataset."
+    performance_impact: ⚡ Good
+    accessibility_notes: ⚠ Moderate - limit 5-8 axes. Add data table.
+    library_recommendation: Chart.js, Recharts, ApexCharts
+    interactive_level: Hover + Toggle
+  - id: "15"
+    data_type: Stock/Trading OHLC
+    keywords: stock/trading-ohlc
+    best_chart_type: Candlestick Chart
+    secondary_options: OHLC Bar, Heikin-Ashi
+    color_guidance: "Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below."
+    performance_impact: ⚡ Good
+    accessibility_notes: ⚠ Moderate - provide OHLC data table.
+    library_recommendation: Lightweight Charts (TradingView), ApexCharts
+    interactive_level: Real-time + Hover + Zoom
+  - id: "16"
+    data_type: Relationship/Connection Data
+    keywords: relationship/connection-data
+    best_chart_type: Network Graph
+    secondary_options: Hierarchical Tree, Adjacency Matrix
+    color_guidance: "Node types: categorical colors. Edges: #90A4AE 60% opacity."
+    performance_impact: ❌ Poor (500+ nodes struggles)
+    accessibility_notes: ❌ Very Poor - provide adjacency list alternative.
+    library_recommendation: D3.js (d3-force), Vis.js, Cytoscape.js
+    interactive_level: Drilldown + Hover + Drag
+  - id: "17"
+    data_type: Distribution/Statistical
+    keywords: distribution/statistical
+    best_chart_type: Box Plot
+    secondary_options: Violin Plot, Beeswarm
+    color_guidance: "Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336."
+    performance_impact: ⚡ Excellent
+    accessibility_notes: ✓ Good - include stats table (min, Q1, median, Q3, max).
+    library_recommendation: Plotly, D3.js, Chart.js (plugin)
+    interactive_level: Hover
+  - id: "18"
+    data_type: Performance vs Target (Compact)
+    keywords: performance-vs-target-(compact)
+    best_chart_type: Bullet Chart
+    secondary_options: Gauge, Progress Bar
+    color_guidance: "Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px."
+    performance_impact: ⚡ Excellent
+    accessibility_notes: ✓ Excellent - compact with clear values.
+    library_recommendation: D3.js, Plotly, Custom SVG
+    interactive_level: Hover
+  - id: "19"
+    data_type: Proportional/Percentage
+    keywords: proportional/percentage
+    best_chart_type: Waffle Chart
+    secondary_options: Pictogram, Stacked Bar 100%
+    color_guidance: 10x10 grid. 3-5 categories max. 2-3px spacing between squares.
+    performance_impact: ⚡ Good
+    accessibility_notes: ✓ Good - better than pie for accessibility.
+    library_recommendation: D3.js, React-Waffle, Custom CSS Grid
+    interactive_level: Hover
+  - id: "20"
+    data_type: Hierarchical Proportional
+    keywords: hierarchical-proportional
+    best_chart_type: Sunburst Chart
+    secondary_options: Treemap, Icicle, Circle Packing
+    color_guidance: "Center to outer: darker to lighter. 15-20% lighter per level."
+    performance_impact: ⚠ Moderate
+    accessibility_notes: ⚠ Poor - provide hierarchy table alternative.
+    library_recommendation: D3.js (d3-hierarchy), Recharts, ApexCharts
+    interactive_level: Drilldown + Hover
+  - id: "21"
+    data_type: Root Cause Analysis
+    keywords:
+      - root cause
+      - decomposition
+      - tree
+      - hierarchy
+      - drill-down
+      - ai-split
+    best_chart_type: Decomposition Tree
+    secondary_options: Decision Tree, Flow Chart
+    color_guidance: "Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey."
+    performance_impact: ⚠ Moderate (calculation heavy)
+    accessibility_notes: ✓ clear hierarchy. Allow keyboard navigation for nodes.
+    library_recommendation: Power BI (native), React-Flow, Custom D3.js
+    interactive_level: Drill + Expand
+  - id: "22"
+    data_type: 3D Spatial Data
+    keywords:
+      - 3d
+      - spatial
+      - immersive
+      - terrain
+      - molecular
+      - volumetric
+    best_chart_type: 3D Scatter/Surface Plot
+    secondary_options: Volumetric Rendering, Point Cloud
+    color_guidance: "Depth cues: lighting/shading. Z-axis: color gradient (cool to warm)."
+    performance_impact: ❌ Heavy (WebGL required)
+    accessibility_notes: ❌ Poor - requires alternative 2D view or data table.
+    library_recommendation: Three.js, Deck.gl, Plotly 3D
+    interactive_level: Rotate + Zoom + VR
+  - id: "23"
+    data_type: Real-Time Streaming
+    keywords:
+      - streaming
+      - real-time
+      - ticker
+      - live
+      - velocity
+      - pulse
+    best_chart_type: Streaming Area Chart
+    secondary_options: Ticker Tape, Moving Gauge
+    color_guidance: "Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark."
+    performance_impact: ⚡ Optimized (canvas/webgl)
+    accessibility_notes: ⚠ Flashing elements - provide pause button. High contrast.
+    library_recommendation: Smoothed D3.js
+    interactive_level: CanvasJS
+  - id: "24"
+    data_type: Sentiment/Emotion
+    keywords:
+      - sentiment
+      - emotion
+      - nlp
+      - opinion
+      - feeling
+    best_chart_type: Word Cloud with Sentiment
+    secondary_options: Sentiment Arc, Radar Chart
+    color_guidance: "Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency."
+    performance_impact: ⚡ Good
+    accessibility_notes: ⚠ Word clouds poor for screen readers. Use list view.
+    library_recommendation: D3-cloud, Highcharts, Nivo
+    interactive_level: Hover + Filter
+  - id: "25"
+    data_type: Process Mining
+    keywords:
+      - process
+      - mining
+      - variants
+      - path
+      - bottleneck
+      - log
+    best_chart_type: Process Map / Graph
+    secondary_options: Directed Acyclic Graph (DAG), Petri Net
+    color_guidance: "Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444."
+    performance_impact: ⚠ Moderate to Heavy
+    accessibility_notes: ⚠ Complex graphs hard to navigate. Provide path summary.
+    library_recommendation: React-Flow, Cytoscape.js, Recharts
+    interactive_level: Drag + Node-Click